Angular

In this document we'll go through a sample workflow for rendering our component in a Angular application

Initial setup

Before delving into the implementation details, you'll need to obtain an API key to authenticate against our servers:

  1. Sign up to our developer dashboard

  2. Navigate to the API Access section of the dashboard

  3. Copy one of the publishable API keys and use it to render our component as shown below

For a framework independent solution, please check out the HTML + JS section of our documentation.

Install the NPM package

Start by installing our component and its dependencies in your Angular project:

npm
yarn
npm
$ npm i --save @passbase/button react-dom styled-components
yarn
$ yarn add @passbase/button react-dom styled-components

Import the SDK

src/app/app.component.ts
import Passbase from "@passbase/button";

The package supports UMD modules. The ES import method is presented above.

Add a new HTML node

Place the new HTML element where you want the component to render inside your application:

src/app/app.component.html
<div #passbaseButton></div>

Render the component

In order for the button to render correctly, you'll need to pass your previously generated apiKey and a onFinished callback as arguments to the rendering function:

apiKey

The Passbase API Key you obtained from the dashboard

onFinished

error: A string with the reason why the user didn't complete the authentication flow

authKey:The UUID of the completed authentication

additionalAttributes: The Javascript object originally passed to the component

src/app/app.component.ts
import Passbase from '@passbase/button';
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
export class AppComponent implements AfterViewInit {
@ViewChild("passbaseButton") passbaseButton: ElementRef;
ngAfterViewInit() {
Passbase.renderButton(
this.passbaseButton.nativeElement,
(err, passport) => {},
"YOUR_API_KEY"
)
}
}

Make sure you're using a publishable API key for this client side integration

The button should now render as shown here:

Reference your users with additionalAttributes

It is generally recommended to associate your application's user accounts with their respective identity verifications. To achieve this you can:

  1. Keep track of the authKey returned by the onFinished callback and associate it in your backend with your users' session id

  2. Pass an additionalAttributes object to the component from your application

You are free to choose whichever method suits your codebase best, although we suggest implementing the latter as described here.

Passbase.renderButton(
this.passbaseButton.nativeElement,
(err, passport) => {},
"YOUR_API_KEY",
{
additionalAttributes: {
customer_user_id: "SOME_USER_ID"
}
}
)

Upon completion of the authentication, it will be retrievable through our API and the dashboard:

Speed up the verification flow

During the verification flow, your users will be asked to provide some information which you might already possess in your application. In this case, you should provide a prefillAttributes object containing the following information:

Value

prefillAttributes

email: Your users' Passbase email. Will enable skipping the email step

country: You users' nationality. Will help pre-selecting language and ID origin

Passbase.renderButton(
this.passbaseButton.nativeElement,
(err, passport) => {},
"YOUR_API_KEY",
{
prefillAttributes: {
email: "user@email.de",
country: "de"
}
}
)

Customize the aspect of the iframe

Our component currently supports a set of customization options which will influence the aspect of the modal, once opened. The feature set is bound to grow in the future, subscribe to our newsletter to receive immediate updates upon release.

theme

accentColor: The main color of the main UI components in the flow (button, progress bar)

font: The CSS font-family to customize all text fields present in the UI

fontURL: A URL where to fetch the specified font (if necessary)

Passbase.renderButton(
this.passbaseButton.nativeElement,
(err, passport) => {},
"YOUR_API_KEY",
{
theme: {
accentColor: "#ff0000",
font: "Fira"
}
}
)

The configuration exemplified above will have the following result:

The modal also supports a darkMode attribute, which supersedes the effects of any other theme attribute

theme

darkMode: A boolean value indicating whether or not to enable the dark theme

Passbase.renderButton(
this.passbaseButton.nativeElement,
(err, passport) => {},
"YOUR_API_KEY",
{
theme: {
darkMode: true
}
}
)

Wrap-up

If you've followed this integration guide closely and you've chosen to fully customize your Passbase button, your code should resemble this code snippet:

import Passbase from '@passbase/button';
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
export class AppComponent implements AfterViewInit {
@ViewChild("passbaseButton") passbaseButton: ElementRef;
ngAfterViewInit() {
Passbase.renderButton(
this.passbaseButton.nativeElement,
(err, passport) => {},
"YOUR_API_KEY",
{
additionalAttributes: {
customer_user_id: "SOME_USER_ID"
},
prefillAttributes:{
email: "user@email.de",
country: "de"
},
theme: {
accentColor: "#ff0000",
font: "Fira"
}
}
)
}
}

You can find this code inside a fully working Angular application in our Github repositories.

You have successfully completed the Passbase Angular Integration! 🎉