Guides & tutorials

ID verification onboarding flow with Passbase & Firebase

Table of contents

Learn how to set up an onboarding flow with ID verification using Passbase and Firebase. It will cover the basics of an onboarding process that requires ID verification and it will be especially useful for you if you need:

  • A KYC process in your sign-up flow.
  • A passwordless flow with biometric authentication.
  • A 2FA flow or a risk-based authentication flow to enhance your platform security by asking for biometric authentication.

Previous requirements

  • A developer account in Passbase, to configure the ID verification process.
  • An identity provider (eg. Auth0, Firebase, etc) or a custom API. In this case, we have chosen Firebase.
  • An Arengu account to build the form and the server-side logic.

Overview

This use case consists of:

  • A two-step form. Form step one will ask for an email and password, while the second step will ask for the ID verification. 
  • A flow connected to the first step of the form that will check if the email is already registered.
  • Another flow, linked to the second step of the form to create the user account.
  • An ending screen to automatically log the user in.

1. Prepare the Firebase project

Open the Firebase console of your project and enable the "Email/Password" sign-in provider in Build > Authentication > Sign-in method.

If you don't have an app registered, click on the cogwheel icon on the side menu, next to ‘Project Overview’ and open the project settings. 

Go to the ‘General’ tab and register a new web app by clicking on the </> button. 

Give your app a name and, unless you are using it, don't enable the ‘Set up Firebase hosting for this app’ checkbox. We won't be using that.

Lastly, in the ‘Service accounts’ tab and under ‘Firebase Admin SDK’, click on the ‘Generate new private key’ button. A JSON file will be downloaded, keep it for later!

2. Connect your Arengu account to the Firebase project

Open Arengu, click on your profile button — in the lower left corner — and then on the Vault option. ​

Click on the ‘Add connection’ button and choose ‘Firebase’. Then, select the JSON file you downloaded from the Firebase console earlier. The 3 fields will be automatically filled

Click on ‘Continue’ and give the connection a meaningful name. Finally, save the connection by clicking on the ‘Add connection’ button. Now you can use it in all the Firebase actions of the workspace.

3. Create the form in Arengu

First, go to the form editor and create a signup form from scratch. In the first step, add an Email field and a Password field, and configure them as follows:

  • ID: change them to ‘email’ and ‘password’ to make them easier to reference.
  • Required: enable this checkbox to make both of them mandatory.
  • Length: Firebase requires the passwords to be at least 6 characters, so it's a good idea to enforce it here instead of failing later in a less user-friendly way.

Click on the eye icon, just above the form, to add a hidden field. It will help us to check if the Passbase verification has been successful. To configure it:

  • Hidden fields: in the left column, create a hidden field with the name ‘passbaseId’ and leave the right column blank. The editor will automatically fill it in if the Passbase verification is successful.

Add a second step to the form, delete the Next button to not allow the user to skip the Passbase verification — and include an HTML block to paste the Passbase snippet.

4. Get the Passbase snippet 

Go to your Passbase dashboard and click on the Integration menu. Copy the web snippet and paste it in the body of the HTML block.

Edit the code snippet as follows:

  • Replace the onFinish: (identityAccessKey) => {}, line for this one: onFinish: (identityAccessKey) => { $form.setHiddenField('passbaseId', identityAccessKey); $form.goForward(); };
  • Prefill the email in Passbase: prefillAttributes: { email: "{{fields.email}}", },
  • Add this CSS <style> #passbase-button { display: flex; place-content: center; } </style> to display the Passbase verification button centered on the form.

The resulting snippet in your HTML block should look like this:

<script
  type="text/javascript"
  src="https://unpkg.com/@passbase/button"
></script>
<!-- Place the code below where you want your button to appear -->
<div id="passbase-button"></div>
<script type="text/javascript">
  Passbase.renderButton(
    document.getElementById("passbase-button"),
    "WToEmf14deLJ5vKGvEVWhNjgTXRl8eySa77K8zOCltPnZ3o2mIoUoNamBiZB5xyd",
    {
      prefillAttributes: {
      	email: "{{fields.email}}",
      },
      onStart: () => {},
      onError: (errorCode) => {},
      onFinish: (identityAccessKey) => {
      	$form.setHiddenField('passbaseId', identityAccessKey);
        $form.goForward();
      },
    }
  );
</script>
<style>
  #passbase-button {
    display: flex;
    place-content: center;
  }
</style>

Then, go again to your Passbase account, go to Settings > Project > Customization and enable the Desktop to Mobile Redirect option to make the check run on the form itself.

5. Create a flow linked to each step

Go back to the Arengu form editor and click on the Flows tab, on the light grey menu, and create a flow connected to each step of the form. Just click on the corresponding plus buttons and give each one a name and publish the changes.

6. Build the look up flow

The flow linked to the first step of the form will check if the email is already registered and it must have this structure:

Firts, include a Firebase Look up action with the following settings:

  • ID: change it to ‘firebaseLookup’ to simplify it.
  • Connection: select the Firebase connection from the vault.
  • Field: select the Email type.
  • Value: reference the {{input.body.email}} variable from the form. You can get it from the autocomplete menu by clicking on the plus button.

Add an If/then condition action to check the result of the lookup: 

  • Condition: reference the {{firebaseLookup.user}} variable from the outputs of the previous action and select ‘has value’ as the condition. You can get the variable by clicking on the plus button after an execution of the flow.

In the True branch, include a Show error message action and personalize the message to display on the form.

In the False branch, include a Go to the next form step action — which doesn’t need to be configured — and publish the changes.

7. Build the signup and login flow

The flow connected to the second step of the form will register the user and issue a token that we will need to configure the login in the ending screen.

First, include an If/then condition action to check if the Passbase verification was successful with the following settings:

  • Condition: reference the {{input.body.passbaseId}} variable from the hidden field of the form and select ‘has value’ as the condition. Passbase will only generate an ID and prefill the hidden field if the verification is successful.

In the False branch, include a Show error message to display on the form and inform the user that the verification was unsuccessful.

In the True branch, add a Firebase Sign up action and configure it as follows:

  • ID: change it to ‘firebaseSignup’ to make it easier to reference.
  • Connection: select the same vault connection that you used in the previous flow.
  • Set email: enable this option and reference the {{input.body.email}} variable from the form.
  • Mark email as verified: enable the checkbox and reference the {{input.body.passbaseId}} variable from the hidden field of the form. Note that, to keep this tutorial short, we're skipping an important step, which is verifying that the email address actually exists. You can do that easily in Arengu too. Just head over to our guide about email OTP flows.

Then include a Firebase Issue a token action with these settings:

  • ID: change it to ‘issueAToken’ to simplify it.
  • Connection: select the same vault connection that you used in the previous flow and the signup action of this one.
  • Local ID: reference the {{firebaseSignup.body.localId}} variable from the outputs of the previous action after an execution of the flow.

Add a Store state variable to store the token and be able to reference it in the ending screen. Configure this action as follows:

  • Data fields: set the state variable ID in the left column (‘token’) and reference the {{issueAToken.token}} variable from the outputs of the previous action after an execution of the flow.

Finally, include a Submit the form action — which doesn’t need to be configured — and publish the changes.

8. Configure the ending screen

Go back to the form editor, click on the ending screen and click on the User session block to configure it with these settings:

  • User session: enable the option.
  • Provider: select Firebase.
  • Token: reference the {{state.token}} variable from the flow.

You can also configure the redirection URL, a thank you message to display in the form, and a JS callback. Check all the configuration options in the ending screens documentation.

Once everything is set up, publish the changes and click on the Preview button to test it.

9. Check the debugger mode

After testing the flow, go back to the flow editor and click on the Executions tab of each of them to check that everything is working properly.

10. Get the embed code

Click on the 'Embed' tab at the top of the form editor and choose the type of web app you're integrating Arengu with to get the embed code.

Haven't you tried Arengu yet? Sign up free or schedule a demo with our team!

You might like to read

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.