How to include an axios interceptor in Quasar - axios

I am currently working on a Quasar app that uses axios library. User is authenticated as usual by a token that, when expired, has to be renewed using a renewal token. I need an axios interceptor to filter status 401 so that I can ask for a new token and send the request again.
The interceptor is already coded, now the problem is that I don't know how to make Quasar use the plugin. The app that is currently in production, which is done with Vue 2, does it like this:
const _axios = axios.create(*config*);
axios.interceptors.request.use(.....);
Plugin.install = function(Vue, options) { .... }
Vue.use(Plugin)
export default Plugin;
Currently Quasar is based on Vue 3, and Plugin is deprecated, I know in Vue 3 the plugin should be included in the /src/main.js file like this:
import { createApp } from 'vue'
const app = createApp({})
app.use(myPlugin, {
/* optional options */
})
But in Quasar there is no main.js file, I can't see an app.use anywhere, and don't know how to tell Quasar to use the plugin with the axios interceptor. I know there's a quasar.conf.js file that you can set to use Quasar plugins, such as Dialog for example,but I don't know if this file would be the place to make Quasar use the plugin I coded or how it should be done. I have not been able to find info on this subject, could someone please tell me how to make Quasar insert my plugin or point me to where I could find info about it? Thanks.

Related

Using manually created Cognito User Pool with an amplify project

I'm trying to use my existing Cognito User Pool when adding AWS Amplify to a react project.
In result, I want to use Amplify Datastore functionality for existing users in my manually created Cognito User Pool. Also, I like the Amplify CLI functionality for managing GraphQL schema for API, so, this means that I need to initialize amplify project inside my react project.
I started by this chapter https://docs.amplify.aws/lib/datastore/getting-started/q/platform/js. But this chapter uses API Key authentication.
I know, that I can add Authentication to the amplify project by amplify auth add, but it has no option for using existing User Pool.
I can use my User Pool without initializing amplify project by amplify init - by using manually composed aws-exports.json. But as I pointed, I need also add amplify project for API.
I would combine configs, something like Amplify.configure({...aws_config_by_amplify, ...my_aws_config}), but it still unclear how to manage amplify api authentication with my user pool then.
Ideally, it would be great to use some command for amplify project configuration with an existing user pool, but I have not found one.
Also, I suppose that it's possible to make some manual changes in amplify project's cloudformation template/params, and to update the stack with that, but, unfortunately, I am not so good in CloudFormation usage.
How to solve this?
The solution was found here: https://github.com/aws-amplify/amplify-cli/issues/779
Init amplify project amplify init
Add API amplify add api with choosing of GraphQL
Update ampilfy/backend/api/backend-config.json, changing defaultAuthentication to
"defaultAuthentication": {
"authenticationType": "AMAZON_COGNITO_USER_POOLS"
}
Update ampilfy/backend/api/amplifyDatasource/parameters.json:
{
"AppSyncApiName": "amplifyDatasource",
"DynamoDBBillingMode": "PAY_PER_REQUEST",
"DynamoDBEnableServerSideEncryption": "false",
"authRoleName": {
"Ref": "AuthRoleName"
},
"unauthRoleName": {
"Ref": "UnauthRoleName"
},
"AuthCognitoUserPoolId": "<USERPOOL ID>"
}
(I am unsure that authRoleName and unauthRoleName are needed)
amplify push, and voila, the Appsync will have the user pool as the default authentication.
One solution, assuming you want to use the Amplify UI Authenticator component in your React project:
(Note this does not require any Amplify add/pull/push, config file generation, or any of that. It's 100% client side, you just drop in a component, configure it, and use it).
npm install #aws-amplify/ui-react aws-amplify
In your top-level style file, import the theme:
import '#aws-amplify/ui-react/styles.css';
Note: if you are in a Next.js project or get some complaints about pure selectors, import this in your top level app file, like _app.tsx
Add your config object to _app.tsx:
Amplify.configure({
Auth: {
region: 'us-west-2', << whatever region
userPoolId: 'your-userpool-id',
userPoolWebClientId: 'you-web-client-id', << found in App Integrations
},
});
Note that you can get your region from the userPoolId (at least, at this time), it's the part to the left of the underscore.
Add the Authenticator to your markup:
<div className="authenticator">
<Authenticator>
{({ signOut, user }) => (
// Next.js
<Component {...pageProps} signOut={signOut} user={user} />
// react-router-dom
<Routes>[Your Routes]</Routes>
)}
</Authenticator>
</div>
Import note: to use this component, make sure in your user pool Advanced app client settings -> Authentication Flows, "ALLOW_USER_SRP_AUTH" is in the list. The Authenticator component sends data a certain way and needs this protocol.
That's pretty much it. It assumes the userpool has things like verification and an app integration configured correctly, but as for the client side the above is all there is to it, I've used it a number of times recently.

Nuxt middleware not seeing updated store on SSR

Authentication works fine, except on first page load i.e. SSR. When I check my console.log I see that the console.log from my middleware is always executed at SSR level, eventhough I added ssr:false in my config.
What I did was this:
In nuxt.config.ts I added
{
src: '~/plugins/authenticated.js',
mode: 'client'
}
This code is executed successfully, I can see this by checking my developers console's "vue plugin".
In my "component / page" I added a middleware:
export default {
middleware: [
'authenticated'
]
}
When I run the following code in my middleware, it always shows "false" eventhough in the store the value is set to true.
console.log(store.state.users.logged);
It's driving me nuts, can someone tell me how to get middleware working on first page load? we must have SSR because we need SEO et cetera, but we also do need middleware to work.
Using the latest Nuxt en VueX versions (same for Axios).
I had the same problem and I solved it with a mixin. Mixin with the mounted method is only runs on the client side. I hope I have helped you

How to make REST call to MS Graph/OneDrive method with OAuth2

I am trying to use the OneDrive API and I have successfully registered my app through their Application Registration Portal. I can call successfully call the Javascript FilePicker SDK to upload and download files
That demonstrates that I have my app registered properly and the proper app/client-id's.
Now I'd like to use the REST services to upload and download files but I'm not sure how to send authentication and I don't know how to make the call to the proper URL.
My first question is: How can I use the token I created in the reg service to make a REST call?
My second question is: What syntax should I use to upload a file? I don't know where to put the URL to make the call.
The PUT documentation for their upload is found here
<script type="text/javascript">
function launchSaveToOneDrive(){
var xhttp = new XMLHttpRequest();
//Authorization: bearer {token}
xhttp.open("PUT", "/drive/items/{parent-id}:/{filename}:/content", false);
xmlhttp.setRequestHeader("Authorization", "Bearer-xxxxxxxxxxxxxxxxxxx");
xhttp.setRequestHeader("Content-type", "text/plain");
xhttp.send();
var response = JSON.parse(xhttp.responseText);
}
</script>
One option is to use the Microsoft Graph JavaScript SDK that can help with REST calls including uploading files to OneDrive through the MS Graph. The library works with client side JavaScript and Node for JavaScript server apps.
Check the Browser folder under samples to see how to use the SDK in a client app. Uploading a file would look something like this (see that link for the full code):
// file variable is from the contents of an input field for example
var file = document.querySelector('input[type=file]').files[0];
// after user selects a file from the file picker
client
.api('/me/drive/root/children/Book.xlsx/content')
.put(file, (error, response) => {
// supports callbacks and promises
});

Meteor Cordova FacebookConnect Plugin: Which method should be called from client side?

I am using meteor cordova to create an android app. I am using cordova plugin: com.phonegap.plugins.facebookconnect to enable native android login in my app.
facebookConnectPlugin.login(['email'], function(userdata){
//which server method should be called here?
}, Function failure)
I would like to re-use the code. which method should I call to log the user?
I believe the plugin itself takes care of all the mechanism(s) necessary to get the user to provide login information, etc. All you have to do is create a javascript function that fires when the login is successful, or fails.
For instance,
facebookConnectPlugin.login(['NeededPermissions'], mySuccessFunction(), myFailureFunction());
then have two separate js functions that implement those two functions.

Hello.js Demo Twitter Error

hellojs twitter error
When i run the twitter demo from demo folder and clicked on twitter button it give me following error
url is undefind in hello.js file on this line if(url.indexOf(x)>-1){
how to fix this error
thanks
When running the demo page in question
http://adodson.com/hello.js/demos/twitter.html
You'll see...
hello.init({
'twitter' : TWITTER_CLIENT_ID
},
{
redirect_uri:'../redirect.html',
oauth_proxy: OAUTH_PROXY_URL
});
The setup includes an OAUTH_PROXY_URL variable. This tells HelloJS the location of the server-side shim in order for this to work with OAuth1 authorisation providers like Twitter (unlike OAuth2 providers which can share authentication tokens purely client-side)
If running this from a local domain like //localhost this will have been an undefined value.
You'll need to do two things to get the demo working.
Define the oauth_proxy option in the demo code. See http://auth-server.herokuapps.com for setting one up. OR remove it entirely and by default it will use the above service - you'll need to register third party apps there (recommended).
Change your development environment in your host file to something other than //localhost, that way you can register OAuth2 providers which are domain sensitive and often wont let you use localhost when registering your apps callback URI. If you change your development environment to be local.knarly.com with hello.js project as a subfolder - then you can skip step 1 as the oauth_proxy will be defined correctly.