This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Angular application using the Auth0 Angular SDK.
Use this file to discover all available pages before exploring further.
Use AI to integrate Auth0
If you use an AI coding assistant like Claude Code, Cursor, or GitHub Copilot, you can add Auth0 authentication automatically in minutes using agent skills.Install:
Your AI assistant will automatically create your Auth0 application, fetch credentials, install @auth0/auth0-angular, create route guards and HTTP interceptors, and configure your environment. Full agent skills documentation →
Prerequisites: Before you begin, ensure you have the following installed:
Verify installation: node --version && npm --versionAngular Version Compatibility: This quickstart works with Angular 18.x and newer using the Angular CLI. For older versions of Angular, use the Auth0 Angular SDK v2.
This quickstart demonstrates how to add Auth0 authentication to an Angular application. You’ll build a secure single-page app with login and logout functionality using Angular’s dependency injection system and the Auth0 Angular SDK.
1
Create a new project
Create a new Angular project for this Quickstart
npx @angular/cli@latest new auth0-angular --routing=true --style=css
Open the project
cd auth0-angular
2
Install the Auth0 Angular SDK
npm install @auth0/auth0-angular && npm install
3
Setup your Auth0 App
Next up, you need to create a new app on your Auth0 tenant and add the environment variables to your project.You have three options to set up your Auth0 app: use the Quick Setup tool (recommended), run a CLI command, or configure manually via the Dashboard:
Quick Setup (recommended)
CLI
Dashboard
Create an Auth0 App and copy the pre-filled .env file with the right configuration values.
Run the following shell command on your project’s root directory to create an Auth0 app and generate an environment file:
Before you start, create an environment file on your project
Click on Applications > Applications > Create Application
In the popup, enter a name for your app, select Single Page Web Application as the app type and click Create
Switch to the Settings tab on the Application Details page
Replace YOUR_AUTH0_APP_DOMAIN and YOUR_AUTH0_APP_CLIENT_ID in the src/environments/environment.ts file with the Domain and Client ID values from the dashboard
Finally, on the Settings tab of your Application Details page, configure the following URLs:Allowed Callback URLs:
http://localhost:4200
Allowed Logout URLs:
http://localhost:4200
Allowed Web Origins:
http://localhost:4200
Allowed Callback URLs are a critical security measure to ensure users are safely returned to your application after authentication. Without a matching URL, the login process will fail, and users will be blocked by an Auth0 error page instead of accessing your app.Allowed Logout URLs are essential for providing a seamless user experience upon signing out. Without a matching URL, users will not be redirected back to your application after logout and will instead be left on a generic Auth0 page.Allowed Web Origins is critical for silent authentication. Without it, users will be logged out when they refresh the page or return to your app later.
4
Configure the Auth0 module
With your environment file in place from the previous step, configure the Auth0 module in your app:
src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';import { appConfig } from './app/app.config';import { provideAuth0 } from '@auth0/auth0-angular';import { mergeApplicationConfig } from '@angular/core';import { environment } from './environments/environment';import { App } from './app/app';const auth0Config = mergeApplicationConfig(appConfig, { providers: [ provideAuth0({ domain: environment.auth0.domain, clientId: environment.auth0.clientId, authorizationParams: { redirect_uri: window.location.origin } }) ]});bootstrapApplication(App, auth0Config).catch((err) => console.error(err));
If you set up your Auth0 app manually via the dashboard, create src/environments/environment.ts with your domain and client ID from the dashboard.If you’re using Angular 18 or 19, the CLI generates app.component.ts and exports AppComponent instead of App. Change lines 6 and 20 to match:
import { AppComponent } from './app/app.component';// ...bootstrapApplication(AppComponent, auth0Config).catch((err) => console.error(err));
5
Create Login, Logout and Profile Components
Create the component files manually for better control
If you created your project with --standalone=false or prefer using NgModules instead of standalone components, here’s how to configure the SDK with Angular 20+ CLI-generated projects:
src/main.ts
import { platformBrowser } from '@angular/platform-browser';import { AppModule } from './app/app-module';platformBrowser().bootstrapModule(AppModule) .catch((err) => console.error(err));
src/app/app-module.ts
import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AuthModule } from '@auth0/auth0-angular';import { environment } from '../environments/environment';import { AppRoutingModule } from './app-routing-module';import { App } from './app';@NgModule({ declarations: [App], imports: [ BrowserModule, AppRoutingModule, AuthModule.forRoot({ domain: environment.auth0.domain, clientId: environment.auth0.clientId, authorizationParams: { redirect_uri: window.location.origin } }) ], providers: [provideBrowserGlobalErrorListeners()], bootstrap: [App]})export class AppModule { }
If you’re using Angular 18 or 19, your generated files are typically app.component.ts, app.module.ts, and app-routing.module.ts, and main.ts typically uses platformBrowserDynamic instead.In all cases, NgModule projects bootstrap via bootstrapModule() rather than the bootstrapApplication() approach shown in the main quickstart.
Protecting Routes with AuthGuard
Use the modern functional guard to protect routes that require authentication:
