Callback URL mismatch

As a follow up on the SPA, when you click the login button, it might show you this error: Callback URL mismatch. The reason is that http://localhost:4200/ is not registered as the callback URL of your Auth0 SPA.

Your Angular app starts at main.ts, where Auth0 is set up. app.config.ts configures your Auth0 SPA with the values you entered in environment.ts. Notice window.location.origin. This means http://localhost:4200 is the redirect_uri, which Auth0 uses to redirect the user after authentication succeeds or fails. However, to ensure that no unintended servers receive redirects, we need to explicitly define the authorized receivers of redirections. The solution is to add http://localhost:4200/ in Allowed Callback URLs in the Settings page of your Auth0 SPA. Now, after you click the login button, you should be redirected to Auth0’s login page.

main.ts

// ...
import { appConfig } from "./app/app.config";
// ...
bootstrapApplication(App, appConfig).catch((err) => console.error(err));

app.config.ts

export const appConfig: ApplicationConfig = {
	providers: [
		provideBrowserGlobalErrorListeners(),
		provideRouter(routes),
		provideAuth0({
			domain: environment.auth0.domain,
			clientId: environment.auth0.clientId,
			authorizationParams: {
				redirect_uri: window.location.origin,
			},
		}),
	],
};