I have 2 items set up in Auth0:
Application - Single Page Application
API - Custom API, machine to machine
I've followed the instruction in the link below to call the custom API:
https://auth0.com/docs/quickstart/spa/vuejs/02-calling-an-api
I've downloaded the sample with settings configured for both items mentioned above. The Vue app are able to log in correctly, and are able to call the external API by using the downloaded example codes (the external API, "backend", in the example code was written in Node JS).
However, when I change the backend to my Laravel/Lumen app which already set up for item no.2 (custom API), the Vue app received 401 unauthorized error. So, I copied the access token retrieved through Vue:
const accessToken = await this.$auth.getTokenSilently();
console.log(accessToken);
And try to call the Lumen backend with this access token - and it works perfectly fine!
Is there a setting somewhere that I might've missed to enable Vue & Lumen to work with Auth0?
p/s: The custom Lumen API was made following the instruction from:
https://auth0.com/blog/developing-restful-apis-with-lumen/
Ok it turns out I made a mistake in the axios part of the sample code. The sample is using get, while my API is using post. So I ended up sending the header in the wrong axios parameter. Hope this helps someone that encountered the same problem.
Related
I'm trying to connect to the Twinfield API. I have registered an app in the developer portal, and created a callback URI. My call looks as follows:
https://login.twinfield.com/auth/authentication/connect/authorize?redirect_uri=https://oauth.pstmn.io/v1/callback&response_type=id_token+token&client_id=###&client_secret=#####
Link to twinfield api documentation
However I get the error stating that the client application is not known or is not authorized.
Can someone help me with this problem?
Think you are missing the code, see below the response_type
&response_type=code&scope=openid+twf.user+twf.organisation+twf.organisationUser+offline_access&redirect_uri=https://oauth.pstmn.io/v1/callback&
Once you've run this, you get a code and together with basic64encoding of your client_id:client_secret would profide you an access code.
The whole request should look like:
https://login.twinfield.com/auth/authentication/connect/authorize?client_id={xxxx}&response_type=code&scope=openid+twf.user+twf.organisation+twf.organisationUser+offline_access&redirect_uri=https://oauth.pstmn.io/v1/callback&state=SOME_RANDOM_STATE&nonce=SOME_RANDOM_NONCE
for me to get this working in postman I need to copy the whole link into the browser, login there and then get from the return link the code when you see the page "Your call is authenticated"
I am want to build an app which has a static frontend ( target: 'static' in nuxt.config.js ), and a backend using ktor. The app will need to authenticate users but I do not want to manage passwords and things myself, so I would like to integrate with AWS Cognito. Based on my understanding, I think this is the workflow I want:
User is browsing the site anonymously (no login)
They do some action which requires login or explicitly click on login button.
User gets redirected to AWS Cognito ui for login. They may register for new account, login with their existing, or login using another provider (after configuring cognito for it).
Cognito ui redirects user back to the app ui but with JWT tokens in query params (I think this is just how cognito does it)
The JWT token (s?) get stored in vuex store / nuxt auth
The token is used when making requests to the backend. As well as showing some additional components / actions if the user is authenticated and their basic info like username (part of jwt?)
I think I have cognito and the ktor backend setup correctly but I don't know how to get started for the frontend.
The nuxt auth module guide says to set up middleware, but afaik middleware is only for server side rendered apps.
I need to activate the vuex store but I don't know what to put there. Are there some specific things the auth module expects or do I just create an empty file in the directory?
How do I tell it when to redirect or read the token from query param?
How to parse the JWT token (if it doesn't automatically) and get some payload info like username from it?
Does the axios module get configured automatically to make use of this?
I found this old github issue 195 in the auth module repo, but I believe that's for when the "login form"/ui is part of the nuxt app and client is making use of the cognito api without 'redirect'.
Unfortunately everything in this stack is new for me so any help is appreciated. If there is already a project doing something similar, I look at the code and try to figure it out but right now I'm lost.
update 2020-12-31, mainly so that I can put a bounty on this soon: The live demo at https://auth0.nuxtjs.org/ seems to be doing what i'm looking for but then the github page read me shows something else https://github.com/nuxt/example-auth0. Also i don't see middleware / plugins used anywhere. it's all mostly configured through nuxt config, so it only works for the auth0 custom provider?
I was having the same issue as you:
How do I tell it when to redirect or read the token from query param?
I solved this by configuring auth.redirect.callback to match the endpoint that cognito will callback with the token. I believe this will tell the middleware when to look for a new token in the query param.
nuxt.config.js:
auth: {
redirect: {
callback: '/signin',
...
},
strategies: {
awsCognito: {
redirectUri: "http://localhost:8080/signin",
...
}
}
}
And to answer your other questions:
The nuxt auth module guide says to set up middleware, but afaik middleware is only for server side rendered apps.
I tried this setup with ssr: false and it still works fine.
I need to activate the vuex store but I don't know what to put there. Are there some specific things the auth module expects or do I just create an empty file in the directory?
An empty index.js file is fine.
How do I tell it when to redirect or read the token from query param?
See first answer above.
How to parse the JWT token (if it doesn't automatically) and get some payload info like username from it?
From my initial testing I found that the middleware will automatically call the userInfo endpoint when user data is requested e.g. this.$auth.user.email
strategies: {
awsCognito: {
scheme: "oauth2",
endpoints: {
userInfo: "https://x.amazoncognito.com/oauth2/userInfo",
ref: https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html
Does the axios module get configured automatically to make use of this?
Yes.
I am using Laravel 6 and in the controller store method, Auth::user() returns null even when the user is logged in but works in blade template. I have gone through similar questions but nothing is working.
I am posting to an API route and I am not sure whether this is the reason. Kindly assist.
If you have not adjusted the api web group or the RouteServiceProvider that comes with the default application you will not have any session support in your API routes (routes/api.php). The APIs are usually stateless so no session support. If you want to deal with authentication using the built in authentication system you would want to deal with a token based system. The default api guard that is setup for you will use the TokenGuard which will look in the request for a token being passed to authenticate the user against. You would need to assign the middleware auth with the parameter api, to specify the api guard, auth:api.
If you send a request correctly to one of these end points now, including the token, you will have a user returned from Auth::user() or $request->user() etc.
Laravel 6.x Docs - API Authentication - Passing Tokens in Requests
Laravel 6.x Docs - API Authentication - Protected Routes auth:api
Pleease read the whole section for a better understanding of using this type of Guard with the built in Authentication system:
Laravel 6.x Docs - API Authentication
If you don't want to deal with a "stateless" API, and you would rather use sessions you can just move your API routes to the web.php file and prefix them with api.
I have an API which I consume from a VueJS app, backend is handled through Laravel 5.2.
I have setup automatic session timeout after 15min, but if happens you're in the site and try to do anything, I have a loading screen, and it freezes as you're unauthorized.
I wanted to know if there's any global method to read Unauthorized response when all requests are made.
I don't know what this is called, so I wouldn't know how to properly Google the feature.
I'm using VueJS Resource $http library to manage all requests.
Thanks!
I've finally made my way to the right documentation, it was under Vue-Resource, and these are called Interceptors.
https://github.com/vuejs/vue-resource/blob/master/docs/http.md
I want to log in to my application via LinkedIn. This can be done via a call to Cloud.SocialIntegrations.externalAccountLogin() .
However, the function above needs a 'token' parameter. The 'token' is provided by LinkedIn by following the oauth flow(retrieve an authorization code, exchange of the Authorization Code for a Request Token).
Is there an easy way in titanium to obtain this token? I have investigated aaronksaunders's(https://github.com/aaronksaunders/clearlyinnovative.linkedIn) code, and searched on gitt.io. Or do we need to write all of this boilerplate code ourselves?
NOTE: At the moment, I don't want to proxy the call via a server(I prefer not to set up an SSL certificate, etc) and I don't have an appcelerator team or enterprise plan, so I can't use their node(arrow) backend to proxy these calls.
Additional question: is it sufficient to configure the iOS Bundle Identifiers(on the LinkedIn app settings page)? And do I need to use this 'iOS settings' application Id(also on the LinkedIn app settings page)?
I have successfully finished my flow. Everything is explained in this blog post from Ramkumar M: http://shareourideas.com/2012/12/18/linkedin-connect-for-appcelerator-titanium/. The result is achieved by using a modified commonjs module version of the social.js library: https://gist.github.com/rampicos/4320296
This library has a very clean api, the whole flow is nothing more than:
var social = require('social');
var linkedin = social.create({
consumerSecret : CONSUMER_SECRET,
consumerKey : CONSUMER_KEY,
site: 'linkedin'
});
linkedin.authorize(function(){
//callback
});
I don't use the
Cloud.SocialIntegrations.externalAccountLogin()
because the login is done by the social.js library.
LinkedIn app: I have only configured the iOS bundle identifiers.