Google Sign-In
Google Sign-In allows users to authenticate using their Google Accounts.
Prerequisites
Before getting started with this section, ensure you have:
Completed all steps in the Firebase Setup.
Completed Initial setup required for authentication. (Please note: Skip if you have already enabled authentication and created 'users' collection while creating your project with Firebase Setup.)
Adding Google sign-in
Adding Google sign-in comprises of following steps:
1. Setup Google sign-in
To use Google sign-in, you must get the SHA-1 key and regenerate the configuration files. You can find the detailed instructions here. Note that this step is often missed, so ensure you must complete this step before you proceed further.
2. Enabling Google sign-In in Firebase
To enable Google authentication in the Firebase:
Open the Firebase console and click on Authentication.
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 Add new provider and then click on Google.
Find the Google switch and enable it.
Provide your project public-facing name and project support email.
Click on the Save button.
3. Add a Google sign-in button
To allow users to authenticate, you need a login page with a button. You can create your own or use the one from the widget template or page template.
Here's how you can add the Google sign-in button from our page template:
4. Add login action
When you click the Google sign-in button, it will trigger the 'Log In' action, prompting a Google sign-in popup for users to input their credentials.
To add login action:
Select the widget (e.g., Button) on which you want to add the action.
Select Actions from the properties panel (the right menu) and select Add Action.
Search and select the Log in (under Backend/Database > Firebase Authentication) action.
Set Auth Provider to Google.
Tick the Create User Document and set the Collection to users. After successful login, this will insert the user's account details, such as email, name, and photo, into the 'users' collection. If a user already exists, it won't add details again.
5. Adding logout action
To let users log out of your app, you can use this action.
6. Preparing to test the app
To test Google sign-in in Test or Run mode, you must add the authorized domain in the Firebase console and Google cloud console.
Here's how you add the authorized domain:
For Test mode, you can open the browser console, try logging in, and get the domain from the browser console. It should look like 'ff-debug-service-frontend-ygxkweukma-uc.a.run.app'.
For Run mode, you can simply use 'app.flutterflow.io'.
To add in Firebase console:
Open the Firebase console and click on Authentication.
Select the Setting tab.
Select Authorized domains from the left side menu.
Click Add domain.
To add in Google cloud console:
Head over to your project credentails page.
Under the 'OAuth 2.0 Client IDs', select 'Web client (auto created by Google Service)'.
Under the 'Authorized JavaScript origins', click ADD URI and add both the URL.
Similarly, under the 'Authorized redirect URIs', click ADD URI, add both the URL and append '/__/auth/handler' at the end.
If you don't see the Web client created yet, you can create new one by clicking + CREATE CREDENTIALS, selecting OAuth client ID and then select Application type to Web application.
7. Verify user creation
To confirm the successful integration of Google authentication and the creation of users, navigate to your Firebase project > Authentication > Users and check the user entries.
Last Updated Date: August 23, 2023
Last updated
