This document explains how to integrate the Authentication directly from your Angular application through our Javascript component to verify your users. This stage might be at the signup page of your application, or at a later point to enrich the profiles of your users. The guide assumes the preliminary steps have already been completed as explained in the initial setup section of the documentation.

We suggest you follow our best practice how to integrate Passbase in your wider system in the overview section.

Install the NPM package

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

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

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

Render the component

Import the Angular component from the newly installed NPM package. The package supports UMD modules, the ES import method is presented below.

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

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

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

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:

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"
    )
  }
}

The button should now render as shown here:

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:

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.

Passbase.renderButton(
  this.passbaseButton.nativeElement, 
  (err, passport) => {},
  "YOUR_API_KEY",
  {
    theme: {
        accentColor: "#ff0000",
        font: "Fira",
        fontURL: "https://fonts.googleapis.com/css?family=Exo:400,500,600,700,750,800",
        buttonColorPreset: "dark-blue"
    }
  }
)

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

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

Reference Your Users

In order for your application to interoperate with Passbase, you need to add a reference to your users once the Authentication is completed. Two options are available:

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

2. Pass an additionalAttributes object to the component from your application to retrieve through our API once the Authentication is completed

You are free to choose whichever method suits your application best. Both are described below.

onFinished method

const userId = "SOME_USER_ID"
​
const onFinished = (error, authKey, additionalAttributes) => {
  if(error){
    console.error(error)
  }else{
    fetch(
      '/new_authentication', // You have to provide a similar endpoint in your app
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          'authentication_key': authKey,
          'user_id': userId
        })
      }
    )
  }
}
​
Passbase.renderButton(element, onFinished, apiKey)

additionalAttributes method

Passbase.renderButton(element, onFinished, apiKey, 
  {
    additionalAttributes: {
      customer_user_id: "SOME_USER_ID"
    }
  }
)

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

Wrap-up & Example

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: "",
          country: "de"
        },
        theme: {
          accentColor: "#ff0000",
          font: "Fira"
        }
      }
    )
  }
}

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