FlutterFlow Docs
Search…
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.

Prerequisites

Before getting started with this section, ensure you have:

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 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.
    Now, 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.

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 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.

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 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.

Set The Initial Entry Pages

You can set initial entry pages based on whether or not a user is logged in:
    Entry Page will be loaded if the user is not logged in to your app, this is usually used to display the onboarding flow of the app or to provide the login/sign-up page.
    Logged In Page will be loaded if the user is already logged in to your app. Users are automatically navigated to the page you specify here on a successful sign-in attempt.
​Here are the instructions on how to set the initial pages.

Create An Action To Logout

To log out a user, you can place a button inside your home page and add the Logout action.
​Here are the instructions on how to add a button with the Logout action.

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.
​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.

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

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 in 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.
Last modified 9d ago