Auth0

A library for integrating Auth0 into an Angular application.📚 Documentation - 🚀 Getting Started - 💻 API Reference - 💬 FeedbackDocumentationQuickstart - our interactive guide for quickly adding login, logout and user information to an Angular app using Auth0.Sample App - a full-fledged Angular application integrated with Auth0.FAQs - frequently asked questions about the auth0-angular SDK.Examples - code samples for common Angular authentication scenario's.Docs site - explore our docs site and learn more about Auth0.Getting startedRequirementsThis project only supports the actively supported versions of Angular as stated in the Angular documentation. Whilst other versions might be compatible they are not actively supported.InstallationUsing npm:npm install @auth0/auth0-angularWe also have ng-add support, so the library can also be installed using the Angular CLI:ng add @auth0/auth0-angularConfigure Auth0Create a Single Page Application in the Auth0 Dashboard.If you're using an existing application, verify that you have configured the following settings in your Single Page Application:Click on the "Settings" tab of your application's page.Scroll down and click on the "Show Advanced Settings" link.Under "Advanced Settings", click on the "OAuth" tab.Ensure that "JsonWebToken Signature Algorithm" is set to RS256 and that "OIDC Conformant" is enabled.Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:Allowed Callback URLs: Logout URLs: Web Origins: URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you're handling the callback.Take note of the Client ID and Domain values under the "Basic Information" section. You'll need these values in the next step.Configure the SDKStatic configurationInstall the SDK into your application by importing AuthModule.forRoot() and configuring with your Auth0 domain and client id, as well as the URL to which Auth0 should redirect back after succesful authentication:import { NgModule } from '@angular/core';import { AuthModule } from '@auth0/auth0-angular';@NgModule({

DocsQuickstartsSingle-Page AppReactThis tutorial demonstrates how to make API calls to the Auth0 Management API. We recommend that you log in to follow this quickstart with examples configured for your account.I want to integrate with my app15 minutesSet Up the Auth0 ServiceGet an Access TokenOrI want to explore a sample app2 minutesGet a sample configured with your account settings or check it out on Github.System requirements: React 18The focus of this guide is to show you how to configure the SDK to call APIs protected by OAuth 2. Instead of creating a demo API to test the client-server connection, you'll use the Auth0 Management API, which comes bundled with your Auth0 tenant. However, you can adapt this guide to work with any API that you are securing with Auth0.Set Up the Auth0 ServiceThe Auth0Provider setup is similar to the one discussed in the Configure the Auth0Provider component section: you wrap your root component with Auth0Provider to which you pass the domain and clientId props. The values of these two props come from the "Settings" values of the single-page application you've registered with Auth0.However, your React application needs to pass an access token when it calls a target API to access private resources. You can request an access token in a format that the API can verify by passing the audience and scope props to Auth0Provider as follows:import React from 'react';import { createRoot } from 'react-dom/client';import { Auth0Provider } from '@auth0/auth0-react';import App from './App';const root = createRoot(document.getElementById('root'));root.render( );As Auth0 can only issue tokens for custom scopes that exist on your API, ensure that you define the scopes used above when setting up an API with Auth0.Auth0 uses the value of the authorizationParams.audience prop to determine which resource server (API) the user is authorizing your React application to access.In the case of the Auth0 Management API, the audience is In the case of your APIs, you create an Identifier value that serves as the Audience value whenever you set up an API with Auth0.The actions that your React application can perform on the API depend on the scopes that your access token contains,

URI: Auth0 domain itself can be found next to your profile when you log into the Auth0 dashboard.Alternatively, you can grab the domain from your Auth0 application, as explained in the full tutorial.With that information, fill in the Name, Issuer, and JSON Web Key Secret URI and press save (ignore the role for now). 3. Connecting to FaunaCreating an Access Provider is all we need to accept JWT access tokens from Auth0, given that the audience (aud) field in these tokens is set correctly. The audience identifier can be found in the edit pane of the newly created Access Provider (see above). On the Auth0 side, you need to create an Auth0 API with this audience, which then allows you to include this API in the token (e.g., by configuring the client library). For the full instructions to correctly configure Auth0 tokens to include this audience, please refer to the full Fauna with Auth0 guide, which details each step of this process.A valid Auth0 access token would look as follows when decoded: { "iss": " "sub": "google-oauth2|107696438605329289272", "aud": [ " " ], "iat": 1602681059, "exp": 1602767459, "azp": "OgU7xmvv7pwumxlbilTA4MB7pErILWfS", "scope": "openid profile email",}Once we have such a token, we can use it to query Fauna directly. We can either perform GraphQL queries (given that we uploaded a GraphQL schema or prepopulated the database with sample data upon creation) by passing the token along as the “Authorization Bearer” header. Or start querying with FQL with one of the drivers (Android, C#, Go,

DocsQuickstartsSingle-Page AppAngularThis tutorial demonstrates how to make API calls to the Auth0 Management API. We recommend that you log in to follow this quickstart with examples configured for your account.I want to integrate with my app15 minutesProvide the HTTP InterceptorMake an API CallOrI want to explore a sample app2 minutesGet a sample configured with your account settings or check it out on Github.System requirements: Angular 12+The focus of this guide is to show you how to configure the SDK to call APIs protected by OAuth 2. Instead of creating a demo API to test the client-server connection, you'll use the Auth0 Management API, which comes bundled with your Auth0 tenant. However, you can adapt this guide to work with any API that you are securing with Auth0.This article builds upon the previous chapter, adding the capability to automatically attach an access token to outgoing requests made using Angular's built-in HttpClient service.Provide the HTTP InterceptorTo install and configure the HTTP interceptor, perform the following steps:Import the authHttpInterceptorFn type from the Auth0 Angular SDKImport provideHttpClient from @angular/common/httpRegister authHttpInterceptorFn in provideHttpClient using withInterceptors.Add configuration to specify audience, scope, and which requests should have an Authorization header attached automaticallyThe following is an example of an Angular module (based upon the default implementation when you create a new app using ng new) that supports AuthHttpInterceptor, configured to call the Auth0 Management API with the ability to read the current user profile:To begin, open your app.module.ts file and add the necessary imports at the top:// Import the injector module and the HTTP client module from Angularimport { provideHttpClient, withInterceptors } from '@angular/common/http';// Import the HTTP interceptor from the Auth0 Angular SDKimport { authHttpInterceptorFn } from '@auth0/auth0-angular';Next, add provideHttpClient to the providers of the bootstrapApplication function, and add authHttpInterceptorFn using withInterceptors:bootstrapApplication(AppComponent, { providers: [ provideHttpClient(withInterceptors([authHttpInterceptorFn])), ]});Finally, modify

Userimport { AuthService } from '@auth0/auth0-angular';@Component({ selector: 'app-metadata', template: ` {{ metadata | json }} `, standalone: true,})export class UserMetadataComponent implements OnInit { metadata = {}; // Inject both AuthService and HttpClient constructor(public auth: AuthService, private http: HttpClient) {} ngOnInit(): void { this.auth.user$ .pipe( concatMap((user) => // Use HttpClient to make the call this.http.get( encodeURI(` ) ), map((user: any) => user.user_metadata), tap((meta) => (this.metadata = meta)) ) .subscribe(); }}This call succeeds because the HTTP interceptor took care of making sure the correct access token was included in the outgoing request. Checkpoint Your application will show an empty JSON object if you have not set any user_metadata for the logged-in user. To further test out this integration, head to the Users section of the Auth0 dashboard and click on the user who is logged in. Update the user_metadata section with a value like { "theme": "dark" } and click "Save". Refresh your Angular application and verify that it reflects the new user_metadata.Please refer to the Auth0 API quickstarts to learn how to integrate Auth0 with your backend platform.