Phone Sign-In allows a user to sign in by sending an SMS message to the user's phone. The user signs in using a one-time code contained in the SMS message.
Phone sign in demo
Prerequisites
Before getting started with this section, ensure you have:
Completed all steps in the Firebase Setup section for your project.
Completed Initial setup required for authentication. (Please note: Skip if you have already enabled authentication and created user collection while creating your project with Firebase Setup.)
Click on the Get started button (this may not be visible if you have already set up other forms of Authentication).
Select the Sign-in method tab.
Click on Phone (Under the Native Providers section). If you have already added any other provider, click on the Add new provider and then click on Phone.
Find the Phone switch and enable it.
Click on the Save button.
If you'd like to use Phone Sign-In in "Run Mode" (via app.flutterflow.io/run/... links), also complete the following steps:
Scroll down and click on the Add domain button under the Authorized domains section. (For security purposes, the domain needs to be authorized)
Enter app.flutterflow.io and click on add button.
Enabling phone authentication in Firebase
2. Creating a phone number page
To allow users to authenticate using their Phone number, you need to create a page to accept the user's phone number. FlutterFlow provides a collection of ready-to-use templates. You can use one of our templates or create a page from scratch.
To create a new page from scratch:
Click on the Select Page or Component from the Navigation Menu (left side of your screen).
Click on + Create New, Give it a name.
Click on the + Create New button under the Blank Page template.
Click on the Widget Tree from the Navigation Menu.
Add the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
Add the TextField widget inside the Column and change its Hint Text to the Phone number.
Add the Button widget below the TextField and change its Text (Under Button Text section) to Send Code.
Creating a phone number page
3. Creating a verify code page
You need to create another page to verify the SMS code.
Here's how you create the verify code page:
Click on the Select Page or Component from the Navigation Menu (left side of your screen).
Click on + Create New, Give it a name.
Click on the + Create New button under the Blank Page template.
Click on the Widget Tree from the Navigation Menu.
Add the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
Add the TextField widget inside the Column and change its Hint Text to the Enter code here.
Add the Button widget below the TextField and change its Text (Under Button Text section) to Verify Code.
Creating a verify code page
4. Adding a phone sign in action
To add the Phone Sign-In action on a button:
Select the Button (with Send Code text)from the widget tree or from the canvas area.
Click on the Actions tab (on the right side of your screen).
Click on + Add Action and select the On Tap option.
Find the Action Type dropdown and change it to Authentication.
Find another Action Type dropdown below, and change it to the Phone Sign In.
Click on the Phone Number Field dropdown and set it to Text Field 1.
Now, click on the Verify SMS Code Page dropdown and choose the page that you have created to verify the code. (The selected page will get open if sending the SMS code action is successful)
Adding a phone sign in action
5. Adding a verify code action
To add the verify code action on a button:
Select the Button (with Verify Code text)from the widget tree or from the canvas area.
Click on the Actions tab (on the right side of your screen).
Click on + Add Action and select the On Tap option.
Find the Action Type dropdown and change it to Authentication.
Find another Action Type dropdown below, and change it to the Verify SMS Code.
Click on the Verify SMS Code Field dropdown and set it to Text Field 1.
Adding a verify code action
6. Create an action to logout
To log out a user, you can place a button on your home page and add the Logout action.
Phone Sign-In can not be tested in Run Mode. Instead, you will need to test Phone Authentication on a real device. There are a few steps necessary to get a Phone Sign In working on a real device.
Android device setup
Phone Sign In does not work in an Android emulator. You can only test it on a real device. You need to ensure that the "Android Device Verification" API is enabled for your project.
Make sure your project is selected in the project dropdown at the top.
Click on Enable.
Android device setup
Preparing to test the app
Here are the instructions for setting up your machine to test the downloaded code on a real device.
Release Mode
If you're releasing your app to the Play Store, you need to add the SHA certificate fingerprints from the Play Console.
Play Store Console > Your project > Release Management –> App Signing
Release mode
iOS device setup
You don't need to take any additional steps to enable Phone Sign-In on iOS devices.
Testing with dummy numbers
If you haven't enabled billing in your firebase project, you must have some limit on testing the phone authentication with real numbers. In order to test phone sign-in without any limits, you can add some fictitious numbers to the Firebase console.