[FIXED] How to redirect to http://localhost:4200/shops/shop1/dashboard after auth0 login in Angular

Issue

Auth0 does not redirect to http://localhost:4200/shops/shop1/dashboard after login. It only calls back to root http://localhost:4200 after login.

Auth0 official document says:

After the user authenticates we will only call back to any of these URLs. You can specify multiple valid URLs by comma-separating them (typically to handle different environments like QA or testing). Make sure to specify the protocol (https://) otherwise the callback may fail in some cases. With the exception of custom URI schemes for native clients, all callbacks should use protocol https://. You can use Organization URL parameters in these URLs.

Allowed Call Back URLs in Auth0 account:

http://localhost:4200/pages/welcome, http://localhost:4200/shops/shop1/dashboard,
http://localhost:4200

Allowed Web Origins:

http://localhost:4200, http://localhost:4200/shops/shop1/dashboard

Allowed Origins (CORS)

http://localhost:4200, http://localhost:4200/shops/shop1/dashboard

Login Auth0 built-in using auth service

    loginWithRedirect(): void {
        // Call this to redirect the user to the login page
        this.auth.loginWithRedirect();
      }

Thanks for your time in advance :)

Solution

I got it as:

<button
  *ngIf="(auth.isAuthenticated$ | async) === false"
  (click)="loginWithRedirect({
    appState: { target: '/shops/shop1/dashboard' }
  })">
  Log in
</button>

and its working fine :)

Answered By - ftslaptop pc

Answer Checked By - Mildred Charles (PHPFixing Admin)