Implementing Passkey Authentication in Angular with TypeScript
In this guide, we’ll walk through the process of integrating passkey authentication into an Angular application using TypeScript. Passkeys provide a secure and scalable way to manage user authentication, removing the need for traditional passwords.
View full tutorial in our original blog post here
Prerequisites
Before starting, ensure you’re familiar with Angular, HTML, CSS, and TypeScript. Additionally, make sure you have Node.js and NPM installed on your machine. Installing the Angular CLI is recommended for this tutorial:
npm install -g @angular/cli
Setting Up the Angular Project
First, let’s create a new Angular project. In this example, we’re using Angular version 15.2.9:
ng new passkeys-demo-angular
During setup, choose the following options:
- Share pseudonymous usage data: No
- Angular routing: Yes
- Stylesheet format: CSS
- Enable SSR: No (Choose Yes if your application requires server-side rendering)
Once the setup is complete, run the application to ensure everything is functioning:
ng serve
Integrating Corbado for Passkey Authentication
1. Set Up Your Corbado Account
To start, create an account on the Corbado developer panel. This step allows you to experience passkey signup firsthand. After registering, create a project within Corbado by selecting “Corbado Complete” as your product. Specify “Web app” as the application type, and for the framework, select Angular. In your application settings, use the following details:
-
Application URL:
http://localhost:4200 -
Relying Party ID:
localhost
2. Embedding the Corbado UI Component
Next, you’ll need to install the required packages for Corbado integration. Navigate to your project’s root directory and install the necessary packages:
npm i @corbado/web-js
npm i -D @corbado/types @types/react @types/ua-parser-js
Modify the app.component.ts to initialize Corbado when the application starts:
import { Component, OnInit } from '@angular/core';
import Corbado from "@corbado/web-js";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'passkeys-demo-angular';
isInitialized = false;
constructor() {
}
ngOnInit(): void {
this.initialize();
}
async initialize() {
try {
await Corbado.load({
projectId: "<Your Corbado Project ID>",
darkMode: 'off'
});
this.isInitialized = true;
} catch (error) {
console.error('Initialization failed:', error);
}
}
}
3. Creating Login and Profile Components
Generate two components: one for displaying the passkey login UI and another for showing basic user information upon successful authentication:
ng generate component login
ng generate component profile
Update your app-routing.module.ts to define routes for the login and profile components:
// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { ProfileComponent } from "./profile/profile.component";
import { RouterModule, Routes } from "@angular/router";
import { LoginComponent } from "./login/login.component";
const routes: Routes = [
{ path: 'profile', component: ProfileComponent },
{ path: 'login', component: LoginComponent },
{ path: '', component: LoginComponent },
{ path: '**', redirectTo: '/' }
]
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
In login.component.ts, set up the passkey authentication UI and define the behavior after a successful login:
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import Corbado from "@corbado/web-js";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, AfterViewInit {
@ViewChild('authElement', { static: false }) authElement!: ElementRef; // Access the element
constructor(private router: Router) {
}
ngOnInit() {
if (Corbado.user) {
this.router.navigate(['/profile']);
}
}
ngAfterViewInit() {
// Mount the Corbado auth UI after the view initializes
Corbado.mountAuthUI(this.authElement.nativeElement, {
onLoggedIn: () => this.router.navigate(['/profile']), // Use Angular's router instead of window.location
});
}
}
And in the login.component.html, add the following:
<div #authElement></div>
4. Setting Up the Profile Page
The profile page will display basic user information (user ID and email) and provide a logout button. If the user isn’t logged in, the page will prompt them to return to the home page:
import { Component } from '@angular/core';
import { Router } from "@angular/router";
import Corbado from "@corbado/web-js";
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent {
user = Corbado.user
constructor(private router: Router) {
}
async handleLogout() {
await Corbado.logout()
await this.router.navigate(['/']);
}
}
In profile.component.html, conditionally render the user’s information based on their authentication state:
<div>
<ng-container *ngIf="user; else notLoggedIn">
<div>
<h1>Profile Page</h1>
<div>
<p>
User-ID: {{user.sub}}
<br />
Email: {{user.email}}
</p>
</div>
<button (click)="handleLogout()">Logout</button>
</div>
</ng-container>
<ng-template #notLoggedIn>
<div>
<p>You're not logged in.</p>
<p>Please go back to <a routerLink="/">home</a> to log in.</p>
</div>
</ng-template>
</div>
Running the Application
Once everything is set up, run the application:
ng serve
Visit http://localhost:4200 to view the login screen, and after successful authentication, you will be redirected to the profile page.
Conclusion
This tutorial demonstrated how to integrate passkey authentication into an Angular application using Corbado. With Corbado’s tools, implementing passwordless authentication is straightforward and secure. For more details on session management and other advanced features, refer to Corbado’s documentation or check the detailed blog post.
Top comments (0)