Angular: Calling an API
This tutorial demonstrates how to call a backend API using an access token. We recommend you to Log in to follow this quickstart with examples configured for your account.
I want to integrate with my app15 minutes
I want to explore a sample app2 minutes
Get a sample configured with your account settings or check it out on Github.
Most single-page apps use resources from data APIs. You may want to restrict access to those resources, so that only authenticated users with sufficient privileges can access them. Auth0 lets you manage access to these resources using API Authorization.
This tutorial shows you how to create a simple API using Express that serves resources protected by a middleware that looks for and validates access tokens. You will then see how to call this API using an access token granted by the Auth0 authorization server.
Create an API
Create the Backend API
For this example, you'll create an Express server that acts as the backend API. This API will expose an endpoint to validate incoming ID Tokens before returning a response.
Start by installing the following packages:
express- a lightweight web server for Node
express-jwt- middleware to validate JsonWebTokens
jwks-rsa- retrieves RSA signing keys from a JWKS endpoint
npm-run-all- a helper to run the SPA and backend API concurrently
Next, create a new file
server.js with the following code:
The above API has one available endpoint,
/api/external, that returns a JSON response to the caller. This endpoint uses the
checkJwt middleware to validate the supplied bearer token using your tenant's JSON Web Key Set. If the token is valid, the request is allowed to continue. Otherwise, the server returns a 401 Unauthorized response.
package.json to add two new scripts:
server. Running the
dev script will now start both the backend server and the serve the Angular application at the same time:
To start the project for this sample, run the
dev script from the terminal:
This will start both the backend API and the frontend application together.
Create the client
Proxy to Backend API
In this example, the Node backend and Angular app run on two different ports. In order to call the API from the Angular application, the development server must be configured to proxy requests through to the backend API. This is so that the Angular app can make a request to
/api/external and it will be correctly proxied through to the backend API at
To do this, create a
proxy.conf.json file in the root of the project and add the following code:
angular.json and add a reference to the proxy config. In the
serve node, include the following reference to the proxy config file:
Login and Get User Info
Update the Authentication Service
We'll now make several updates in the
Call an API
First, add the
audience value to the creation of the Auth0 client instance:
This setting tells the authorization server that your application would like to call the API with the identifier YOUR_API_IDENTIFIER on the user's behalf. This will cause the authorization server to prompt the user for consent the next time they log in. It will also return an access token that can be used to call the API.
Manage Access Token
We'll define an observable method to retrieve the access token and make it available for use in our application. Add the following to the
If you'd like to pass options to
getTokenSilently when calling the method, you can do so.
Create an HTTP Interceptor
In order to add the access token to the header of secured API requests, we'll create an HTTP interceptor. Interceptors intercept and handle or modify HTTP requests or responses. Interceptors in Angular are services.
Create an interceptor service with the following CLI command:
Open the generated
src/app/interceptor.service.ts file and add the following code:
AuthService is provided so that we can access the
getTokenSilently$() stream. Using this stream in the interceptor ensures that requests wait for the access token to be available before firing.
intercept() method returns an observable of an HTTP event. In it, we do the following:
mergeMapensures that any new requests coming through don't cancel previous requests that may not have completed yet; this is useful if you have multiple HTTP requests on the same page
clonethe outgoing request and attach the
Authorizationheader with access token, then send the cloned, authorized request on its way
In order to put the interceptor to work in the application, open the
src/app/app-routing.module.ts routing module and add:
providers array, we're providing the
HTTP_INTERCEPTORS injection token and our
InterceptorService class. We then set
multi: true because we could potentially use multiple interceptors (which would be called in the order provided).
Login with Popup
Call the API
Now we're ready to call the secure API endpoint and display its results in the application. To make HTTP requests in our application, we'll first add the
HttpClientModule to the
HttpClientModule must be imported and then added to the NgModule's
Next, create an API service using the Angular CLI:
Open the generated
src/app/api.service.ts file and add:
This creates a
ping$() method that returns an observable of the HTTP GET request to the API. This can now be used in the application to call the
Now we need somewhere to call the API and display the results. Create a new page component:
src/app/external-api/external-api.component.ts and add this code:
The API service is provided and a named subscription to
api.ping$() is created. The act of subscribing fires off the HTTP call, which we'll do on a button click in the UI. When data comes back from the API, the results are set in a local property (
src/app/external-api/external-api.component.html and replace its contents with the following:
Clicking the button calls the API. The response is displayed in the
pre element, which only renders if
responseJson is present.
This route now needs to be added to our application. Open
src/app/app-routing.module.ts and add the
/external-api route like so:
/external-api route is also guarded with
AuthGuard since it requires an authenticated user with an access token.
Finally, add a link to the navigation bar. Open
src/app/navbar/navbar.component.html and add:
Checkpoint: You should now be able to log in, browse to the External API page, and click the Ping API button to make an API request. The response should then display in the browser.