auth0-angular
★ 37by auth0 · part of auth0/agent-skills
Use when adding authentication to Angular applications with route guards and HTTP interceptors - integrates @auth0/auth0-angular SDK for SPAs
Use when adding authentication to Angular applications with route guards and HTTP interceptors - integrates @auth0/auth0-angular SDK for SPAs
Inspect the full instructions your agent will receiveExpandCollapse
This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.
by auth0
Use when adding authentication to Angular applications with route guards and HTTP interceptors - integrates @auth0/auth0-angular SDK for SPAs
npx skills add https://github.com/auth0/agent-skills --skill auth0-angular
Download ZIPGitHub37
Auth0 Angular Integration
Add authentication to Angular applications using @auth0/auth0-angular.
When NOT to Use
-
AngularJS (1.x) - This SDK requires Angular 13+, use legacy solutions for AngularJS
-
Mobile applications - Use
auth0-react-nativefor React Native or native SDKs for Ionic -
Backend APIs - Use JWT validation middleware for your server language
Welcome, {{ user.name }}!
Logout
Login
` }) 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](https://github.com/auth0/agent-skills/blob/main/plugins/auth0/skills/auth0-angular/references/setup.md)** - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration
- **[Integration Guide](https://github.com/auth0/agent-skills/blob/main/plugins/auth0/skills/auth0-angular/references/integration.md)** - Protected routes with guards, HTTP interceptors, error handling
- **[API Reference](https://github.com/auth0/agent-skills/blob/main/plugins/auth0/skills/auth0-angular/references/api.md)** - Complete SDK API, configuration options, services reference, testing strategies
## Related Skills
- `auth0-quickstart` - Basic Auth0 setup
- `auth0-migration` - Migrate from another auth provider
- `auth0-mfa` - Add Multi-Factor Authentication
- `auth0-cli` - Manage Auth0 resources from the terminal
## 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 manually (alternative to HTTP interceptor)
**Common Use Cases:**
- Login/Logout buttons → See Step 4 above
- Protected routes with guards → [Integration Guide](https://github.com/auth0/agent-skills/blob/main/plugins/auth0/skills/auth0-angular/references/integration.md#protected-routes)
- Calling a protected API → [Integration Guide](https://github.com/auth0/agent-skills/blob/main/plugins/auth0/skills/auth0-angular/references/integration.md#calling-a-protected-api)
- Error handling → [Integration Guide](https://github.com/auth0/agent-skills/blob/main/plugins/auth0/skills/auth0-angular/references/integration.md#error-handling)
## References
- [Auth0 Angular SDK Documentation](https://auth0.com/docs/libraries/auth0-angular)
- [Auth0 Angular Quickstart](https://auth0.com/docs/quickstart/spa/angular)
- [SDK GitHub Repository](https://github.com/auth0/auth0-angular)npm install @auth0/auth0-angularRun this in your project — your agent picks the skill up automatically.
Prerequisites
-
Angular 13+ application
-
Auth0 account and application configured
-
If you don't have Auth0 set up yet, use the
auth0-quickstartskill first
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: `
Loading...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
No token sent to API Use either authHttpInterceptorFn for automatic token attachment, or getAccessTokenSilently() for manual control — see Integration Guide
Route guard not protecting routes Apply AuthGuard (or authGuardFn) to protected routes in routing config