Phone Sign-In

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.)
Complete Phone Sign-In setup.
Adding Phone sign-in
Adding Phone Sign-In comprises of following steps:
1.​Enabling phone authentication in Firebase​
2.​Creating a phone number page​
3.​Creating a verify code page​
4.​Adding a phone sign in action​
5.​Adding a verify code action​
6.​Create an action to logout​
7.​Testing phone sign in​
1. Enabling phone authentication in Firebase
To enable authentication in the Firebase:
Open the Firebase console and click on Authentication (
 in the left side menu)
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.
​Here are the instructions on how to add a button with the Logout action.
7. Testing phone sign in
You can test the authentication on a device/emulator as well as in Run Mode. To use Run Mode, make sure you have completed the Firebase setup.
To test authentication in Run Mode:
Click on the Run button (top right corner of your screen)
Enter the phone number (international format) on which you would like to receive the OTP code and click Send Code.
Enter the OTP code received on phone and click Verify Code.
Click on the Logout button.
Testing phone sign in
​Here are the instructions to verify the creation of a new user in Firebase
Testing Phone authentication on a real device:
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. 
To enable the API:
Open this URL.
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.
To add the fictitious number:
Open the Firebase console and click on Authentication.
Select the Sign-in method tab.
Click on the Phone. (Under Sign-in providers section)
Scroll down and find the Phone number for testing menu and click on it.
Enter any dummy phone number. (Make sure it should look unreal)
Enter the verification code that you would use on the verify code page.
Click on add.
Testing with dummy numbers