Angular

This document explains how to integrate the Reuthentication flow from your Angular application

This document explains how to integrate the Reauthentication from your web application through our Javascript component to authorize your users. This stage should be either at the login page of your application or wherever you want to verify, that this is still the person who originally verified his or her identity to you. This is useful for example if users start a job, approve high transactions or simply login to your app.

This guide assumes that you have previously integrated the authentication flow and users are tracked correctly as explained in the client integration section.

Render the Component in Your Login Page

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

<div #passbaseButton></div>

Render the component by specifying the integrationType as "login" in the additional options as explained below. All the customization options explained in the client section are supported as well.

Passbase.renderButton(this.passbaseButton.nativeElement, onFinished, apiKey,
{
integrationType: "login"
}
)

Authorize Your Users

Upon completion of the Reauthentication you will receive a webhook with the result of the login attempt.

{
"authentication_key": "61c9eceb-cf83-44cd-bd5e-d346e55cdc5d",
"review_status": true,
"integration_type": "login",
"additional_attributes": {
"user_id": "72834678243"
}
}

The additional_attributes field in the request will return the user ID you passed to the original Authentication.

Make sure you are only allowing webhooks from Passbase as they can be forged!

Wrap-Up & Example

A full example of how an integration of the reauthentication button could look like is below:

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",
{
integrationType: "login"
}
)
}
}

You have successfully completed the Passbase Angular Reauthentication Integration! 🎉