Angular Authentication By Example: Standalone Components

Updated on June 21, 2024

This TypeScript guide will help you learn how to secure an Angular application using token-based authentication. You'll learn how to use the Angular framework with Standalone Components to implement the following security features:

• How to add user login, sign-up, and logout to Angular Applications.
• How to create route guards to protect Angular application routes.
• How to make API calls from Angular to request data from a protected API.
• How to get user profile information to personalize an Angular user interface.

This guide uses the Auth0 Angular SDK, which provides developers with a high-level API to handle many authentication implementation details. You can now secure your Angular applications following security best practices while writing less code.

What are Standalone components in Angular?

Standalone components provide a simplified way to build Angular applications by reducing the need for NgModules. Angular 14 introduced additional properties to the component, directive, and pipe decorators allowing them to be configured and used without being part of a module.

Quick Angular Setup

With the help of Auth0 by Okta, you don't need to be an expert on identity protocols, such as OAuth 2.0 or OpenID Connect, to understand how to secure your web application stack.

You first integrate your Angular application with Auth0. Your application will then redirect users to an Auth0 customizable login page when they need to log in. Once your users log in successfully, Auth0 redirects them back to your Angular app, returning JSON Web Tokens (JWTs) with their authentication and user information.

Get the Angular Starter Application

We have created a starter project using the Angular CLI to help you learn Angular security concepts through hands-on practice. You can focus on building Angular standalone components and services to secure your application.

Start by cloning the spa_angular_typescript_hello-world_standalone-components repository on its starter branch:

git clone -b starter [email protected]:auth0-developer-hub/spa_angular_typescript_hello-world_standalone-components.git

Once you clone the repo, make spa_angular_typescript_hello-world_standalone-components your current directory:

cd spa_angular_typescript_hello-world_standalone-components

Install the Angular project dependencies as follows:

npm install

This starter Angular project offers a functional application that consumes data from an external API to hydrate the user interface. For simplicity and convenience, the starter project simulates the external API locally using json-server. Later on, you'll integrate this Angular application with a real API server using a backend technology of your choice.

The compatible API server runs on http://localhost:6060 by default. As such, to connect your Angular application with that API server, create a .env file under the root project directory:

touch .env

Populate .env with the following environment variables:

API_SERVER_URL=http://localhost:6060

This project uses an npm script to integrate the content of the .env file with the Angular framework. Check out the set-env.ts file:

const { writeFile, existsSync, mkdirSync } = require('fs');
const { promisify } = require('util');
const path = require('path');
const dotenv = require('dotenv');

dotenv.config();

const writeFilePromisified = promisify(writeFile);

const targetPath = './src/environments/environment.ts';

const envConfigFile = `export const environment = {
  production: false,
  api: {
    serverUrl: '${process.env['API_SERVER_URL']}',
  },
};
`;

(async () => {
  try {
    await ensureDirectoryExistence(targetPath);
    await writeFilePromisified(targetPath, envConfigFile);
  } catch (err) {
    console.error(err);
    throw err;
  }
})();

function ensureDirectoryExistence(filePath: string) {
  var dirname = path.dirname(filePath);
  if (existsSync(dirname)) {
    return;
  }
  ensureDirectoryExistence(dirname);
  mkdirSync(dirname);
  return;
}

This script uses the dotenv package to load environment variables from a .env file into process.env. The script then uses a string template to create the content of the ./src/environments/environment.ts file. It then writes that file with the prescribed content into the Angular project.

The env npm script defined in package.json runs the set-env.ts script using ts-node. However, you don't have to execute npm run env directly. The start npm script will run that for you before you start the Angular development server.

As such, execute the following command to run the Angular application:

npm start

Next, execute the following command to run the JSON server API:

npm run api

You are ready to start implementing user authentication in this Angular project. First, you'll need to configure the Angular application to connect successfully to Auth0. Afterward, you'll use the Auth0 Angular SDK to protect routes, display user profile information, and request protected data from an external API server to hydrate some of the application pages.

Configure Angular with Auth0

Follow these steps to get started with the Auth0 Identity Platform quickly:

Sign up and create an Auth0 Application

A free account also offers you:

• Auth0 Universal Login for Web, iOS & Android.
• Up to 2 social identity providers like Google, GitHub, and Twitter.
• Up to 3 Actions, Rules, & Hooks to customize and extend Auth0's capabilities.

During the sign-up process, you create something called an Auth0 Tenant, representing the product or service to which you are adding authentication.

Once you sign in, Auth0 takes you to the Dashboard. In the left sidebar menu, click on "Applications".

Then, click the "Create Application" button. A modal opens up with a form to provide a name for the application and choose its type. Use the following values:

Auth0 Angular Code Sample

Application Type

Single Page Web Applications

Click the "Create" button to complete the process. Your Auth0 application page loads up.

In the next step, you'll learn how to help Angular and Auth0 communicate.

Create a communication bridge between Angular and Auth0

When using the Auth0 Identity Platform, you don't have to build login forms. Auth0 offers a Universal Login Page to reduce the overhead of adding and managing authentication.

How does Universal Login work?

Your Angular application will redirect users to Auth0 whenever they trigger an authentication request. Auth0 will present them with a login page. Once they log in, Auth0 will redirect them back to your Angular application. For that redirecting to happen securely, you must specify in your Auth0 Application Settings the URLs to which Auth0 can redirect users once it authenticates them.

As such, click on the "Settings" tab of your Auth0 Application page, locate the "Application URIs" section, and fill in the following values:

http://localhost:4040/callback

The above value is the URL that Auth0 can use to redirect your users after they successfully log in.

http://localhost:4040

The above value is the URL that Auth0 can use to redirect your users after they log out.

http://localhost:4040

Using the Auth0 Angular SDK, your Angular application will make requests under the hood to an Auth0 URL to handle authentication requests. As such, you need to add your Angular application origin URL to avoid Cross-Origin Resource Sharing (CORS) issues.

Scroll down and click the "Save Changes" button.

Do not close this page yet. You'll need some of its information in the next section.

Add the Auth0 configuration variables to Angular

From the Auth0 Application Settings page, you need the Auth0 Domain and Client ID values to allow your Angular application to use the communication bridge you created.

Head back to your Auth0 application page and click on the "Settings" tab.

Locate the "Basic Information" section and follow these steps to get the Auth0 Domain and Auth0 Client ID values:

When you enter a value in the input fields present on this page, any code snippet that uses such value updates to reflect it. Using the input fields makes it easy to copy and paste code as you follow along.

As such, enter the "Domain" and "Client ID" values in the following fields to set up your single-page application in the next section:

These variables let your Angular application identify itself as an authorized party to interact with the Auth0 authentication server.

Now, update the .env file under the Angular project directory as follows:

API_SERVER_URL=http://localhost:6060
AUTH0_DOMAIN=AUTH0-DOMAIN
AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
AUTH0_CALLBACK_URL=http://localhost:4040/callback

Once you reach the "Call a Protected API from Angular" section of this guide, you'll learn how to use API_SERVER_URL along with an Auth0 Audience value to request protected resources from an external API that is also protected by Auth0. For now, the application is using json-server to mock the API.

Update the set-env.ts script file to integrate these new Auth0 environment variables from .env into your Angular src/environments/environment.ts file:

const { writeFile, existsSync, mkdirSync } = require('fs');
const { promisify } = require('util');
const path = require('path');
const dotenv = require('dotenv');

dotenv.config();

const writeFilePromisified = promisify(writeFile);

const targetPath = './src/environments/environment.ts';

const envConfigFile = `export const environment = {
  production: false,
  auth0: {
    domain: '${process.env['AUTH0_DOMAIN']}',
    clientId: '${process.env['AUTH0_CLIENT_ID']}',
    authorizationParams: {
      redirect_uri: '${process.env['AUTH0_CALLBACK_URL']}',
    },
    errorPath: '/callback',
  },
  api: {
    serverUrl: '${process.env['API_SERVER_URL']}',
  },
};
`;

(async () => {
  try {
    await ensureDirectoryExistence(targetPath);
    await writeFilePromisified(targetPath, envConfigFile);
  } catch (err) {
    console.error(err);
    throw err;
  }
})();

function ensureDirectoryExistence(filePath: string) {
  var dirname = path.dirname(filePath);
  if (existsSync(dirname)) {
    return;
  }
  ensureDirectoryExistence(dirname);
  mkdirSync(dirname);
  return;
}

You're creating an auth0 object using the configuration values from the Auth0 application you created in the Auth0 Dashboard: Auth0 Domain and Client ID.

Additionally, you use the authorizationParams configuration object to define the query parameters that Angular needs to include on its calls to the Auth0 /authorize endpoint. You define the redirect_uri property within this object to specify the URL from your Angular application to where Auth0 should redirect your users after they successfully log in.

Later, you'll use the auth0 object properties to configure the Provider from the Auth0 Angular SDK using the provideAuth0() function.

Restart your Angular development server to re-generate the src/environments/environment.ts file:

npm start

Handle the Auth0 post-login behavior

Notice that the Auth0 Callback URL, AUTH0_CALLBACK_URL, points to http://localhost:4040/callback, which is the URL that Auth0 uses to redirect your users after they successfully log in. For this Angular application, you'll render a simple page component for the /callback route.

Start by creating a CallbackComponent file under the src/app/features directory using the Angular CLI:

ng g component features/callback --skip-tests --style=none

Update the CallbackComponent to import the NavBarComponent and MobileNavBarComponent:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MobileNavBarComponent, NavBarComponent } from '@app/shared';

@Component({
  selector: 'app-callback',
  standalone: true,
  imports: [CommonModule, MobileNavBarComponent, NavBarComponent],
  templateUrl: './callback.component.html'
})
export class CallbackComponent {

}

Populate the src/app/features/callback/callback.component.html template file as follows:

<div class="page-layout">
  <app-nav-bar></app-nav-bar>
  <app-mobile-nav-bar></app-mobile-nav-bar>
  <div class="page-layout__content">
    <ng-content></ng-content>
  </div>
</div>

The CallbackComponent will only render the navigation bar and an empty content container to help you create a smooth transition between a route with no content, /callback, to a route with content, such as the /profile page.

The next step is to lazy-load your CallbackComponent using the Angular router.

Locate the src/app/routes.ts file and update it like so:

import { Route } from '@angular/router';

export const ROUTES: Route[] = [
  {
    path: '',
    pathMatch: 'full',
    loadComponent: () => import('./features/home/home.component').then(mod => mod.HomeComponent)
  },
  {
    path: 'profile',
    loadComponent: () => import('./features/profile/profile.component').then(mod => mod.ProfileComponent)
  },
  {
    path: 'public',
    loadComponent: () => import('./features/public/public.component').then(mod => mod.PublicComponent)
  },
  {
    path: 'protected',
    loadComponent: () => import('./features/protected/protected.component').then(mod => mod.ProtectedComponent)
  },
  {
    path: 'admin',
    loadComponent: () => import('./features/admin/admin.component').then(mod => mod.AdminComponent)
  },
  {
    path: 'callback',
    loadComponent: () => import('./features/callback/callback.component').then(mod => mod.CallbackComponent)
  },
  {
    path: '**',
    loadComponent: () => import('./features/not-found/not-found.component').then(mod => mod.NotFoundComponent)
  },
];

Install and Set Up the Auth0 Angular SDK

Execute the following command to install the Auth0 Angular SDK:

npm install --save @auth0/auth0-angular

The Auth0 Angular SDK exposes several methods, variables, and types that help you integrate Auth0 with your Angular application idiomatically, including an authentication module and service.

Update the src/main.ts file as follows to include the provideAuth0 function from the Auth0 Angular SDK into your providers array and configure it using data from your environment module.

import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { ROUTES } from './app/routes';
import { environment } from './environments/environment';
import { provideAuth0 } from '@auth0/auth0-angular';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers:[
    provideRouter(ROUTES),
    provideHttpClient(),
    provideAuth0(environment.auth0)
  ]
});

You use the provideAuth0() function to initialize the authentication system, which accepts an object of type AuthConfig. You can then use the environment.auth0 object defined earlier to configure the Auth0 Angular SDK.

User authentication is a mechanism to control who can access your application. You can integrate your Angular application with Auth0 to prevent users who have not logged in from accessing a /profile or /admin route.

If users want to access a guarded route from your application, Auth0 will stop them and ask them to present their credentials. If Auth0 can verify who they are and that they are supposed to go in there, Auth0 will let them in.

The authentication process won't happen within your Angular application layer when using Auth0. Your Angular application will redirect your users to the Auth0 Universal Login page, where Auth0 asks them for credentials and redirects them back to your application with the result of the authentication process.

Auth0 and Angular connection set

You have completed setting up an authentication module that your Angular application can consume. All that is left is for you to continue building up the starter project throughout this guide by implementing Angular components that trigger and manage the authentication flow.

Feel free to dive deeper into the Auth0 Documentation to learn more about how Auth0 helps you save time implementing and managing identity.

Add User Login to Angular

The steps on how to build an Angular login form or login page are complex. You can save development time by using a login page hosted by Auth0 that has a built-in login form that supports different types of user authentication: username and password, social login, and Multi-Factor Authentication (MFA). You just need to create a button that takes users from your Angular application to the login page.

Start by generating a LoginButtonComponent file under the src/app/shared/components/buttons director using the Angular CLI:

ng g component shared/components/buttons/login-button --inline-template --skip-tests --style=none --flat

The CLI generates the component with the standalone property in the @Component decorator set to true. This enables the use of standalone components features such as importing other modules or components directly in the current component and using the current component without including it in an NgModule.

Populate src/app/shared/components/buttons/login-button.component.ts like so:

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-login-button',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button class="button__login" (click)="handleLogin()">Log In</button>
  `
})
export class LoginButtonComponent {

  private auth = inject(AuthService);

  handleLogin(): void {
    this.auth.loginWithRedirect({
      appState: {
        target: '/profile',
      },
    });
  }

}

Within the LoginButtonComponent definition, this.auth.loginWithRedirect() is a method exposed by AuthService that performs a redirect to the Auth0 /authorize endpoint to kickstart the authentication process. You can pass a configuration object to this method to customize the login experience.

By setting up the value of appState.target to /profile, you are telling the Auth0 Angular SDK the following: When my users log in with Auth0 and return to my Angular application, take them from the default callback URL path, /callback, to the "Profile" page, /profile. If you don't specify this appState.returnTo option, your users will be redirected by default to the / path after they log in.

In the next section, you'll configure this method to create a button that your users can click on to sign up for your application.

Add User Sign-Up to Angular

The process on how to build an Angular sign-up form is much more complex. However, you can use a sign-up form hosted by Auth0 that has a built-in password strength verification.

You can create a button that takes users from your Angular application to the sign-up page by specifying the screen_hint=signup property in the authorizationParams configuration object of the loginWithRedirect() method:

authorizationParams: {
  screen_hint: "signup",
}

This loginWithRedirect() method is a wrapper from the Auth0 SPA SDK method of the same name. As such, you can use the RedirectLoginOptions document from the Auth0 SPA SDK to learn more details on these configuration options.

To see this in practice, generate a SignupButtonComponent file under the src/app/shared/components/buttons directory using the Angular CLI:

ng g component shared/components/buttons/signup-button --inline-template --skip-tests --style=none --flat

Populate src/app/shared/components/buttons/signup-button.component.ts like so to define a sign-up button component:

import { Component, inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-signup-button',
  standalone: true,
  imports: [CommonModule],
  template: `
  <button class="button__sign-up" (click)="handleSignUp()">Sign Up</button>
  `
})
export class SignupButtonComponent {
  private auth = inject(AuthService);

  handleSignUp(): void {
    this.auth.loginWithRedirect({
      appState: {
        target: "/profile",
      },
      authorizationParams: {
        screen_hint: 'signup',
      },
    });
  }

}

Using the Auth0 Signup feature requires you to enable the Auth0 New Universal Login Experience in your tenant.

Open the Universal Login section of the Auth0 Dashboard and choose the "New" option under the "Experience" subsection.

Scroll down and click on the "Save Changes" button.

The difference between the login and sign-up user experience will be more evident once you integrate those components with your Angular application and see them in action. You'll do that in the following sections.

Add User Logout to Angular

You can log out users from your Angular application by logging them out of their Auth0 sessions using the logout() method from the Auth0 Angular SDK.

Generate a LogoutButtonComponent file under the src/app/shared/components/buttons directory using the Angular CLI:

ng g component shared/components/buttons/logout-button --inline-template --skip-tests --style=none --flat

Populate src/app/shared/components/buttons/logout-button.component.ts like so:

import { Component, inject } from '@angular/core';
import { CommonModule, DOCUMENT } from '@angular/common';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-logout-button',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button class="button__logout" (click)="handleLogout()">Log Out</button>
  `
})
export class LogoutButtonComponent {
  private auth = inject(AuthService);
  private doc = inject(DOCUMENT);

  handleLogout(): void {
    this.auth.logout({
      logoutParams: {
        returnTo: this.doc.location.origin,
      },
    });
  }
}

When using the logout() method, the Auth0 Angular SDK clears the application session and redirects to the Auth0 /v2/logout endpoint to clear the Auth0 session under the hood.

As with the login method, you can pass an object argument to logout() to customize the logout behavior of the Angular application. You can define a logoutParams property on that configuration object to define parameters for the /v2/logout call. This process is fairly invisible to the user. See logoutParams for more details on the parameters available.

Here, you pass the logoutParams.returnTo option to specify the URL where Auth0 should redirect your users after they log out. Right now, you are working locally, and your Auth0 application's "Allowed Logout URLs" points to http://localhost:4040.

However, if you were to deploy your Angular application to production, you need to add the production logout URL to the "Allowed Logout URLs" list and ensure that Auth0 redirects your users to that production URL and not localhost. Setting logoutParams.returnTo to this.doc.location.origin will do just that.

A best practice when working with Auth0 is to have different tenants for your different project environments. For example, it's recommended for developers to specify a production tenant. A production tenant gets higher rate limits than non-production tenants. Check out the "Set Up Multiple Environments" Auth0 document to learn more about how to set up development, staging, and production environments in the Auth0 Identity Platform.

Render Components Conditionally

In this section, you'll learn how to render Angular components conditionally based on the status of the Auth0 Angular SDK or the authentication status of your users.

Render the authentication buttons conditionally

The Angular starter application features a desktop and mobile navigation experience.

When using your Angular application on a viewport large enough to fix a desktop or tablet experience, you'll see a navigation bar at the top of the page.

When using a viewport that fits the screen constraints of a mobile device, you'll see a menu button at the top-right corner of the page. Tapping or clicking on the menu button opens a modal that shows you the different pages that you can access in the application.

In this section, you'll expose the button components that trigger the login, sign-up, and logout events through these page navigation elements.

Let's start with the desktop navigation user experience. You'll show both the login and sign-up buttons on the navigation bar when the user is not logged in. Naturally, you'll show the logout button when the user is logged in.

Import LoginButtonComponent, LogoutButtonComponent, and SignupButtonComponent standalone components in the NavBarButtonsComponent. Next, create an isAuthenticated$ variable in the NavBarButtonsComponent to implement the user experience defined above:

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService } from "@auth0/auth0-angular";
import { LoginButtonComponent } from '../../buttons/login-button.component';
import { LogoutButtonComponent } from '../../buttons/logout-button.component';
import { SignupButtonComponent } from '../../buttons/signup-button.component';

@Component({
  standalone: true,
  imports: [CommonModule, SignupButtonComponent, LoginButtonComponent, LogoutButtonComponent],
  selector: 'app-nav-bar-buttons',
  templateUrl: './nav-bar-buttons.component.html',
})
export class NavBarButtonsComponent {
  private auth = inject(AuthService);
  isAuthenticated$ = this.auth.isAuthenticated$
}

Next, update the src/app/shared/components/navigation/desktop/nav-bar-buttons.component.html as follows to conditionally show and hide login, sign-up, and logout buttons:

<div class="nav-bar__buttons">
    <ng-container *ngIf="isAuthenticated$ | async; else unAuthenticated">
        <app-logout-button></app-logout-button>
    </ng-container>
    <ng-template #unAuthenticated>
        <app-signup-button></app-signup-button>
        <app-login-button></app-login-button>
    </ng-template>
</div>

Auth0's isAuthenticated$ value reflects the authentication state of your users as tracked by the Auth0 Angular SDK plugin. This value is true when the user has been authenticated and false when not. As such, you can use the isAuthenticated$ observable to render UI elements conditionally depending on the authentication state of your users, as you did above.

The mobile navigation experience works in the same fashion, except that the authentication-related buttons are tucked into the mobile menu modal.

Update src/app/shared/components/navigation/mobile/mobile-nav-bar-buttons.component.ts as follows:

import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { AuthService } from "@auth0/auth0-angular";
import { LoginButtonComponent } from '../../buttons/login-button.component';
import { LogoutButtonComponent } from '../../buttons/logout-button.component';
import { SignupButtonComponent } from '../../buttons/signup-button.component';

@Component({
  standalone: true,
  imports: [CommonModule, SignupButtonComponent, LoginButtonComponent, LogoutButtonComponent],
  selector: 'app-mobile-nav-bar-buttons',
  templateUrl: './mobile-nav-bar-buttons.component.html',
})
export class MobileNavBarButtonsComponent {
  private auth = inject(AuthService);
  isAuthenticated$ = this.auth.isAuthenticated$
}

Next, update the src/app/shared/components/navigation/mobile/mobile-nav-bar-buttons.component.html as follows to conditionally show and hide login, sign-up, and logout buttons:

<div class="mobile-nav-bar__buttons">
    <ng-container *ngIf="isAuthenticated$ | async; else unAuthenticated">
        <app-logout-button></app-logout-button>
    </ng-container>
    <ng-template #unAuthenticated>
        <app-signup-button></app-signup-button>
        <app-login-button></app-login-button>
    </ng-template>
</div>

Go ahead and try to log in. Your Angular application redirects you to the Auth0 Universal Login page. You can use the form to log in with a username and password or a social identity provider like Google. Notice that this login page also gives you the option to sign up.

However, when you click the sign-up button from your application directly, Angular takes you to the Signup page, where your users can sign up for the Angular application. Try it out!

Notice that when you finish logging in or signing up, Auth0 redirects you to your Angular app, but the login and sign-up buttons may briefly show up before the logout button renders. You'll fix that next.

Render the application conditionally

The user interface flashes because your Angular app doesn't know if Auth0 has authenticated the user yet. Your Angular application will know the user authentication status after the Auth0 Angular SDK initializes.

To fix that UI flashing, use the isLoading$ observable exposed by the AuthService that emits a boolean value to render a loader in the AppComponent until the Auth0 Angular SDK has finished loading.

Start with importing the PageLoaderComponent and CommonModule into the AppComponent. Then, assign Auth0's isLoading$ observable to a variable so it can be accessed easily in your template:

import { Component, inject } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { AuthService } from "@auth0/auth0-angular";
import { PageLoaderComponent } from './shared';

@Component({
  standalone: true,
  imports: [CommonModule, RouterModule, PageLoaderComponent],
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  private auth = inject(AuthService);
  isAuth0Loading$ = this.auth.isLoading$;
}

Open src/app/app.component.html and update it as follows:

<div class="page-layout" *ngIf="isAuth0Loading$ | async; else auth0Loaded">
  <app-page-loader></app-page-loader>
</div>
<ng-template #auth0Loaded>
  <router-outlet></router-outlet>
</ng-template>

While the SDK is loading, the PageLoaderComponent renders, which shows up an animation. Log out and log back in to see this in action. No more UI flashing should happen.

Render navigation tabs conditionally

There may be use cases where you want to hide user interface elements from users who have not logged in to your application. For this starter application, only authenticated users should see the navigation tabs to access the /protected and /admin pages.

To implement this use case, you'll rely once again on the isAuthenticated$ Observable from the AuthService.

Open the src/app/shared/components/navigation/desktop/nav-bar-tabs.component.ts component file that defines your desktop navigation tabs and update it like so:

import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { NavBarTabComponent } from './nav-bar-tab.component';

@Component({
  standalone: true,
  imports: [CommonModule, NavBarTabComponent],
  selector: 'app-nav-bar-tabs',
  templateUrl: './nav-bar-tabs.component.html',
})
export class NavBarTabsComponent {
  private auth = inject(AuthService);
  isAuthenticated$ = this.auth.isAuthenticated$;
}

Open the src/app/shared/components/navigation/desktop/nav-bar-tabs.component.html component file and update it as follows:

<div class="nav-bar__tabs">
  <app-nav-bar-tab path="/profile" label="Profile"></app-nav-bar-tab>
  <app-nav-bar-tab path="/public" label="Public"></app-nav-bar-tab>
  <ng-container *ngIf="isAuthenticated$ | async">
    <app-nav-bar-tab path="/protected" label="Protected"></app-nav-bar-tab>
    <app-nav-bar-tab path="/admin" label="Admin"></app-nav-bar-tab>
  </ng-container>
</div>

Next, open the src/app/shared/components/navigation/mobile/mobile-nav-bar-tabs.component.ts component file that defines your mobile navigation tabs and update it like so:

import { Component, EventEmitter, inject, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService } from '@auth0/auth0-angular';
import { MobileNavBarTabComponent } from './mobile-nav-bar-tab.component';

@Component({
  standalone: true,
  imports: [CommonModule, MobileNavBarTabComponent],
  selector: 'app-mobile-nav-bar-tabs',
  templateUrl: './mobile-nav-bar-tabs.component.html',
})
export class MobileNavBarTabsComponent {
  @Output() mobileNavBarTabClick = new EventEmitter<string>();

  private auth = inject(AuthService);
  isAuthenticated$ = this.auth.isAuthenticated$;

  onMobileNavBarTabClick(path: string): void {
    this.mobileNavBarTabClick.emit(path);
  }
}

Open the src/app/shared/components/navigation/mobile/nav-bar-tabs.component.html component file and update it as follows:

<div class="mobile-nav-bar__tabs">
  <app-mobile-nav-bar-tab
    path="/profile"
    label="Profile"
    (mobileNavBarTabClick)="onMobileNavBarTabClick($event)"
  ></app-mobile-nav-bar-tab>
  <app-mobile-nav-bar-tab
    path="/public"
    label="Public"
    (mobileNavBarTabClick)="onMobileNavBarTabClick($event)"
  ></app-mobile-nav-bar-tab>
  <ng-container *ngIf="isAuthenticated$ | async">
    <app-mobile-nav-bar-tab
      path="/protected"
      label="Protected"
      (mobileNavBarTabClick)="onMobileNavBarTabClick($event)"
    ></app-mobile-nav-bar-tab>
    <app-mobile-nav-bar-tab
      path="/admin"
      label="Admin"
      (mobileNavBarTabClick)="onMobileNavBarTabClick($event)"
    ></app-mobile-nav-bar-tab>
  </ng-container>
</div>

Log out from your Angular application and notice how now you can only see the tabs for the /profile and /public pages in the navigation bar, along with the login and sign-up buttons. Log in and then see the rest of the navigation bar show up.

Keep in mind that this does not restrict access to the /admin and /protected pages at all. You'll learn how to use the Auth0 Angular SDK to protect Angular routes in the next section.

Add Route Guards to Angular

You can create an authentication route guard to protect Angular routes. Angular will ask users who visit the route to log in if they haven't already. Once they log in, Angular takes them to the route they tried to access.

You can apply a guard to any route by updating src/app/routes.ts as follows:

import { Route } from '@angular/router';
import { AuthGuard } from '@auth0/auth0-angular';

export const ROUTES: Route[] = [
  {
    path: '',
    pathMatch: 'full',
    loadComponent: () => import('./features/home/home.component').then(mod => mod.HomeComponent)
  },
  {
    path: 'profile',
    loadComponent: () => import('./features/profile/profile.component').then(mod => mod.ProfileComponent),
    canActivate: [AuthGuard]
  },
  {
    path: 'public',
    loadComponent: () => import('./features/public/public.component').then(mod => mod.PublicComponent)
  },
  {
    path: 'protected',
    loadComponent: () => import('./features/protected/protected.component').then(mod => mod.ProtectedComponent),
    canActivate: [AuthGuard]
  },
  {
    path: 'admin',
    loadComponent: () => import('./features/admin/admin.component').then(mod => mod.AdminComponent),
    canActivate: [AuthGuard]
  },
  {
    path: 'callback',
    loadComponent: () => import('./features/callback/callback.component').then(mod => mod.CallbackComponent)
  },
  {
    path: '**',
    loadComponent: () => import('./features/not-found/not-found.component').then(mod => mod.NotFoundComponent)
  },
];

You use the AuthGuard from the Auth0 Angular SDK to protect the /profile, /protected, and /admin routes by adding it as the value of the canActivate route configuration property.

If the conditions defined by AuthGuard pass, the component renders. Otherwise, AuthGuard instructs Angular to take you to the Auth0 Universal Login Page to authenticate.

You can now test that these guarded paths require users to log in before accessing them. Log out and try to access the Profile page, Protected page, or the Admin page. If it works, Angular redirects you to log in with Auth0.

Once you log in, Angular should take you to the /profile page as specified by the appState.target property present in the login button component definition.

View on GitHub

Report an issue

Give us feedback

Get User Profile Information in Angular

After a user successfully logs in, Auth0 sends an ID token to your Angular application. Authentication systems, such as Auth0, use ID Tokens in token-based authentication to cache user profile information and provide it to a client application. The caching of ID tokens can improve the performance and responsiveness of your Angular application.

You can use the data from the ID token to personalize the user interface of your Angular application. The Auth0 Angular SDK decodes the ID token and stores its data in the user$ Observable exposed via the AuthService. Some of the ID token information includes the name, nickname, picture, and email of the logged-in user.

How can you use the ID token to create a profile page for your users?

Update src/app/features/profile/profile.component.ts as follows:

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService } from '@auth0/auth0-angular';
import { map } from 'rxjs/operators';
import { PageLayoutComponent } from 'src/app/shared/components/page-layout.component';
import { CodeSnippetComponent } from 'src/app/shared/components/code-snippet.component';

@Component({
  standalone: true,
  imports: [CommonModule, PageLayoutComponent, CodeSnippetComponent],
  selector: 'app-profile',
  templateUrl: './profile.component.html',
})
export class ProfileComponent {
  title = 'Decoded ID Token';

  private auth = inject(AuthService);

  user$ = this.auth.user$;
  code$ = this.user$.pipe(map((user) => JSON.stringify(user, null, 2)));
}

Next, update src/app/features/profile/profile.component.html as follows:

<app-page-layout>
  <div class="content-layout">
    <h1 id="page-title" class="content__title">Profile Page</h1>
    <div class="content__body">
      <p id="page-description">
        <span>
          You can use the <strong>ID Token</strong> to get the profile
          information of an authenticated user.
        </span>
        <span>
          <strong>Only authenticated users can access this page.</strong>
        </span>
      </p>

      <ng-container *ngIf="user$ | async as user">
        <div class="profile-grid">
          <div class="profile__header">
            <img [src]="user.picture" alt="Profile" class="profile__avatar" />
            <div class="profile__headline">
              <h2 class="profile__title">{{ user.name }}</h2>
              <span class="profile__description">{{ user.email }}</span>
            </div>
          </div>
          <ng-container *ngIf="code$ | async as code">
            <div class="profile__details">
              <app-code-snippet
                [title]="title"
                [code]="code"
              ></app-code-snippet>
            </div>
          </ng-container>
        </div>
      </ng-container>
    </div>
  </div>
</app-page-layout>

What's happening within the ProfileComponent?

• You display three properties from the user object in the user interface: name, picture, and email.

• Since the data comes from an Observable, you can subscribe to it directly in the template via the async pipe.

• Finally, you display the full content of the decoded ID token within a code box. You can now see all the other properties available for you to use. The properties are known as "token claims".

The ProfileComponent renders user information that you could consider private or sensitive. Additionally, the user property is null if there is no logged-in user. So either way, this component should only render if Auth0 has authenticated the user. You are already restricting access to this page component by using the authGuard in the /profile route definition of your Angular routes, src/app/routes.ts.

If you are logged in to your application, visit http://localhost:4040/profile to see your user profile details.

Authentication Beyond Passwords: Try Passkeys Today

So far, you have seen how a user can sign up or log in to your application with a username and password. However, you can free your users from having to remember yet another password by allowing them to use passkeys as a new way to log in.

Passkeys are a phishing-resistant alternative to traditional authentication factors, such as the username/password combo, that offer an easier and more secure login experience to users.

You don't have to write any new code to start using passkeys in your application. You can follow the "Authentication with Passkeys" lab to learn how to enable passkeys in your Auth0 tenant and learn more about this emerging technology. Once you complete that optional lab, you can come back to this guide to continue learning about how to access protected API resources on behalf of a user from your application.

Integrate Angular with an API Server

This section focuses on showing you how to get an access token in your Angular application and how to use it to make API calls to protected API endpoints.

When you use Auth0, you delegate the authentication process to a centralized service. Auth0 provides you with functionality to log in and log out users from your Angular application. However, your application may need to access protected resources from an API.

You can also protect an API with Auth0. There are multiple API quickstarts to help you integrate Auth0 with your backend platform.

When you use Auth0 to protect your API, you also delegate the authorization process to a centralized service that ensures only approved client applications can access protected resources on behalf of a user.

How can you make secure API calls from Angular?

Your Angular application authenticates the user and receives an access token from Auth0. The application can then pass that access token to your API as a credential. In turn, your API can use Auth0 libraries to verify the access token it receives from the calling application and issue a response with the desired data.

Instead of creating an API from scratch to test the authentication and authorization flow between the client and the server, you can pair this client application with an API server that matches the technology stack you use at work. The Angular "Hello World" client application that you have been building up can interact with any of the "Hello World" API server samples from the Auth0 Developer Hub.

The "Hello World" API server samples run on http://localhost:6060 by default, which is the same origin URL and port where the mocked JSON server is running. As such, before you set up the "Hello World" API server, locate the tab where you are running the npm run api command and stop the mocked JSON server.

Pick an API code sample in your preferred backend framework and language from the list below and follow the instructions on the code sample page to set it up. Once you complete the sample API server setup, please return to this page to learn how to integrate that API server with your Angular application.

Actix Web/Rust API:Authorization Code Sample

Code sample of a simple Actix Web server that implements token-based authorization using Auth0.

ASP.NET Core Code Sample:Web API Authorization

Code sample of a simple ASP.NET Core server that implements token-based authorization using Auth0.

ASP.NET Core v5 Code Sample:Web API Authorization

Code sample of a simple ASP.NET Core v5.0 server that implements token-based authorization using Auth0.

Django/Python API:Authorization Code Sample

Code sample of a simple Django server that implements token-based authorization using Auth0.

Express.js Code Sample:Basic API Authorization

Code sample of a simple Express.js server that implements token-based authorization using Auth0.

Express.js/TypeScript Code Sample:Basic API Authorization

Code sample of a simple Express.js server built with TypeScript that implements token-based authorization using Auth0.

FastAPI/Python Code Sample:Basic API Authorization

Code sample of a simple FastAPI server that implements token-based authorization using Auth0.

Flask/Python API:Authorization Code Sample

Code sample of a simple Flask server that implements token-based authorization using Auth0.

Laravel/PHP Code Sample:Basic API Authorization with Auth0 Laravel SDK

Code sample of a simple Laravel server that implements token-based authorization using the Auth0 Laravel SDK.

Laravel/PHP Code Sample:Basic API Authorization with Auth0 PHP SDK

Code sample of a simple Laravel server that implements token-based authorization using the Auth0 PHP SDK.

Lumen Code Sample:Basic API Authorization

Code sample of a simple Lumen server that implements token-based authorization using Auth0.

NestJS Code Sample:Basic API Authorization

Code sample of a simple NestJS server that implements token-based authorization using Auth0.

Phoenix/Elixir API:Authorization Code Sample

Code sample of a simple Phoenix server that implements token-based authorization using Auth0.

Ruby on Rails API:Authorization Code Sample

Code sample of a simple Rails server that implements authorization using Auth0.

Spring Code Sample:Basic API Authorization

Java code sample that implements token-based authorization in a Spring Web API server to protect API endpoints, using Spring Security and the Okta Spring Boot Starter.

Spring Functional Code Sample:Basic API Authorization

Java code sample that implements token-based authorization in a Spring Web API server to protect API endpoints, following a functional approach.

Spring WebFlux Code Sample:Basic API Authorization

Java code sample that implements token-based authorization in a Spring WebFlux API server to protect API endpoints, using Spring Security and the Okta Spring Boot Starter.

Golang Code Sample:Basic API Authorization

Code sample of a simple Golang server that implements token-based authorization using Auth0.

Symfony Code Sample:Basic API Authorization

Code sample of a simple Symfony server that implements token-based authorization using Auth0.

Call a Protected API from Angular

Once you have set up the API server code sample, you should have created an Auth0 Audience value. Store that value in the following field so that you can use it throughout the instructions presented on this page easily:

Now, update the .env file under the Angular project directory as follows:

API_SERVER_URL=http://localhost:6060
AUTH0_DOMAIN=AUTH0-DOMAIN
AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
AUTH0_CALLBACK_URL=http://localhost:4040/callback
AUTH0_AUDIENCE=AUTH0-AUDIENCE

You are using AUTH0_AUDIENCE to add the value of your Auth0 API Audience so that your Angular client application can request resources from the API that such audience value represents.

Let's understand better what the AUTH0_AUDIENCE and API_SERVER_URL values represent.

The API_SERVER_URL is simply the URL where your sample API server listens for requests. In production, you'll change this value to the URL of your live server.

Your Angular application must pass an access token when it calls a target API to access protected resources. You can request an access token in a format that the API can verify by passing the audience to the Auth0 Angular SDK.

The value of the Auth0 Audience must be the same for both the Angular client application and the API server you decided to set up.

Why is the Auth0 Audience value the same for both apps? Auth0 uses the value of the audience prop to determine which resource server (API) the user is authorizing your Angular application to access. It's like a phone number. You want to ensure that your Angular application "texts the right API".

As such, update the set-env.ts script file to integrate these new Auth0 environment variables from .env into your Angular src/environments/environment.ts file:

const { writeFile, existsSync, mkdirSync } = require('fs');
const { promisify } = require('util');
const path = require('path');
const dotenv = require('dotenv');

dotenv.config();

const writeFilePromisified = promisify(writeFile);

const targetPath = './src/environments/environment.ts';

const envConfigFile = `export const environment = {
  production: false,
  auth0: {
    domain: '${process.env['AUTH0_DOMAIN']}',
    clientId: '${process.env['AUTH0_CLIENT_ID']}',
    authorizationParams: {
      audience: '${process.env['AUTH0_AUDIENCE']}',
      redirect_uri: '${process.env['AUTH0_CALLBACK_URL']}',
    },
    errorPath: '/callback',
  },
  api: {
    serverUrl: '${process.env['API_SERVER_URL']}',
  },
};
`;

(async () => {
  try {
    await ensureDirectoryExistence(targetPath);
    await writeFilePromisified(targetPath, envConfigFile);
  } catch (err) {
    console.error(err);
    throw err;
  }
})();

function ensureDirectoryExistence(filePath: string) {
  var dirname = path.dirname(filePath);
  if (existsSync(dirname)) {
    return;
  }
  ensureDirectoryExistence(dirname);
  mkdirSync(dirname);
  return;
}

Restart your Angular development server to re-generate the src/environments/environment.ts file:

npm start

You are now including an audience property in the authorizationParams configuration object you pass to the provideAuth0() function. Recall that the provideAuth0 function initializes the authentication system.

The Auth0 Angular SDK provides a functional AuthHttpInterceptor that automatically attaches access tokens to outgoing requests when using the built-in Angular provideHttpClient function. However, you must configure the interceptor to know to which requests it needs to attach access tokens.

Update the configuration of the provideAuth0 function present in the providers array and add the authHttpInterceptorFn to the provideHttpClient function as follows:

import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { ROUTES } from './app/routes';
import { environment } from './environments/environment';
import { authHttpInterceptorFn, provideAuth0 } from '@auth0/auth0-angular';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(ROUTES),
    provideHttpClient(withInterceptors([authHttpInterceptorFn])),
    provideAuth0({
      ...environment.auth0,
      httpInterceptor: {
        allowedList: [
          `${environment.api.serverUrl}/api/messages/admin`,
          `${environment.api.serverUrl}/api/messages/protected`,
        ],
      },
    }),
  ],
});

Let's break down what is happening in the above code:

First, you are adding authHttpInterceptorFn from @auth0/auth0-angular to the array of interceptors registered to Angular's Http client.

This completes the wiring needed to connect the AuthHttpInterceptor with your Angular application request cycle.

Now, you need to tell the SDK to which requests to attach access tokens by further configuring the provideAuth0() function. Based on that configuration, Angular will match the URL of any request that you make using HttpClient against an allowed list of URLs:

httpInterceptor: {
  allowedList: [
    `${env.api.serverUrl}/api/messages/admin`,
    `${env.api.serverUrl}/api/messages/protected`
  ],
},

If there's a match, Angular attaches an access token to the authorization header of the request. You can use a string or a regular expression for the URL matching. For now, you are allowing Angular to attach an access token to requests it makes to http://localhost:6060/api/messages/protected and http://localhost:6060/api/messages/admin.

That's all it takes to integrate Angular with an external API server that is also secured by Auth0 and to use an access token to consume protected server resources from your Angular client application.

Next Steps

You have implemented user authentication in Angular to identify your users, get user profile information, and control the content that your users can access by protecting routes and API resources.

This guide covered the most common authentication use case for an Angular application: simple login and logout. However, Auth0 is an extensible and flexible identity platform that can help you achieve even more. If you have a more complex use case, check out the Auth0 Architecture Scenarios to learn more about the typical architecture scenarios we have identified when working with customers on implementing Auth0.

We'll cover advanced authentication patterns and tooling in future guides, such as using a pop-up instead of redirecting users to log in, adding permissions to ID tokens, using metadata to enhance user profiles, and much more.

View on GitHub

Report an issue

Give us feedback