Callback URL mismatch when changing the allowed callback URL of the application

[sinko]

Hey. I am currently implementing Auth0 in my angular 10 project. I have implemented universal login, and while the application does work when I set the callback URL to be the home page through the dashboard (ie if it is http://localhost:4200/), I keep getting errors if I set the callback URL to be anything other than this, including other webpages that exist on my website (ie http://localhost:4200/callback for example). The error reads :

Callback URL mismatch.
The provided redirect_uri is not in the list of allowed callback URLs.

This is a problem because I want the login page to redirect users to a callback page, NOT the home page. How can I do this through the dashboard?

[stephanie.chamblee]

Hi @sinko,

Welcome to the Community!

For Allowed Callback URLs, you cannot use something like a wildcard (e.g. http://localhost:4200/*), but instead the URL must be an exact match, including the relative path.

The suggested implementation is to pass a state param when requesting authentication and then refer to that in the /callback page to perform the redirect:

1. Store the following in localStorage: randomStateValue : the URL pathname.

2. Pass randomStateValue as the state parameter in the authentication request.

3. Check the state value in the callback, and retrieve the value for randomStateValue from localStorage.

4. Perform the redirect from within your application.

Documentation: Prevent Attacks and Redirect Users with OAuth 2.0 State Parameters

Related topics:

• How to allow list of URL's in Auth0 after mentioning particular path - #3 by stephanie.chamblee
• Allowed Callback URLs ending with a wildcard - #2 by prashantT

[sinko]

Hi @stephanie.chamblee , thanks for replying so promptly.

I am just wondering, within the context of an angular application, where exactly would these take place? My current thinking is that I would use an RNG and pass that value in the localStorage.setItem() function on the first page the user goes onto. Would steps 2 and 3 be done on the same login button component that the user would select to open the universal login screen?

[stephanie.chamblee]

Hi @sinko,

I’ve done a bit more research on the Angular-specific implementation of this, and the Auth0 Angular SDK can actually handle this a bit easier than what I have described above (I removed the code examples to avoid any confusion).

For the loginWithRedirect function you can pass target in the appState so that the app will redirect to any page after login. I’ve tested this out on the Quickstart:

// src/app/components/nav-bar/nav-bar.component.ts

  loginWithRedirect() {
    this.auth.loginWithRedirect({appState: {
      target: window.location.pathname
    }});
  }