Don't forget custom base href

[MikaStark]

Checklist

• [X] I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• [X] I have looked into the API documentation and have not found a suitable solution or answer.
• [X] I have searched the issues and have not found a suitable solution or answer.
• [X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• [X] I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

Hi!

I recently deployed an Angular app using this package on a shared HTTP server, which requires hosting the app in a subfolder (e.g., https://www.mysite.fr/foo/). To accommodate this, I adjusted the base href during build time (ng build --base-href /foo/).

Following the Auth0 Angular quickstart, I noticed that you recommend using window.location.origin as the redirect_uri. However, I was surprised by this suggestion because document.baseURI accounts for the base href, while window.location.origin does not.

Could you clarify why window.location.origin is recommended over document.baseURI?

Describe the ideal solution

Update Auth0 Angular quickstart by replacing the code example by this :

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAuth0({
      domain: '{yourDomain}',
      clientId: '{yourClientId}',
      authorizationParams: {
        redirect_uri: document.baseURI
      }
    }),
  ]
});

Also update Add logout to your application example the same way :

import { Component, inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-auth-button',
  template: `
    <ng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
      <button (click)="logout()">
        Log out
      </button>
    </ng-container>

    <ng-template #loggedOut>
      <button (click)="auth.loginWithRedirect()">Log in</button>
    </ng-template>
  `,
  standalone: true
})
export class AuthButtonComponent {
  private readonly document = inject(DOCUMENT);
  private readonly auth = inject(AuthService);

  logout(): void {
    this.auth.logout({ logoutParams: { returnTo: this.document.baseURI } })
  }
}

Alternatives and current workarounds

No response

Additional context

I found this related topic but the proposed solution is partial and seems overcomplicated to me (using LocationStrategy)

[frederikprijck]

The window.location.origin is something that works in a lot of situations and is what we add to our quickstart, you are free to change it to whatever you like.

I don't think baseURI is commonly known or used, and it may confused more people (and I have not tried if it works in as many use-cases as window.location.origin).

You can use any URL that works for you.

[MikaStark]

It’s unfortunate I didn’t convince you, as document.baseURI is massively supported and using it cover the same use-cases as window.location.origin and more (as I guess, the first use the later).