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
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.)
Adding Phone sign-in
Adding Phone Sign-In comprises of following steps:
1.​Setting up phone sign-in​
2.​Enabling phone authentication in Firebase​
3.​Building a phone number page​
4.​Building a verify code page​
5.​Adding a phone sign-in action​
6.​Adding a verify code action​
7.​Create an action to logout​
8.​Testing phone sign in​
1. Setting up phone sign-in
Setting up phone sign-in requires you to get the SHA-1 key/fingerprint, add it to your Firebase project and then regenerate the Firebase config files in FlutterFlow. The detailed instructions are explained here.
Ensure to generate your SHA-1 key before you proceed further. This step is often missed.
2. Enabling phone authentication in Firebase
To enable authentication in the Firebase:
Open the Firebase console and click on Authentication (
 inside the Build section 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:
Select the Setting tab (besides the Sign-in method tab).
Select Authorized domains from the left side menu.
Click Add domain.
Enter app.flutterflow.io and click on add button.
Enabling phone authentication in Firebase
3. Building 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. We provide 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 Page Selector from the Navigation Menu (left side of your screen).
Click on the New Page icon (
). A popup will open.
Enter the page name and click the + Create New button under the Blank Page template.
Click on the Widget Tree from the Navigation Menu.
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 to Send Code.
Phone number page
4. Building a verify code page
You need to create another page to verify the SMS code.
Here's how you build the verify code page:
Click on the Page Selector from the Navigation Menu (left side of your screen).
Click on the New Page icon. A popup will open.
Enter the page name and click the + Create New button under the Blank Page template.
Click on the Widget Tree from the Navigation Menu.
Add the TextField widget inside the Column and change its Hint Text to the Enter Code.
Add the Button widget below the TextField and change its Text to Verify Code.
Verify code page
5. 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 the canvas area.
Select Actions from the Properties panel (the right menu), and click + Add Action.
Search and select the Phone Sign In action.
Now, you can provide a phone number. To do so, click on the UNSET. This will open a popup on the left side.
Select the Widget State and then select the name of the TextField that accepts the phone number. You can also provide a phone number from other variables such as the API response variable, Firestore document, or a variable that holds logged-in user's details.
Click on the Verify SMS Code Page dropdown and choose the page you have created to verify the code. If this action is successful, the selected page will be open.
Adding a phone sign-in action
6. 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 the canvas area.
Select Actions from the properties panel (the right menu), and click + Add Action.
Search and select the Verify SMS Code action.
To provide the SMS code, click on the UNSET. This will open a popup on the left side.
Select the Widget State and then select the name of the TextField that accepts the code.
Adding verify code action
7. 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 for adding a button with the Logout action.
8. Testing phone sign in
You can test the authentication on a real device and in Run Mode. To use Run Mode, make sure you have completed the Firebase setup.
1.​Test in Run mode​
2.​Test on a Real device​
1. Test in Run mode
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 the phone and click Verify Code.
Click on the Logout button.
Test in Run mode
2. Test on a real device
Phone Sign In does not work in an Android emulator. You can only test it on a real device.
To test on a real device:
Get the SHA-256 key/fingerprint, add it to your Firebase project and then regenerate the Firebase config files in FlutterFlow. Note: The instructions are similar to generating the SHA-1 key and are explained here. In the terminal, you will find the SHA-256 key just below the SHA-1 key. This is required for the Firebase to verify that the sign-in request is coming from a legitimate device. 
While releasing the app, make sure to get the key from the Play Console.
SHA-256 key
Open the Google Developers Console. (Make sure your project is selected in the dropdown at the top)
Click on the Library menu on the left and search for the Android Device Verification.
Select the Android Device Verification section and click Enable.
Enabling Android Device Verification
Now, download and test the app using the instructions here.
After you test the phone sign-in, you can verify the creation of a new user in Firebase using the instructions here.
Release mode
If you're releasing your app to the Play Store, you must add the SHA certificate fingerprints from the Play Console.
To get the keys for the release app, navigate to Play Store Console > Your project > Release Management –> App Signing and copy the SHA-1 and SHA-256 keys.
Release mode keys
iOS device setup
You don't need to take 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. To try phone sign-in without any limitations, 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 the Sign-in providers section).
Scroll down, find the Phone numbers 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
Facebook Sign-In
Anonymous Sign-In
Last modified 3mo ago