I’m developing an application using Angular 7.
The initialization of the object done according to the tutorial:
this._auth0 = new auth0.WebAuth(
{
clientID: 'my_id',
domain: 'my_domain',
responseType: 'token id_token',
redirectUri: 'http://my_url:port',
scope: 'openid'
}
When I’m calling _auth0.login() It seems to succeed (I can see it in the url and in the object returned by _auth0.parseHash()), but at the console I’m receiving the following error:
{error: "invalid_token", errorDescription: "state does not match."}
I followed the tutorial at https://auth0.com/docs/quickstart/spa/angular2#create-an-authentication-service.
What could be the problem?
Hey there!
Let me try to reproduce it and see what I got and get back to you with I found
I managed to download the sample from that quickstart and handle all the instructions and login works for me + not getting any state error in the logs. Let me try to reproduce it without downloading the sample but writing it myself using the code snippets.
I’m not sure as I have little to no experience in Angular but can you try changing redirectUri property to: 'http://my_url:port/callback' and adjusting it accordingly in the dashboard in your app settings and see whether it’s still there?
Hey @konrad.sopala,
Thank you for your reply.
If I understand correctly the tutorial, the callback should be a valid URL in my application. I set the redirectUri to the address that appeared in the application setting at the dashboard (currently it’s the root of the application).
If it’s matter, right now I’m working on localhost and tested it with Chrome and Firefox
So now it should be http://localhost:portNumber/callback as far as I can see from the docs aaand it should be in the Allowed Callback URLs as well.
That’s exactly what I did. I’m attaching print screen of the Allowed Callback URLs from the application settings.
You can delete the first localhost one. Try leaving it:
http://localhost:4200/callback, http://localhost:4200/login
When I changed it, I got this error:
The URL "http://localhost:4200" is not in the list of allowed callback URLs.
I think that the problem is that I’m not sure what callback in http://localhost:4200/callback means. Can you elaborate on the role of this URL?
@konrad.sopala When I’m submitting the login, the URL that the response redirect is:
http://localhost:4200/#access_token=my_access_token&expires_in=7200&token_type=Bearer&state=my_state&id_token=my_token (the original access_token and token changed due to security issues).
@liork.cryptobiu Ar per the tutorial there is callback component with /callback route so you need to change your configuration.
set redirectUri: 'http://localhost:4200/callback' in your angular application as well as the auth0 client.
I’ve updated Angular 7 demo in my GitHub. GitHub - kdhttps/auth0-angular-node: Auth0 authentication with Angular and NodeJS
@kdhttps Thank you for your reply.
The token does not appear yet in the URL and redirect to the correct URL!
Another issue is that the isAuthenticated() is always return false.
As I noticed at the service, the function that responsible to update the field authenticated is handleLoginCallback() → getUserInfo(authResult).
I added a call for the handleLoginCallback at the callback component, but it always return undefined.
What could be the problem?
The token does not appear yet in the URL and redirect to the correct URL!
@liork.cryptobiu Currently what are you getting in URL? is there any error message?
The URL is: http://localhost:4200/ (this is the correct callback).
When I open the console for errors is empty.
When I’m trying to navigate to location that restricted only for users, it’s always return to the home page, since the login seems to be fine:
constructor(private auth: AuthService, private router : Router)
{
if (!this.auth.isAuthenticated())
this.router.navigate(['/login']);
}
@liork.cryptobiu could you please share your angular code. I’ll check it.
Also what is your redirectUri now in angular app and auth0?
The redirectUri is 'http://localhost:4200' at the Angular app.
At the Auth0 the Allowed Callback URLs are: http://localhost:4200/, http://localhost:4200/login.
I will upload a clean code to a Github repository.
@liork.cryptobiu As I am guessing as per your above comment and configuration about callback URL, your redirectUri: http://localhost:4200 configuration is wrong because login is handled by callback component so you need to update your configuration in angular and auth0 with redirectUri: http://localhost:4200/callback.
http://localhost:4200/ it is just a correct URL not a correct callback to handle login request.
The flow is
- Redirect to auth0
- Login in auth0
- auth0 will redirect to
redirectUri with access_token
- so in your case, the access_token(handle login) is controlled by the
callback component that is handleLoginCallback. so that you need to register redirectUri: http://localhost:4200/callback.
@kdhttps If I understand you correctly, the callback is a component that uses auth0 authentication?
If i’m using it in multiple pages at my app, I should supply a full list of all the APIs that uses auth0?
@liork.cryptobiu You don’t need to use it at multiple pages. You just need to handle it at one place one time i.e. at callback component. At for other pages, you just need to check isAuthenticated.
@kdhttps I added a new component that called callback.
The only code that exists in the component is this.auth.handleLoginCallback().
When I’m printing the results to the screen I can see that it returns undefined.
The redirectUri at the code and at auth0 is the same. The definition of the auth0.WebAuth is:
this._auth0 = new auth0.WebAuth(
{
clientID: my_client_id',
domain: 'my_domain',
responseType: 'token id_token',
redirectUri: 'http://localhost:4200/callback',
scope: 'openid'
});
