Introduction
Web authentication. To use this plugin for Bubble account Log in flow, you must store your user's passwords in the database. We have included two actions for encrypting & decrypting passwords using salt with the crypto.js library, server-side from the module. Unfortunately, Bubble does not allow us to Log in an account for someone else by calling the user's password. The 'generate a temporary password' action will replace the user's old password, so this is the only method to work. This plugin does not inspect Biometric data! It works via promises using Web Authentication browser API.
If you want to integrate this feature to your existing users, you can ask them to reset their passwords. The plugin is intended for Safari (iOS 13.3+ / Desktop Safari 13+) browser's on any Apple device with a Face ID scanner or Touch ID sensor.
It should work on other platforms such as Android & Windows too but we have not tested it.
How to use this plugin
In your database on the User type, create a field called 'Auth Credential ID', next create a field called 'Encrypted'. On your Sign up or reset password flow add an action called 'Encrypt' insert the password input's value here.
Make sure you place this action before the 'Sign a user up'. On sign up the action Add another field & select 'Encrypted Password' and the result value from prior action.
Add the 'Authenticator' element on any page you wish to authenticate from. This element will include a state called 'Is Available' that results to a yes/no value. Use this state to determine if the user's environment is compatible, this will be helpful for designing UI. A cookie will be saved locally on the user's device after successful registration, this again is a yes/no value & can be accessed from the element's state 'Has Cookie'.
To register the current user's device with this feature, create a workflow and add the action 'Register Credentials Authenticator'. This will prompt the user with an alert, for example: 'Do you want to allow "appkit.bubbleapps.io" to use Face ID? Make sure all fields are entered, click 'Show documentation' for help if needed.
Since this Web API requires the navigator component it cannot be handled server-side, meaning.. returning the Credential ID needs an event workflow and a state to process the output of user confirming prompt. There is an event to determine if the user cancels the registration prompt or it times out.
Create a workflow with the event 'Authenticator Credentials Registered' you can find this on the elements tab. Set up an action to make changes to the current user, with ' Credential ID' as the thing to change. Set the value as 'This Authenticator's Credential ID' from the element's state.
You have now onboarded the user with this feature, next let's go through the Log in flow. Create a new workflow, add an action 'Get Credentials Authenticator', set however long you want the time out to be. A prompt will display "Do you want to sign in with "... using a saved account?" and list for all the account credentials you have saved previously.
Create a workflow with the event 'Authenticator A Credentials Obtained' you can find this on the elements tab. Then create 'Decrypt Password' action, set the 'Encrypted Password' value as dynamic- search for users: first item's Encrypted Password. Click into the search operation then add a new constraint, Credential ID = Authenticator's Credential ID.
Lastly copy the same search for user expression to your clipboard, then create a new action 'Log the user in'. Paste the copied expression for email value and change the sentence from encrypted pass to Email, for the password value refer to the prior action 'Result of step 2's.