How to create a phone number login efficiently

Hello,

I’m looking to rebuild my app on Bubble using Wappler. I started my Wappler journey last week and have taken the intro course offered upon signup.

Based on my customer audience and use cases, I use a phone number as the primary login method versus email. On Bubble, there was a plugin that allowed me to provide an input field that validated customer numbers and make it easy for customer to enter their phone number which they receive an OTP on.

The plugin looked exactly like the snapshot below and worked exactly like what’s shown in this link (I think the plugin developers used this code):

How to build international phone number input in HTML and JavaScript (twilio.com)

image

image

My challenge is that the GitHub page provides HTML and Javascript code which I will have to keep on the same page with the other Wappler-generated HTML and Javascript code. This makes code management and integration with Wappler painful.

As you can see in the code generated in Wappler (ignore the other text instructions on the page. I’ll delete them when I’m implementing), there is nothing in the “App Structure” panel on the right that recognizes the phone number input.

  1. Is there a more efficient way of achieving my desired result without having to dump all the HTML code onto the same page as my Wappler-generated code?

  2. While Wappler renders the phone input and functionality when I deploy the code (with some modifications), I don’t know how to reference the phone number / country selected from this phone login input since that variable sits in the HTML code. How can I get a Session / Storage variable I create to recognize the customer’s input so I can use that input in the app (e.g. pass it on to APIs, save it in my database as custoemr info, etc.)?

Thank you.

Community Page
Last updated: