Creating SMS OTP Based Login System

Hi All,

I am trying to build an SMS OTP based login system for my application.

From what I have read, I have two options, Firebase Auth and Auth0. Which one of the two is more suitable for Bubble? Are there any other better options?

Use-cases that I want to cover are these:

  • Users should be able to login via SMS OTP, or Email, or Google/FB

  • Need to handle scenarios of user first registering/signing-in with one method and then later on signing in with other method (merging two identities etc.)

Thanks,
Mukesh

4 Likes

Bumping it up to catch some wise folks’ eyes.

2 Likes

Any luck with it?

Nope. I had put it on hold too. Will restart the effort soon.

From my last time’s effort I realised that I can do it via Firebase, but was struggling with firebase integration.

More bumps!!! Hope someone enlightened sheds some light!

1 Like

Hey all,

I’m not sure if there’s exactly one better than another because I haven’t implemented SMS OTP before; however, I’ve heard good things about Auth0 and am sure you can probably implement it with the API connector.

Check out Firebase Phone Authentication

3 Likes

I found this helpful

check it out

Youtube Video

Don’t use that Youtube video, it logs in the user despite of not having entered the verification code yet.

Just go for another solution, f.i. magic link (together with 2FA).

1 Like

Could be great to have an action inside bubble for log in our users through phone verification!!
Hope they add this feature!!

1 Like

Me too.

You can use Twilio for SMS.

image
well I did this as a test on another no code platform and I try to replicate it here similar but I have not been able
What I do is that when the user registers, he only enters his telephone number and it is validated with twilio when approved, a concatenation of the telephone + @emailtemp.com and a password that I have of 256 characters is created, predetermining only with those data I create the user account and when the user wants to log in I do the validation again by twilio that it is approved and I concatenate the phone again to the temp email and use the default password again

only that when I want to do this on this platform I don’t know how to concatenate the phone + email and use it in the mail field of the workflow

bueno esto lo hice de prueba en otro no code plataforma y intento replicarlo aca similar pero no he podido
lo que hago es que cuando el usuario se registra solo ingresa su numero telefonico y se valida con twilio al ser aprovado se crea un concadenado del telefono + @emailtemp.com y una clave que tengo de 256 caracteres pre determiando unica con esos datos creo la cuenta de usuario y cuando quiere logear el usuario vuelvo hacer la validacion por twilio que sea aprovada y concadeno nuevamente el telefono al temp email y uso la contraseña predeterminada otra ves

solo que cuando quiero hacer esto en esta plataforma no se como concadenar el telefono + email y que se use en el campo de correo del workflow

israel.toscano.ortiz@gmail.com

1 Like

I know this is an old thread but I’m having the same problem to tackle.

Instead of using firebase etc, I just used an SMS service that provides an API to send sms to phone numbers. Now the steps below are when it becomes a little bit tricky:

The visitor inputs their phone number in order to signup and receive an OTP. At this stage, bubble only sends their OTP to their phone number, the visitor isn’t actually signed up.
The visitor then enters the OTP and clicks on another button that signs them up only if the OTP submitted matches the one sent for their phone number.

The problem is, where do I store the OTP on the app?

  1. The OTP is stored as a custom state. This is unsecure and only temporary as this is gone as soon as the user refreshes.
  2. The OTP is stored in a Data Type that is public (so that the app allows the visitor to write a thing with their Phone and OTP values. When the visitor enters the OTP to the text box and presses sign up, the app retreives the thing from the Data type that matches their phone number and if the OTP is the same, then proceeds to sign up that visitor as a user. Is this usecure? Could anyone possibly be able to access this Data type that is used as a temporary storage location?

What are your recommendations for tackling this?
Thanks,
Pepe

1 Like

I am not sure if this is something you solved or not but the way I’ve done it is that I am actually logging in the user and conditionally not showing the next screen until the code is entered.

Steps:
Show login screen
Enter login information (email&pass in my case - phone number in your case)
Log user in but keep him on the same screen and provide an sms-code input
Generate code via API and push it back in the database or Generate code within app and push to phone via api
Save code in user table
Give it an expiration date (e.g: current + 5 minutes)

User receives code and enters it within 5 minutes
Show next screen.

If user doesn’t enter code in 5 minutes, generate another code

Once code is matching and entered in the given time, show him next page

I hope this is clear. I am sure there is a clip on this subject. Let me know if you need it and I can dig it out

1 Like

Is twillo the same as https://quackr.io where you can only receive messages?