Receiving error state does not match with lock 11

General
,
#1

Hi,

My team is attempting to migrate to Lock 11 from v9 and auth0-js 9 from v7. However, for email/password login we are receiving a error: “invalid_token”, errorDescription: "state does not match." as the error on ‘authenticated_error’. Before this we never saw this error (even on lock 10), I also do not retrieve any profile data (although the state/token are being set by auth0 in localStorage)

For further context, here is the authService file, modified for the migration:

indent preformatted text by 4 spaces

export default class AuthService {

constructor (clientId, domain) {
// Configure Auth0
this.lock = new Auth0Lock(clientId, domain, {
autoclose: true,
auth: {
params: {
scope : ‘openid’
},
sso: true,
},
})

this.lock.on('authenticated', function authenticateLock (authResult) {
  this.setAccessToken(authResult.accessToken)
  hashHistory.replace('/loggedIn')
})
this.lock.on('authorization_error', (error) => console.log('Authentication Error', error));
this.login = this.login.bind(this)

}
login (callback) {

this.lock.show()

}

the auth class is being instantiated per the example in https://github.com/auth0-samples/auth0-react-samples/tree/embedded-login/01-Embedded-Login

dependencies include:
“dependencies”: {
“auth0-js”: “^9.3.2”,
“auth0-lock”: “^11.3.1”,
“react”: “^15.6.2”,
“react-dom”: “15.6.2”,
“react-router”: “2.8.0”,

Thanks.

#2

The Lock configuration you showed does not explicitly set a state (https://auth0.com/docs/libraries/lock/v11/configuration#params-object-) so one should be generated automatically and then Lock when parsing/validating the response would use the one it generated.

Can you provide an HTTP trace associated with an authentication attempt that results in the issue in question? Ideally, use something other than Chrome to capture the trace as Chrome tends to not store response bodies to save space and that may impact the troubleshooting. Also be sure to redact any sensitive information like passwords or use throw away test users to perform the authentication.

#3

Hi There,
I got same error as details below:
We’ve been going through your recommendation to upgrade our client applications from Lock 9 to Lock 11, however we appear to have come across a problem with the TypeScript Lock 11 implementation - specifically to do with Lock State causing errors. We originally thought this must have been a mistake at our end, but we’ve reverted to your sample code, and found the exact same issue.
The problem is that if we set the State option on our lock configuration, we receive the above error. This is something which works as expected and as per documentation in the previous version.
In order to demonstrate this to you as clearly as possible, we have forked one of your samples and made very minor change to make use of the date. You can see the diff here - https://github.com/auth0-samples/auth0-angular-samples/compare/embedded-login...jamiuaz:embedded-login

Error : STATE DOES NOT MATCH.
STEPS:

this is my fork of one of your examples - https://github.com/jamiuaz/auth0-angular-samples/tree/embedded-login
I changed this file to use some basic State - https://github.com/jamiuaz/auth0-angular-samples/blob/embedded-login/01-Embedded-Login/src/app/auth/auth.service.ts
Now run it and try to login: http://localhost:4200/home
enter login credentials
It will fail with STATE DOES NOT MATCH.

#4

Resolved

The issue happen to be that in auth0-js ^9.3.3 url save into state should be encoded as callback payload from auth0 encodes the url in state, which when comparing with state saved in localStorage will be save if encoded i.e.

params: {
scope: ‘openid…’,
state = encodedState: encodeURIComponent(/search?source=hp&ei=Uc_1)
},

#6

Hi,
I still have the same issue. I have just upgraded
from (it works fine)
“auth0-js”: “8.10.1”,
“auth0-lock”: “10.22.0”,
to (it does not work)
“auth0-js”: “9.5.1”,
“auth0-lock”: “11.6.1”,
My code is :
lock = new Auth0Lock( …clientID, …domain, {
auth: {
redirectUrl: …callbackURL,
responseType: ‘token id_token’,
params: {
scope: ‘profile openid email’
}}} );
public login() {
let request = ‘&client_id=’ + …clientID;
request = request + ‘&response_type=id_token token’
request = request + ‘&redirect_uri=’ + …callbackURL;
request = request + ‘&nonce=mysfa’
request = request + ‘&scope=profile openid email’
window.location.href = ‘https://…?’ + request;
};
It is stated that if ‘state is missing it will be generated automatically’


and it suppoese to be fixed in the ( v11.6.0 )

How shall I configure app?
Regards,
Lukasz

#7

Hey there!

Sorry for the delay in response. We’re doing our best in providing you with best developer support experience out there, but sometimes there are too many questions to handle. Sorry for the inconvenience!

Do you still require further assistance from us?

#8