Getting callback URL mismatch in an Angular 2 application - redirect

Question

I use Auth0 to authorize users via Google, Facebook and others. This works perfectly if you click log in while the URL is on the list of white-listed callback URLs in Auth0.
But my web application can have any number of different URLs, so having a simple white-list with some allowed URLs does not work.
The login always tries to redirect back to the same URL as I logged in from, and this URL is most of the time not in the list of allowed URLs.
I have tried all kinds of variations of the above settings, but I only get errors like these ones:
The url "https://x.com/posts/gif/hot/1" is not in the list of allowed callback URLs
The url "https://x.com/posts/world/new/1" is not in the list of allowed callback URLs
The url "https://x.com/posts/nature/hot/6" is not in the list of allowed callback URLs
The url "https://x.com/posts/gaming/hot/3" is not in the list of allowed callback URLs
The Lock configuration related code:
options = {
auth: {
callbackURL: 'https://x.com',
// redirectUrl: 'https://x.com',
responseType: 'token',
// sso: true,
// redirect: true,
params: {
scope: 'openid user_id name nickname email picture'
}
}
};
// Configure Auth0
lock = new Auth0Lock('x', 'x.auth0.com', this.options);
constructor(private _router: Router) {
this.userProfile = JSON.parse(localStorage.getItem('profile'));
// Add callback for the Lock `authenticated` event
this.lock.on('authenticated', (authResult) => {
localStorage.setItem('id_token', authResult.idToken);
// Fetch profile information
this.lock.getProfile(authResult.idToken, (error, profile) => {
if (error) {
throw new Error(error);
}
});
});
};
The login method:
public login() {
// Call the show method to display the widget.
this.lock.show({
callbackUrl: 'https://x.com',
state: this._router.url
});
};

Answer 1

I'm assuming you're using the latest version of Lock (Lock 10) and if that's the case there are a few issues with the code you included:
The URL to which Auth0 will redirect to after the user completes the authentication step is specified through auth: { redirectUrl: '...' } and you have that line commented and instead the code is incorrectly using callbackURL.
According to the docs, the show method no longer takes any arguments.
Independently of the Lock version the state parameter should be used to mitigate CSRF attacks so using it exclusively to pass contextual information may be insecure.
Given you have the redirectUrl commented you probably also gave it a try; did you got the same behavior when using that parameter?
Based on the documentation the required configuration for what you're trying to achieve should be accomplished by having:
options = {
auth: {
redirectUrl: 'https://example.com/login/callback',
responseType: 'token',
params: {
state: '[your_state_value]',
scope: 'openid user_id name nickname email picture'
}
}
};
public login() {
// Call the show method to display the widget.
this.lock.show();
};