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

**URL:** <https://community.auth0.com/t/callback-url-mismatch-when-changing-the-allowed-callback-url-of-the-application/59914>\
**Category:** Get Help\
**Tags:** dashboard, angular, login, auth0\
**Created:** [March 23, 2021, 9:11am UTC](https://community.auth0.com/t/callback-url-mismatch-when-changing-the-allowed-callback-url-of-the-application/59914 "2021-03-23T09:11:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sinko](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/sinko/32/12822_2.png) [@sinko](https://community.auth0.com/u/sinko)\
**Post date:** [March 23, 2021, 9:11am UTC](https://community.auth0.com/t/callback-url-mismatch-when-changing-the-allowed-callback-url-of-the-application/59914/1 "2021-03-23T09:11:32Z")

</div>

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/](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](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?

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [March 23, 2021, 1:13pm UTC](https://community.auth0.com/t/callback-url-mismatch-when-changing-the-allowed-callback-url-of-the-application/59914/3 "2021-03-23T13:13:24Z")

</div>

Hi @sinko,

Welcome to the Community!

For **Allowed Callback URLs** , you cannot use something like a wildcard (e.g. [http://localhost:4200/](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](https://auth0.com/docs/protocols/state-parameters#redirect-users)

**Related topics:**

- [How to allow list of URL's in Auth0 after mentioning particular path - #3 by stephanie.chamblee](https://community.auth0.com/t/how-to-allow-list-of-urls-in-auth0-after-mentioning-particular-path/59806/3)
- [Allowed Callback URLs ending with a wildcard - #2 by prashantT](https://community.auth0.com/t/allowed-callback-urls-ending-with-a-wildcard/7626/2)

---

<div class="post-metadata">

**Author:** ![sinko](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/sinko/32/12822_2.png) [@sinko](https://community.auth0.com/u/sinko)\
**Post date:** [March 23, 2021, 3:35pm UTC](https://community.auth0.com/t/callback-url-mismatch-when-changing-the-allowed-callback-url-of-the-application/59914/4 "2021-03-23T15:35:40Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [March 23, 2021, 7:21pm UTC](https://community.auth0.com/t/callback-url-mismatch-when-changing-the-allowed-callback-url-of-the-application/59914/5 "2021-03-23T19:21:00Z")

</div>

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](https://auth0.com/docs/quickstart/spa/angular/01-login):

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

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

```

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [April 7, 2021, 7:21pm UTC](https://community.auth0.com/t/callback-url-mismatch-when-changing-the-allowed-callback-url-of-the-application/59914/6 "2021-04-07T19:21:22Z")

</div>

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.