How to custom validate a new user email

Tips
14

To verify a code backend without having a user seeing the code:

This way of verifying will allow you to setup your own authentication system, and make it easier for users to verify their info later on if you ever need it, without needing to stay on the same page. You can disable a users access when their key is unvalidated, but they are logged in.

Create a table or “thing” called key.
Permission 1: Current user is This Key’s Creator
Permission 2: Everyone: NONE
Permission 1 setting: (Do a Search For)
resendTime, validated, created by
Permission 2 setting: EVERYONE, NOTHING

Fields:

  • OTP (text)
  • resendTime (date)
  • validated: yes/no (default = no)
  • The usual Bubble defaults

The workflow:
When a user “clicks sign up”:

  1. Sign the User Up
  2. (Create this workflow API) Create/Generate a key :
  • step 1) Generate confirm code (nano id random string)
  • step 2) ( IF Current users key count is 0): creates a new “key”
    -confirm code: result of step 1
    -resend time: current date/time +seconds (30)
  • step 3) ( IF Current users key count is 1): Modify current users “key” (same properties as above)
  • step 4) ( IF STEP 1 is not emtpy) Adds new key to current user

Now here you can either return the key and get the confirmation code live to your current user right away with this being an API you use via API connector, then set it as a state or something for a user to confirm that code. This way is not preferred, cause then they would need to validate on the same page, and if they refresh, need to validate again in order for the code to sync. Follow the steps below to get a better result and allow a user to come back and confirm later if needed.

Either way you got to verify the code is legit, right?

So the user is still logged in, but their key is not verified. They still need to confirm their code.

Create an API called “check_otp_validity” in backend workflows.
ADD PARAMETERS:
code (text)

  • step 1) return data (as parameter valid=yes/no: do a search for: keys (otp=code | createdby=current user)count:1 VALID = yes
  • step 2) return data (as parameter valid=yes/no: do a search for: keys (otp=code | createdby=current user)count:0 VALID = no

Now connect this via API connector (assuming you guys can figure that out) and make it an Action or Data, whichever your workflow prefers. When this result is valid, change their key to validated = yes

This will check for validity on the backend and will not allow a user to view anything other than resend time, validated, and their “key” but only that, nothing else.

Another thing to add, is now you can setup conditions for when Current user is logged in and Current user’s key is empty go to confirm page or something. I have also added resend time to the flow to account for when a user is allowed to send a code, to prevent spam of course. You may need to figure out a way to setup some conditionals to work with that property. A hint, update the page every second with the current users date/time to match their resend time.

Hope this helps some Bubblers.

4 Likes