Angular

This tutorial demonstrates how to add user login to an Angular application using BlitzWare.

This tutorial is based on the example app.

1. Configure BlitzWare

2. Install the BlitzWare Angular SDK

3. Add Login to your application

4. Show User profile info and add Logout to your application

5. Add Protection to your routes

Configure BlitzWare

Get Your Application Keys

You will need some details about your application to communicate with BlitzWare. You can get these details from the Application Settings section in the BlitzWare dashboard.

You need the Client ID.

Configure Redirect URIs

A redirect URI is a URL in your application where BlitzWare redirects the user after they have authenticated. The redirect URI for your app must be added to the Redirect URIs list in your Application Settings under the Security tab. If this is not set, users will be unable to log in to the application and will get an error.

Install the BlitzWare Angular SDK

Run the following command within your project directory to install the BlitzWare Angular SDK:

npm

npm install blitzware-angular-sdk

yarn

yarn add blitzware-angular-sdk

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

Register and providing BlitzWare

The SDK exports provideBlitzWareAuth, which is a provide function that contains all the services required for the SDK to function. To register this with your application:

1. Open the app.config.ts file.

2. Import the provideBlitzWareAuth function from the blitzware-angular-sdk package.

3. Add provideBlitzWareAuth to the application by adding it to the providers array.

app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideBlitzWareAuth } from 'blitzware-angular-sdk';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideBlitzWareAuth({
      clientId: 'your-client-id',
      redirectUri: 'your-redirect-uri',
    }),
  ],
};

The provideBlitzWareAuth function takes the properties clientId and redirectUri ; the values of these properties correspond to the Client ID and Redirect URI values that you can find under Settings in the Single Page Web Application (SPA) that you registered with BlitzWare.

Add Login to your application

The BlitzWare Angular SDK gives you tools to quickly implement user authentication in your Angular application, such as creating a login button using the login() method from the BlitzWareAuthService service class. Executing login() redirects your users to the BlitzWare Universal Login Page, where BlitzWare can authenticate them. Upon successful authentication, BlitzWare will redirect your users back to your application.

login.component.ts

import { Component } from '@angular/core';
import { BlitzWareAuthService } from 'blitzware-angular-sdk';
import { NgIf, AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [NgIf, AsyncPipe],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css',
})
export class LoginComponent {
  constructor(public auth: BlitzWareAuthService) {}

  login() {
    this.auth.login();
  }
}

login.component.html

<div *ngIf="auth.isLoading | async; else loaded">
  <p>Loading...</p>
</div>

<ng-template #loaded>
  <h1>Login Page</h1>
  <button (click)="login()">Login</button>
</ng-template>

Show User profile info and add Logout to your application

The BlitzWare Angular SDK helps you retrieve the profile information associated with logged-in users quickly in whatever component you need, such as their name or profile picture, to personalize the user interface. The profile information is available through currentUser exposed by the BlitzWareAuthService service.

You also need a way to log out. You can create a logout button using the logout() method from the BlitzWareAuthService service. Executing logout() clears the session and makes sure that the user can not access protected resources.

Take this Dashboard component as an example of how to use it:

dashboard.component.ts

import { Component } from '@angular/core';
import { BlitzWareAuthService } from 'blitzware-angular-sdk';
import { NgIf, AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [NgIf, AsyncPipe],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css',
})
export class DashboardComponent {
  constructor(public auth: BlitzWareAuthService) {}

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

dashboard.component.html

<div class="container mt-5" *ngIf="auth.currentUser | async as user">
  <div
    class="row align-items-center profile-header mb-5 text-center text-md-left"
  >
    <div class="col-md">
      <h1>Dashboard</h1>
      <p>Welcome to the protected dashboard, {{ user.username }}!</p>
      <button (click)="logout()">Logout</button>
    </div>
  </div>
</div>

Add Protection to your routes

The BlitzWare Angular SDK exports the BlitzWareAuthGuard class used to protect routes by preventing unauthorized users from accessing certain pages or components within your application. Here is how you can do it:

app.routes.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { BlitzWareAuthGuard } from 'blitzware-angular-sdk';

export const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [BlitzWareAuthGuard],
  },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

As you can see, we simply added BlitzWareAuthGuard between the canActivate brackets.

That's it!