Integrate Hanko with Angular

​

Install @teamhanko/hanko-elements

Once you’ve initialized your Next app, installing hanko-elements provides you with access to the prebuilt components: hanko-auth, hanko-profile and hanko-events.

npm install @teamhanko/hanko-elements

​

Add the Hanko API URL

Retrieve the API URL from the Hanko console and place it in your environment.ts file.

export const environment = {
  production: false,
  HANKO_API_URL: 'https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io'
};

​

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

The <hanko-auth> web component adds a login interface to your app. Begin by importing the register function from @teamhanko/hanko-elements into your Angular component. Call it with the Hanko API URL as an argument to register <hanko-auth> with the browser’s CustomElementRegistry. Once done, include it in your component template.

• login.component.html
• login.component.ts

<hanko-auth />

​

Add <hanko-events> component

The <hanko-events> component provides a convenient way to subscribe to specific events without displaying any UI elements. The other hanko-elements will also dispatch these events.

To utilize this functionality in your Angular application, you can leverage Angular’s event binding mechanism and define callback functions within your component. This allows you to respond to the dispatched events accordingly.

• login.component.html
• login.component.ts

<hanko-auth /> <hanko-events (onAuthFlowCompleted)="redirectAfterLogin()" />

<hanko-auth (onAuthFlowCompleted)="redirectAfterLogin()" />

By now, your sign-up and sign-in features should be working. You should see an interface similar to this 👇

​

Add <hanko-profile> component

The <hanko-profile> component provides an interface, where users can manage their email addresses and passkeys.

• profile.component.html
• profile.component.ts

<hanko-profile />

It should look like this 👇

​

Implement logout functionality

You can use the Hanko client provided by @teamhanko/hanko-elements to log out users. On logout a custom event is dispatched that you can subscribe to.

• profile.component.html
• profile.component.ts

<button (click)="logout()" class="button">Logout</button>
<hanko-profile (onUserLoggedOut)="redirectAfterLogout()" />

​

Customize component styles

You can customize the appearance of hanko-auth and hanko-profile components using CSS variables and parts. Refer to our customization guide.

​

Authenticate backend requests

To authenticate requests on your backend with Hanko, refer to our backend guide.