spa

Angular

In this quickstart you are going to build an application with Angular and integrate it with FusionAuth. You’ll be building it for ChangeBank, a global leader in converting dollars into coins. It’ll have areas reserved for users who have logged in as well as public facing sections.

The docker compose file and source code for a complete application are available at https://github.com/FusionAuth/fusionauth-quickstart-javascript-angular-web.

Prerequisites

Node v18: This will be used to run the Angular application.
Docker: The quickest way to stand up FusionAuth. (There are other ways).

This app has been tested with Node v18 and Angular v16.2.0. This example should work with other compatible versions of Node and Angular.

General Architecture

While this sample application doesn’t have login functionality without FusionAuth, a more typical integration will replace an existing login system with FusionAuth.

In that case, the system might look like this before FusionAuth is introduced.

Request flow during login before FusionAuth

The login flow will look like this after FusionAuth is introduced.

Request flow during login after FusionAuth

In general, you are introducing FusionAuth in order to normalize and consolidate user data. This helps to make sure it is consistent and up-to-date as well as offloading your login security and functionality to FusionAuth.

Getting Started

In this section, you’ll get FusionAuth up and running and use Angular CLI to create a new application.

Clone the Code

First off, grab the code from the repository and change into that directory.

git clone https://github.com/FusionAuth/fusionauth-quickstart-javascript-angular-web.git
cd fusionauth-quickstart-javascript-angular-web

Run FusionAuth via Docker

In the root directory of the repo you’ll find a Docker compose file (docker-compose.yml) and an environment variables configuration file (.env). Assuming you have Docker installed on your machine, you can stand up FusionAuth up on your machine with:

docker compose up -d

This will start three containers, once each for FusionAuth, Postgres, and Elastic.

Here you are using a bootstrapping feature of FusionAuth, called Kickstart. When FusionAuth comes up for the first time, it will look at the kickstart/kickstart.json file and configure FusionAuth to a certain initial state.

If you ever want to reset the FusionAuth system, delete the volumes created by docker-compose by executing docker compose down -v, then re-run docker compose up -d.

FusionAuth will be configured with these settings

Your Client Id is e9fdb985-9173-4e01-9d73-ac2d60d1dc8e.
Your Client Secret is super-secret-secret-that-should-be-regenerated-for-production.
Your example username is richard@example.com and the password is password.
Your admin username is admin@example.com and the password is password.
The base URL of FusionAuth http://localhost:9011/.

You can log into the FusionAuth admin UI and look around if you want, but with Docker/Kickstart you don’t need to.

Create a basic Angular application

Now you are going to create a basic Angular application using the Angular CLI. While this section builds a simple Angular application, you can use the same configuration to integrate your existing Angular application with FusionAuth.

npx @angular/cli new changebank && cd changebank

You’ll be prompted to answer a few questions about your application. You can choose the defaults for all of them.

Create the Application

We are going to use the Hosted Backend feature of FusionAuth, so you don’t need to worry about setting up a backend server.

First, install the FusionAuth Angular SDK:

npm install @fusionauth/angular-sdk

Next, you’ll need to configure the SDK with your FusionAuth URL and Client Id. You can do this by adding the following to your src/app/app.module.ts file inside the imports: [ ] section:

    FusionAuthModule.forRoot({
      clientId: 'e9fdb985-9173-4e01-9d73-ac2d60d1dc8e',
      serverUrl: 'http://localhost:9011',
      redirectUri: 'http://localhost:4200',
    }),

Don’t forget to import the FusionAuthModule at the top of the file.

import {FusionAuthModule} from "@fusionauth/angular-sdk";

Our example application is going to have a home page, an account page and a page where someone can make change. The account and make change page will be protected and only visible to logged in users.

Create a Home Page

The next step is to get a basic home page up and running. We’ll take this opportunity to copy in all the images and CSS style files that you’ll need for the application.

Run the following copy commands to copy these files from the quickstart repo into your project. This assumes that you checked the quickstart repo out into the parent directory. If that’s not the case, replace the .. below with your actual repo location.

cp -r ../complete-application/src/assets src && \
cp -r ../complete-application/src/styles.css src

The home page will be a simple page with a welcome message and a login link. You can create a new component for this page with the Angular CLI:

npx ng generate component home-page --standalone

Then, add the welcome message and login link to the src/app/home-page/home-page.component.html template by replacing the contents of that file with the below contents:

<div class="column-container">
  <div class="content-container">
    <div style="margin-bottom: 100px;">
      <h1>Welcome to Changebank</h1>
      <p>To get started, <a (click)="login()" style="cursor: pointer">log in or create a new account</a>.</p>
    </div>
  </div>
  <div style="flex: 0;">
    <img src="/assets/money.jpg" style="max-width: 800px;"/>
  </div>
</div>

And the login function to the component src/app/home-page/home-page.component.ts. Update that file to look like this:

import {Component, inject} from '@angular/core';
import {FusionAuthService} from "@fusionauth/angular-sdk";
import {CommonModule} from "@angular/common";

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent {

  private fusionAuthService = inject(FusionAuthService);

  login() {
    this.fusionAuthService.startLogin();
  }
}

Create an Account Page

The account page displays a random balance for the logged in user. You can create a new component for this page with the Angular CLI:

npx ng generate component account-page --standalone

Then, display the balance in the src/app/account-page/account-page.component.html template by replacing the default content with the below:

<div class="column-container">
  <div class="app-container">
    <h3>Your balance</h3>
    <div class="balance">{{balance | currency}}</div>
  </div>
</div>

You’ll need the balance property in the component src/app/account-page/account-page.component.ts. Update that file to look like this content:

import { Component } from '@angular/core';
import {CommonModule} from "@angular/common";

@Component({
  selector: 'app-account-page',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './account-page.component.html',
  styleUrls: ['./account-page.component.css']
})
export class AccountPageComponent {

  balance = Math.ceil(Math.random() * 100000) / 100;

}

Create A Make Change Page

Next, you’ll create a page only visible to logged in users. This page displays an input field for the user to enter a dollar amount and a button to convert that amount into coins. You can create a new component for this page with the Angular CLI:

npx ng generate component make-change-page --standalone

Then, add the input field and button to the src/app/make-change-page/make-change-page.component.html template, replacing the current contents:

<div class="app-container change-container">
  <h3>We Make Change</h3>

  <div class="change-message" *ngIf="change">
    We can make change for {{change.total | currency}} with {{change.nickels}} nickels and {{change.pennies}} pennies!
  </div>

  <form (ngSubmit)="makeChange()">
    <div class="h-row">
      <div class="change-label">Amount in USD: $</div>
      <input class="change-input" name="amount" [(ngModel)]="amount" type="number" step=".01"/>
      <input class="change-submit" type="submit" value="Make Change"/>
    </div>
  </form>
</div>

You’ll also need the make change function to the component src/app/make-change-page/make-change-page.component.ts. Here is the full contents of that file:

import { Component } from '@angular/core';
import {CommonModule} from "@angular/common";
import {FormsModule} from "@angular/forms";

@Component({
  selector: 'app-make-change-page',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './make-change-page.component.html',
  styleUrls: ['./make-change-page.component.css']
})
export class MakeChangePageComponent {

  amount = 0;

  change: { total: number; nickels: number; pennies: number } | null = null;

  makeChange() {
    const total = this.amount;
    const nickels = Math.floor(this.amount / 0.05);
    const pennies = Math.round((this.amount - nickels * 0.05) * 100);
    this.change = {nickels, pennies, total};
  }

}

Authentication

You now have created a basic Angular application with a home page, account page and a page for making change. The next step is to add authentication to the application.

Auth Guard

The first step is to create an Auth Guard. This will be used to protect the account page and only allow logged in users to access it.

Create a new file called auth-guard.ts in the src/app directory:

import {CanActivateFn, Router} from "@angular/router";
import {FusionAuthService} from "@fusionauth/angular-sdk";
import {inject} from "@angular/core";

export function authGuard(loggedIn: boolean, redirect: string): CanActivateFn {
  return () => {
    const fusionAuthService = inject(FusionAuthService);
    const router = inject(Router);
    return fusionAuthService.isLoggedIn() === loggedIn || router.createUrlTree([redirect]);
  }
}

The Auth Guard is a functional router guard, which can be used to handle anonymous and logged in states. The first parameter defines if the guard should allow logged in users true or anonymous users false. The second parameter is the route to redirect to if the guard fails.

Routing

Next, you’ll need to add the Auth Guard to the routing configuration. Open the src/app/app.module.ts file and add the RouterModule with the following routes inside the imports: [ ] part:

    RouterModule.forRoot([
      {path: '', loadComponent: () => import('./home-page/home-page.component').then(m => m.HomePageComponent), canActivate: [authGuard(false, '/account')]},
      {path: 'account', loadComponent: () => import('./account-page/account-page.component').then(m => m.AccountPageComponent), canActivate: [authGuard(true, '/')]},
      {path: 'make-change', loadComponent: () => import('./make-change-page/make-change-page.component').then(m => m.MakeChangePageComponent), canActivate: [authGuard(true, '/')]},
    ]),

Don’t forget to import the RouterModule and authGuard at the top of the file.

import {RouterModule} from "@angular/router";
import {authGuard} from "./auth-guard";

Tie it all together

Now that you have the Auth Guard and the routing configured, you can tie it all together. Open the src/app/app.component.html file and replace its content with the following:

<div id="page-container">
  <div id="page-header">
    <div id="logo-header">
      <img src="/assets/changebank.svg" alt="Change Bank" width="257" height="55"/>
      <div class="h-row" *ngIf="isLoggedIn">
        <p class="header-email" *ngIf="userInfo$ | async as userInfo">
          {{userInfo.email}}
        </p>
        <a class="button-lg" (click)="logout()" style="cursor: pointer">
          Logout
        </a>
      </div>
      <a class="button-lg" *ngIf="!isLoggedIn" (click)="login()" style="cursor: pointer">
        Login
      </a>
    </div>

    <div id="menu-bar" class="menu-bar">
      <ng-container *ngIf="isLoggedIn">
        <a class="menu-link" routerLink="make-change" routerLinkActive="active">Make Change</a>
        <a class="menu-link" routerLink="account" routerLinkActive="active">Account</a>
      </ng-container>
      <ng-container *ngIf="!isLoggedIn">
        <a class="menu-link">About</a>
        <a class="menu-link">Services</a>
        <a class="menu-link">Products</a>

        <a class="menu-link" style="text-decoration-line: underline">Home</a>
      </ng-container>
    </div>
  </div>

  <div style="flex: 1">
    <router-outlet></router-outlet>
  </div>
</div>

Finally, open the src/app/app.component.ts file and replace it with the following:

import {Component, inject} from '@angular/core';
import {FusionAuthService, UserInfo} from "@fusionauth/angular-sdk";
import {Observable} from "rxjs";
import {fromPromise} from "rxjs/internal/observable/innerFrom";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  private fusionAuthService: FusionAuthService = inject(FusionAuthService);

  isLoggedIn = false;
  userInfo$: Observable<UserInfo>;

  constructor() {
    this.isLoggedIn = this.fusionAuthService.isLoggedIn();
    this.userInfo$ = fromPromise(this.fusionAuthService.getUserInfo());

    this.fusionAuthService.getUserInfo().then(userInfo => {
      console.log(userInfo);
    })
  }

  logout() {
    this.fusionAuthService.logout();
  }

  login() {
    this.fusionAuthService.startLogin();
  }
}

Running the Application

You can now run the application with the following command:

npm start

You can now open up an incognito window and navigate to http://localhost:4200. You will be greeted with the home page. Log in with the user account you created when setting up FusionAuth, and you’ll be redirected to the account page.

The username and password of the Example user can be found in the FusionAuth via Docker section at the top of this article.

Next Steps

This quickstart is a great way to get a proof of concept up and running quickly, but to run your application in production, there are some things you’re going to want to do.

FusionAuth Customization

FusionAuth gives you the ability to customize just about everything with the user’s experience and your application’s integration. This includes

Hosted pages such as login, registration, email verification, and many more
Email templates
User data and custom claims in access token JWTs

Security

You may want to customize the token expiration times and policies in FusionAuth
Choose password rules and a hashing algorithm that meet your security needs

Tenant and Application Management

Model your application topology using Applications, Roles, Groups, Entities, and more
Set up MFA, Social login, and/or SAML integrations
Integrate with external systems using Webhooks, SCIM, and Lambdas

Results

Recent