auth0.js
auth0.js copied to clipboard
auth0
No verifier returned from client
Describe the problem
We are trying to use auth0.js for login. With Chrome it’s not a problem, but Firefox or Chrome incognito mode yields No verifier returned from client.
What was the expected behavior?
A successful login.
Reproduction
Here is our simple test setup, hosted for example with npm package http-server:
index.html:
<html>
<head>
<script src="https://cdn.auth0.com/js/auth0/9.19.0/auth0.min.js"></script>
</head>
<body>
<script>
const auth = new auth0.WebAuth({
domain: domain,
clientID: clientId,
redirectUri: `http://localhost:4200/callback`,
audience: audience,
scope: 'openid email profile',
responseType: 'token id_token'
});
const state = JSON.stringify({
redirectUrl: '/'
});
const nonce = "random";
auth.login({
realm: 'Username-Password-Authentication',
username: username,
password: password,
redirectUri: `http://localhost:4200/callback`,
state: state,
nonce: nonce
},
err => {
console.log(err);
});
</script>
</body>
</html>
callback.html:
<html>
<head>
<script src="https://cdn.auth0.com/js/auth0/9.19.0/auth0.min.js"></script>
</head>
<body>
<script>
const auth = new auth0.WebAuth({
domain: domain,
clientID: clientId,
redirectUri: `http://localhost:4200/callback`,
audience: audience,
scope: 'openid email profile',
responseType: 'token id_token'
});
const state = JSON.stringify({
redirectUrl: '/'
});
const nonce = "random";
auth.parseHash({
hash: window.location.hash,
nonce: nonce,
state: localStorage.getItem('state')
}, (err, authResult) => {
console.log(err);
console.log(authResult);
});
</script>
</body>
</html>
auth.parseHash returns the error:
{
"error": "invalid_request",
"errorDescription": "No verifier returned from client.",
"state": "{\"redirectUrl\":\"/\"}"
}
We've set up a Cross-Origin Verification Fallback on a public accessible https-endpoint like this (configured on auth0.com):
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.auth0.com/js/auth0/9.19.0/auth0.min.js"></script>
<script type="text/javascript">
var auth0Client = new auth0.WebAuth({
domain: domain,
redirectUri: redirectUri,
clientID: clientId,
responseType: 'token'
});
auth0Client.crossOriginVerification();
</script>
</head>
<body></body>
</html>
Environment
- Version of Auth0.js used: 9.19.0
- Which browsers have you tested in? Chrome: works, Firefox: doesn't work
- Other modules/plugins/libraries that might be involved: -
👋🏻 Cross origin auth relies on third-party cookie support, which are disabled in Chrome Incognito mode. The verification fallback can work in a limited number of cases but I don't believe it's bulletproof.
The SDK stores the verifier in a cookie by default, and it looks as though it's unable to read the cookies when it tries to retrieve the verifier.
Can you try configuring the SDK with __tryLocalStorageFirst: true and see if that solves the issue? When debugging this, can you see the verifier appear in localstorage? (should have a co/verifier prefix).
I've configured WebAuth with __tryLocalStorageFirst: true and I can see the verifier appear in localstorage, but I still get the error:
{
"error": "invalid_request",
"errorDescription": [
"No verifier returned from client.",
"No%20verifier%20returned%20from%20client.",
"No%2520verifier%2520returned%2520from%2520client."
],
"state": [
"{\"redirectUrl\":\"/callback#error=invalid_request",
"%7B%22redirectUrl%22:%22/callback#error=invalid_request",
"%257B%2522redirectUrl%2522:%2522/%2522%257D%22%7D\"}"
]
}
Each time I try to login a new, longer errorDescription and state gets added. Strange.
Generally support is sketchy in incognito mode due to the lack of third party cookie support and will get even worse in the future once Chrome blocks third-party cookies by default.
I could try to reproduce this but I'm not sure there's anything I'll be able to do to help the situation, as it's mostly environmental.
Closing for now, but happy to continue the conversation if there's anything we can help with.