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, an especially useful use case 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 Arengu to the Firebase project
Open Arengu, click on your profile button — in the lower left corner — and then on the 'Vault' option, as you can see in the image below.
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 verification — and drag and drop the Passbase widget.
To configure the Passbase widget:
- Required: enable this option to make it mandatory.
- Auto forward: enable this option to automatically display the next step of the form, once the user has completed the verification, without clicking any button.
- Publishable & Secret key: copy and paste the Publishable and the Secret key of your Passbase account in the corresponding fields.
- Button text: it will display the provided text by default, but you can modify it.
- Email: reference the {{fields.email}} variable from the previous step of the form. You can get it from the autocomplete menu by clicking on the plus button.
- Country: in this case, we have not asked the user for the country, so Passbase will ask for it during verification. If you add that field in the previous step, you can reference the variable to skip that step in the widget. Just remember to use the 2 character ISO code (ES, US, GB, etc.).
Once this is ready, publish the changes.
4. Passbase mobile redirect
By default, your Passbase project will have the ‘Desktop to Passbase Redirect’ option enabled. This means the user will be redirected from desktop to mobile via SMS, email, or QR code, as you can see in the image below.
When using this option, the user will need a mobile phone with the camera enabled to continue with the verification process.
If you prefer the user to continue on desktop, you can disable this option in your Passbase project dashboard: Settings > Project > Customization.
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!
