How to create a bubble app using the phone number as a signup method? (No Plugin)
As all of you who know Bubble.io, knows that By default, Bubble.io uses emails as the primary login method. Many individuals and businesses prefer phone numbers as a signup/login method over emails. I have seen many Bubble developers such as myself wondering how to work around it as email is essential for signing the user up.
Fortunately, it is possible to make phone numbers the main login method on your Bubble.io application but it may not be as straightforward as it is. Here are the steps in which we can make this happen.
Create an Input Phone field instead of an Input email field in the signup and login page/popup: At the time of creating the input field in signup/login, Bubble developer generally uses content format as email and password for email input field and password input field. This time while creating an Input phone field instead of an input email field, make sure the content format is 'Text (numbers only)'.
Use ':append' in signing the user up workflow: As per Bubble manual, ':append' Returns the concatenation of the text and the argument. So as a bubble developer, use 'Input Phone'value :append example.com' or 'Input Phone'value :append yourdomain.com'. This will make the user signup and login using the phone number.
Verify Phone number: Now in DB, there is phone@example.com or phone@yourdomain.com. To use Twilio for phone number verification, we need to store phone numbers in the database. For this use ':split by(@):first item' which basically makes a list of texts from a value of type text (in this case, an email address) using the “@” symbol as the delimiter and then returns the first item in that list, which would be everything before the “@” and save that value in Database. Vola! Now you have the phone number for verification.
In conclusion, using phone numbers as the primary login method on your Bubble.io application is possible and offers many benefits over emails. You can easily implement this by populating the email field with user phone numbers and appending your domain name. Moreover, you can still provide a password field for users during signup, and assign a temporary one if necessary. By using this method, you can simplify the login process for your users and make your application more user-friendly.
Feel free to buy me a coffee and support my hard work.