Angular

In this guide you will learn how to add authentication to your Angular application using the Hanko custom element.

Install dependencies

Install the @teamhanko/hanko-elements package:

npm

npm install @teamhanko/hanko-elements

Yarn

yarn add @teamhanko/hanko-elements

Register custom element with Angular

Angular requires you to explicitly declare that you are using custom elements inside your Angular modules, otherwise it will fail during build complaining about unknown elements. To do so, import the CUSTOM_ELEMENTS_SCHEMA, and add it to the schemas in your module:

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule  ],  providers: [],  bootstrap: [AppComponent],  schemas: [CUSTOM_ELEMENTS_SCHEMA]})export class AppModule { }

Import & use custom element

Import @teamhanko/hanko-elements/hanko-auth in the component where you want to use the Hanko custom element. Doing so registers the <hanko-auth> element with the browser's CustomElementRegistry. Then use the element in your component template:

login.component.html

login.component.html

<hanko-auth [api]="hankoApi" [lang]="hankoLang"></hanko-auth>

login.component.ts

login.component.ts

import { Component } from '@angular/core';import { environment } from '../../../environments/environment';import '@teamhanko/hanko-elements/hanko-auth';@Component({  selector: 'app-login',  templateUrl: './login.component.html',  styleUrls: ['./login.component.css']})export class LoginComponent {  hankoApi = environment.hankoApi;  hankoLang = environment.hankoLang;}

Defining login callbacks

The <hanko-auth> element dispatches a custom success event on successful login. React to this event in order to, for example, redirect your users to protected pages in your application.

To do so, you can use Angular's event binding mechanism and supply a callback function that is defined in your component class directly on the <hanko-auth> element:

login.component.html

login.component.html

<hanko-auth  (success)="redirectToProfile()"  [api]="hankoApi"  [lang]="hankoLang"></hanko-auth>

login.component.ts

login.component.ts

import { Component } from '@angular/core';import { environment } from '../../../environments/environment';import { Router } from '@angular/router';import '@teamhanko/hanko-elements/hanko-auth';@Component({  selector: 'app-login',  templateUrl: './login.component.html',  styleUrls: ['./login.component.css'],})export class LoginComponent {  hankoApi = environment.hankoApi;  hankoLang = environment.hankoLang;  constructor(private router: Router) {}  redirectToProfile() {    this.router.navigate(['/profile']);  }}

UI customization

The styles of the hanko-auth element can be customized using CSS variables and parts. See our guide on customization here.

Backend request authentication

If you want to authenticate requests in your own backend, please view our backend guide.