This seems to appear in several searches on this forum, but I have read all that I can find, and it doesn’t seem to solve my problem.
I am a completely new user, and I am using the custom sign-in page, after successfully using the local sign-in page on angular by calling auth.login(), I switched to trying the hosted page so that I can start customizing.
My hosted pages screen is stock, except for changing
responseType: 'token',
I am using auth0-js 9.6.1, which I think is the latest.
It lets me log in with my application, but no luck after that.
The return of this.auth0.parseHash inside of handleAuthentication has an error of
{ error: “invalid_token”, errorDescription: “state does not match.” }
Is there somewhere I can be pointed that may be able to assist in fixing this?
1 Like
I get the same error starting from the 01-login demo, and changing the hosted page as above.
1 Like
Are you doing all this from the same domain, say localhost? The only times I’ve seen this happen is if the state value you’re sending to Auth0 isn’t a string. If so, the issue isn’t with the hosted login page, but with your application. The state is generated by your application (in this case I assume by Auth0.js) and is used to prevent a variety of attacks. If it changes between your app starting the auth flow and receiving the callback from Auth0, it’s actually a good thing that login fails.
On GitHub, some folks seem to be having the same problem, also because of an issue with the state not being a string: https://github.com/auth0/auth0.js/issues/655.
I’d try to clear LocalStorage first to see if that fixes the issue. You can also use a incognito window or different browser to debug without having to clear it. If that doesn’t work, switch the hosted login page back to default, to rule out if that really isn’t the issue.
It’s hard to help out more unless you can share your stack with us. So what are you working in (React, Vue, etc), what code are you using to start the auth flow, what browser are you using, etc.
Also, forgot to ask: can you check the Auth0 logs to see if the login is successful on the Auth0 side?
Yes, the logs indicate that the login is successful.
I am not specifying a state, it is auto-generated. Pretty much stock hosted page, other than the change I made.
I get the same problem with an private window, with Chrome and Firefox.
I am using http://localhost:3000, as I am running the provided auth0 example 01-login, as specified on the quickstart for the Angular 2+ SPA.
Using Windows 10
- Download the 01-login from the Angular2+ SPA quickstart
- As specified in README.md: “npm install -g @angular/cli”, then “npm install” inside of 01-login
- Run “npm start” as specified, confirm exisiting code works
- Modify the hosted pages responseType to return a ‘token’
…
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
auth: {
redirectUrl: config.callbackURL,
responseType: ‘token’,
params: config.internalOptions
}, …
- Modify app.component.html in the 01-login project to have an additional line
<a href=“Sign In with Auth0” *ngIf=“!auth.isAuthenticated()”>Login
- Click on the link to login, logs indicate successfully, and URL indicates some auto generated state, but error reported as above.
What do you mean share my stack?
I am not sure what would cause the state to change.
<a href=“https://myteam.auth0.com/login?client=xxxxx” *ngIf="!auth.isAuthenticated()">Login
This part is the problem. You’re linking directly to the login page (and therefor are not providing a state).
In the Angular 2+ QuickStart, there’s a section about the buttons for login and logout. You can see you don’t link to Auth0 yourself, you use Auth0.js to do the work for you. That library then creates everything like the state and the required responseType (token, in this case, although a case can be made for id_token token)
<button
class="btn btn-primary btn-margin"
*ngIf="!auth.isAuthenticated()"
(click)="auth.login()">
Log In
</button>
If you stick to this method of letting Auth0.js handle the login logic, your state problem should be fixed. You can then even revert your changes on the hosted login page, as the original code can figure out on its own if it needs to send a token or code responseType.
P.S: ‘stack’ was a bit vague indeed, but you provided everything I needed to understand your situation, so thank you 
1 Like
If I use the auth.login() syntax, does it automatically allow me to customize using the host page, assuming that I have selected enabled option on the Hosted Pages tab?
I should be thanking you for taking your time to assist me. I appreciate it.
Using Auth0.js doesn’t affect your ability to customise the hosted login page.
1 Like
Morning
What was the resolution for this? I’m using the tutorial version I downloaded for my React app and only changed the callback URL to this line:
callbackUrl: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/callback' : 'https://www.mydomain.com/callback',
Now I suddenly get the “invalid token” error. If I try again, the process works perfectly. I checked the logs and I was successfully authenticated.
In this particular case, the direct linking to the login page, as opposed to using Auth0.js, was causing the issue. In your case, I can’t say just like that what the issue is. Is the authentication succesful on the Auth0 side? And if so, does Auth0 send a token to your callback URL? If that is the case, you could use jwt.io to check the token and see if the fields line up with your config.
And random second idea: it might also be a timing issue. A JWT has basically a time it starts being valid and a time it stops being valid. If your computer isn’t perfectly in sync with a time server, you could be having the issue that the JWT simply isn’t valid yet (by like a second or less).
Like I said in the previous post, the first check I’d do is to open the token with jwt.io to check its properties.
If it turns out to be a timing issue, auth0.js has a leeway option to fix that.
https://auth0.com/docs/libraries/auth0js/v9#available-parameters
Everything checks out on my side. The login is successful and the token seems fine too.
Then I’d next check the leeway option. Because I see no reason for a token to be considered invalid otherwise.
No, that didn’t help either.
Can you give me the exact error? Is it just “invalid token”, or also something like “state does not match”?
The above is a screenshot of the console.
1 Like
Can you share the login code you’re using? So both the code of the login button itself and the JavaScript that’s triggered after the button is clicked.
Are you using auth.login() or directly linking to your tenant, like airmaster did with the code below? Because that was the cause of the error there:
I made a repo you are welcome to try: https://github.com/DarryllRobinson/01-login_2 or you can access my live site: www.stillproud.com
I use auth.login() for my live site and the repo. The repo is actually just the tutorial with the Auth variables updated.
Got it. This is a fun one 
It’s because you start at http://www.stillproud.com, but Auth0 redirects to https://www.stillproud.com. The state is stored in localStorage and that’s not the same for http and https. Try redirecting all your traffic to https (a good idea anyway) and you should be fine. That’s also why your second attempt works: you’re already on the https site by then.
Please help me understand as I read your previous comment to someone else who was struggling with this but I thought mine was okay. This is what I see when I first navigate to my page, is there something I’m missing? Isn’t it also https?
