Angular
In this guide you will learn how to use the hanko-elements web components to add authentication and a user profile to your Angular application.
Install dependencies
Install the @teamhanko/hanko-elements
package:
- npm
- Yarn
npm install @teamhanko/hanko-elements
yarn add @teamhanko/hanko-elements
Define custom elements schema
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:
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 { }
Add <hanko-auth>
component
To provide a login interface in your app, use the <hanko-auth>
web component. To do so, first import the register
function
from @teamhanko/hanko-elements
in your Angular component. Then call register
to register the <hanko-auth>
element with
the browser's CustomElementRegistry
and use
the element in your component template.
When adding the <hanko-auth>
element to your template you must provide the URL of the Hanko API via the api
attribute. If you are using Hanko Cloud, you can find the API URL on your project dashboard.
If you are self-hosting you need to provide the URL of your running Hanko backend.
- login.component.html
- login.component.ts
<hanko-auth [api]="hankoApi" />
import { Component } from '@angular/core';
import { register } from '@teamhanko/hanko-elements';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
hankoApi = "<YOUR_API_URL>";
constructor() {
// register the component
// see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
register({ shadow: true })
.catch((error) => {
// handle error
});
}
}
Define login callbacks
The <hanko-auth>
element dispatches a custom hankoAuthSuccess
event on successful login. React to this
event to redirect your users to protected pages in your application, e.g. a user profile page.
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.ts
<hanko-auth
(hankoAuthSuccess)="redirectAfterLogin()"
[api]="hankoApi" />
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { register } from '@teamhanko/hanko-elements';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
})
export class LoginComponent {
hankoApi = "<YOUR_API_URL>";
constructor(private router: Router) {
// register the component
// see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
register({ shadow: true })
.catch((error) => {
// handle error
})
}
redirectAfterLogin() {
// successfully logged in, redirect to a page in your application
this.router.navigate('...');
}
}
Add <hanko-profile>
component
To provide a page where users can manage their email addresses, password and passkeys, use the <hanko-profile>
web
component. Just as with the <hanko-auth>
component, import the register
function from @teamhanko/hanko-elements
in
your Angular component. Then call register
to register the <hanko-profile>
element with the browser's
CustomElementRegistry
and use
the element in your component template.
When adding the <hanko-profile>
element to your template you must provide the URL of the Hanko API via the api
attribute. If you are using Hanko Cloud, you can find the API URL on your project dashboard.
If you are self-hosting you need to provide the URL of your running Hanko backend.
- profile.component.html
- profile.component.ts
<hanko-profile [api]="hankoApi" />
import { Component } from '@angular/core';
import { register } from '@teamhanko/hanko-elements';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent {
hankoApi = "<YOUR_API_URL>";
constructor() {
// register the component
// see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
register({ shadow: true })
.catch((error) => {
// handle error
});
}
}
Customize component styles
The styles of the hanko-auth
and hanko-profile
elements can be customized using CSS variables and parts. See our
guide on customization here.
Authenticate backend requests
If you want to authenticate requests in your own backend, please view our backend guide.