auth0-angular

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

Install with Tessl CLI

npx tessl i github:auth0/agent-skills --skill auth0-angular

What are skills?

1.07x

Review — 72%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Evaluation — 100%

↑ 1.07x

Agent success when using this skill

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Auth0 Angular Integration

Name: auth0-angular
Rating: 0.824 (1 reviews)
Author: auth0

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

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:

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:

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:

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:

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:

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

Mistake	Fix
Forgot to add redirect URI in Auth0 Dashboard	Add your application URL (e.g., `http://localhost:4200`, `https://app.example.com`) to Allowed Callback URLs in Auth0 Dashboard
Not configuring AuthModule properly	Must call `AuthModule.forRoot()` in NgModule or `provideAuth0()` in standalone config
Accessing auth before initialization	Use `isLoading$` observable to wait for SDK initialization
Storing tokens manually	Never manually store tokens - SDK handles secure storage automatically
Missing HTTP interceptor	Use `authHttpInterceptorFn` or `AuthHttpInterceptor` to attach tokens to API calls
Route guard not protecting routes	Apply `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

Repository: auth0/agent-skills
Commit: 8a541a4
Last updated: about 2 hours ago
Created: about 2 hours ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.