auth0-angular

Original：🇺🇸 English
Translated

Use when adding authentication to Angular applications with route guards and HTTP interceptors - integrates @auth0/auth0-angular SDK for SPAs

20installs
Sourceauth0/agent-skills
Added on

NPX Install

npx skill4agent add auth0/agent-skills auth0-angular

Tags

Translated version includes tags in frontmatter
angular-authenticationauth0-sdkroute-guardshttp-interceptorsspa-security

SKILL.md Content

View Translation Comparison →

Auth0 Angular Integration

Add authentication to Angular applications using @auth0/auth0-angular.

Prerequisites

  • Angular 13+ application
  • Auth0 account and application configured
  • If you don't have Auth0 set up yet, use the 
    auth0-quickstart
    skill first

When NOT to Use

  • AngularJS (1.x) - This SDK requires Angular 13+, use legacy solutions for AngularJS
  • Mobile applications - Use 
    auth0-react-native
    for React Native or native SDKs for Ionic
  • Backend APIs - Use JWT validation middleware for your server language

Quick Start Workflow

1. Install SDK

bash
npm install @auth0/auth0-angular

2. Configure Environment

For automated setup with Auth0 CLI, see Setup Guide for complete scripts.
For manual setup:
Update 
src/environments/environment.ts
:
typescript
export const environment = {
  production: false,
  auth0: {
    domain: 'your-tenant.auth0.com',
    clientId: 'your-client-id',
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  }
};

3. Configure Auth Module

For standalone components (Angular 14+):
Update 
src/app/app.config.ts
:
typescript
import { ApplicationConfig } from '@angular/core';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
};
For NgModule-based apps:
Update 
src/app/app.module.ts
:
typescript
import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
})
export class AppModule {}

4. Add Authentication UI

Update 
src/app/app.component.ts
:
typescript
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.isLoading$ | async; else loaded">
      <p>Loading...</p>
    </div>

    <ng-template #loaded>
      <ng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
        <div *ngIf="auth.user$ | async as user">
          <img [src]="user.picture" [alt]="user.name" />
          <h2>Welcome, {{ user.name }}!</h2>
          <button (click)="logout()">Logout</button>
        </div>
      </ng-container>

      <ng-template #loggedOut">
        <button (click)="login()">Login</button>
      </ng-template>
    </ng-template>
  `
})
export class AppComponent {
  constructor(public auth: AuthService) {}

  login(): void {
    this.auth.loginWithRedirect();
  }

  logout(): void {
    this.auth.logout({ logoutParams: { returnTo: window.location.origin } });
  }
}

5. Test Authentication

Start your dev server and test the login flow:
bash
ng serve

Detailed Documentation

  • Setup Guide - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration
  • Integration Guide - Protected routes with guards, HTTP interceptors, error handling
  • API Reference - Complete SDK API, configuration options, services reference, testing strategies

Common Mistakes

MistakeFix
Forgot to add redirect URI in Auth0 DashboardAdd your application URL (e.g., 
http://localhost:4200
, 
https://app.example.com
) to Allowed Callback URLs in Auth0 Dashboard
Not configuring AuthModule properlyMust call 
AuthModule.forRoot()
in NgModule or 
provideAuth0()
in standalone config
Accessing auth before initializationUse 
isLoading$
observable to wait for SDK initialization
Storing tokens manuallyNever manually store tokens - SDK handles secure storage automatically
Missing HTTP interceptorUse 
authHttpInterceptorFn
or 
AuthHttpInterceptor
to attach tokens to API calls
Route guard not protecting routesApply 
AuthGuard
(or 
authGuardFn
) to protected routes in routing config

Related Skills

  • auth0-quickstart
    - Basic Auth0 setup
  • auth0-migration
    - Migrate from another auth provider
  • auth0-mfa
    - Add Multi-Factor Authentication

Quick Reference

Core Services:
  • AuthService
    - Main authentication service
  • isAuthenticated$
    - Observable check if user is logged in
  • user$
    - Observable user profile information
  • loginWithRedirect()
    - Initiate login
  • logout()
    - Log out user
  • getAccessTokenSilently()
    - Get access token for API calls
Common Use Cases:
  • Login/Logout buttons → See Step 4 above
  • Protected routes with guards → Integration Guide
  • HTTP interceptors for API calls → Integration Guide
  • Error handling → Integration Guide

References