Angular: Call an API

By Steve Hobbs

This 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 app

15 minutes

Provide the HTTP Interceptor
Make an API Call

I want to explore a sample app

2 minutes

Get a sample configured with your account settings or check it out on Github.

View on Github

System requirements: Angular 12+

Visit the Integrate Angular with an API Server section of the Angular Authentication By Example guide for a deep dive into calling a protected API from Angular. This guide allows you to set up a sample API server using a backend technology of your choice, effectively creating a full-stack application.

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.

If you followed the previous section where you added user log in to Angular, make sure that you log out of your application as you'll need a new access token to call APIs.

Provide the HTTP Interceptor

To install and configure the HTTP interceptor, perform the following steps:

Import the AuthHttpInterceptor type from the Auth0 Angular SDK
Import HttpClientModule and HTTP_INTERCEPTORS from @angular/common/http
Register AuthHttpInterceptor in the providers section of your application module
Add configuration to specify audience, scope, and which requests should have an Authorization header attached automatically

The 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 Angular
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// Import the HTTP interceptor from the Auth0 Angular SDK
import { AuthHttpInterceptor } from '@auth0/auth0-angular';

Was this helpful?

Next, import HttpClientModule into the imports array of AppModule:

imports: [
  HttpClientModule,
],

Was this helpful?

Now add the Auth0 HTTP interceptor to the providers array of AppModule, like so:

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
],

Was this helpful?

Finally, modify the configuration given to AuthModule.forRoot() to specify the audience and scope values required by the API you want to call, as well as the API routes that should be intercepted by AuthHttpInterceptor.

In this case, the audience and scope for the Auth0 Management API are given, which allows your app to retrieve information about the current user.

AuthModule.forRoot({
  // The domain and clientId were configured in the previous chapter
  domain: '{yourDomain}',
  clientId: '{yourClientId}',

  authorizationParams: {
    // Request this audience at user authentication time
    audience: 'https://{yourDomain}/api/v2/',

    // Request this scope at user authentication time
    scope: 'read:current_user',
  },

  // Specify configuration for the interceptor              
  httpInterceptor: {
    allowedList: [
      {
        // Match any request that starts 'https://{yourDomain}/api/v2/' (note the asterisk)
        uri: 'https://{yourDomain}/api/v2/*',
        tokenOptions: {
          authorizationParams: {
            // The attached token should target this audience
            audience: 'https://{yourDomain}/api/v2/',

            // The attached token should have these scopes
            scope: 'read:current_user'
          }
        }
      }
    ]
  }
})

Was this helpful?

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.

Please refer to the docs for more information on the available options for the HTTP interceptor.

Make an API Call

With your app module configured with the HTTP interceptor from the Angular SDK, calls you make using Angular's built-in HttpClient to the Auth0 Management API will have the appropriate access token specified in the Authorization header. Let's use this as an example for showing user metadata.

The following component demonstrates how to display the user_metadata field from the authenticated user's profile, by making a call to the /api/v2/users endpoint using HttpClient:

import { Component, OnInit } from '@angular/core';
import { concatMap, tap, map } from 'rxjs/operators';

// Import the HttpClient for making API requests
import { HttpClient } from '@angular/common/http';

// Import AuthService from the Auth0 Angular SDK to get access to the user
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-metadata',
  template: `<div *ngIf="metadata">
    <pre>{{ metadata | json }}</pre>
  </div>`,
  styles: [],
})
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(`https://{yourDomain}/api/v2/users/${user.sub}`)
        )
      ),
      map((user) => user['user_metadata']),
      tap((meta) => (this.metadata = meta))
    )
    .subscribe();
  }
}

Was this helpful?

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.

Did it work?

Any suggestion or typo?

Edit on GitHub