Hello,
Auth0 team - thank you for a great tool for handling heavy auth duties.
Within our Angular5 app, we have regular webAuth.authorize() flow with in-tab redirection implemented, but want to implement it popup mode now, as it makes more sense in scope of feature being developed, so I went on and implemented webAuth.popup.authorize({}, callback), according to info from docs and some useful posts here.
I end up getting the following error in my callback from above (tried with both auth0-js 8.12.3 and 9.7.3):
{
code: "invalid_token",
description: "`state` does not match.",
original: {
error: "invalid_token",
errorDescription: "`state` does not match."
}
}
Here is the flow I follow:
- On app load, in my shared Angular service
AuthService, I initialize a new instance of Auth0:
import * as auth0 from 'auth0-js';
---
webAuth = new auth0.WebAuth({
clientID: CONFIG.clientID,
domain: CONFIG.domain,
responseType: 'token id_token',
audience: 'auth_api',
redirectUri: `${CONFIG.clientEndpoint}/auth-callback`,
scope: 'openid profile email',
leeway: 10
});
- From component class, upon user interaction I invoke the following public method in the same Angular service
AuthService:
public popupLogin() {
this.webAuth.popup.authorize(
{
redirectUri: `${CONFIG.clientEndpoint}/auth-callback`
},
(err, response) => {
console.log({err}, {response});
});
}
- In component which handles the
redirectUri, a following logic is triggered:
const webAuth = new auth0js.WebAuth({
clientID: CONFIG.clientID,
domain: CONFIG.domain
});
webAuth.popup.callback();
note - the code above is according to this comment and this post - Auth0.js Popup Autoclose.
for more clarity - here’s the whole flow of the callback’s page component’s logic:
export class AuthCallbackComponent {
constructor(private auth: AuthService) {
auth.handleAuthentication()
.subscribe(() => {
const webAuth = new auth0js.WebAuth({
clientID:CONFIG.clientID,
domain: CONFIG.domain,
redirectUri: `${CONFIG.clientEndpoint}/auth-callback`,
popupOrigin: CONFIG.clientEndpoint
});
webAuth.popup.callback();
}, e => {
console.log(e);
});
}
}
here is handleAuthentication method from AuthService:
public handleAuthentication() {
const parseHashAsObservable = Observable.bindNodeCallback(this.webAuth.parseHash.bind(this.webAuth));
return parseHashAsObservable().pipe(
switchMap((authResult: any) => {
if (authResult && authResult.accessToken && authResult.idToken) {
window.location.hash = '';
this.setSession(authResult);
} else {
return _throw(new Error('Authentication failed'));
}
})
);
}
My assumption is that there is miscommunication between, essentially 2 spa’s - one that triggered popup to open, and another is the app, that loaded inside the new popup window when /auth-callback route was navigated to.
Will greatly appreciate any hints or thoughts - thanks in advance!
