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