FlutterFlow Docs
Search…
Actions
Google Sign-In
Google Sign-In allows users to authenticate using their Google Accounts.
Google Sign-In can not be tested in Run Mode. Instead, you will need to test Google authentication on a real device/emulator.
Google 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.)
Make sure you have generated your SHA-1 key. This step is often missed.

Adding Google sign-in

Adding Google sign-in comprises of following steps:

1. Enabling Google sign-In in Firebase

To enable Google 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 Google (Under the Additional Providers section). If you have already added any other provider, click on the Add new provider and then click on Google.
  • Find the Google switch and enable it.
  • Input your Project public-facing name and project support email.
  • Click on the Save button.
Enabling Google sign-In in Firebase

2. Creating a Google sign-in button

To allow users to authenticate using their Google account, you need a login page with a button. FlutterFlow provides a collection of ready-to-use templates. Let’s use the login and signup template.
To create a new 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 and then click on the Auth tab.
  • Find the Login & Signup #3 template and click on the Use Template button.
  • Now, drag the IconButton widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree inside the Column (under the Sign In tab).
  • Keep the IconButton selected and move to Property editor. Click on the Add Box Outlined + button, then search and select the icon name with FontAwesome.google. Also, set the background color using the Fill Color property.
Creating a Google sign-in button

2.1 Adding a login action

To login a user on click of Login button:
  • Select the IconButton (with Google logo) 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 Login.
  • Click on the Auth Provider dropdown and set it to Google.
  • Now, checkmark the Create User Document checkbox.
  • From the Collection dropdown below, select the users collection.
Adding a login action

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

4. Preparing to test the app

Google Sign In functionality does not work in Run Mode and can only be tested on a real device or emulator. To deploy and test the Google authentication, you will need to download the code and run it in your IDE.
​Here are the instructions for setting up your machine to test the downloaded code on a real device.

5. Testing google sign-In

Google Sign-In can not be tested in Run Mode. Instead, you will need to test Google authentication on a real device/emulator.
  • Open and Run the app from your preferred IDE. If you are new to testing your code locally, you can learn more here.​
  • When you see the app running on your device, click on the Google Sign-in button.
  • Choose the Google account.
  • Click on the Logout button.
Testing google sign-In
​Here are the instructions to verify the creation of a new user in Firebase