Google Sign-In allows users to authenticate using their Google Accounts.
Before getting started with this section, ensure you have:
Adding Google sign-in comprises of following steps:
To enable Google authentication in the Firebase:
- 2.Click on the Get started button (this may not be visible if you have already set up other forms of Authentication).
- 3.Select the Sign-in method tab.
- 4.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.
- 5.Find the Google switch and enable it.
- 6.Provide your project public-facing name and project support email.
- 7.Click on the Save button.
Here's how you can add the Google sign-in button from our page template:
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:
- 1.Select the widget (e.g., Button) on which you want to add the action.
- 3.Search and select the Log in (under Backend/Database > Firebase Authentication) action.
- 4.Set Auth Provider to Google.
- 5.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.
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:
- 1.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'.
- 2.For Run mode, you can simply use 'app.flutterflow.io'.
- 4.To add in Google cloud console:
- 2.Under the 'OAuth 2.0 Client IDs', select 'Web client (auto created by Google Service)'.
- 2.Similarly, under the 'Authorized redirect URIs', click ADD URI, add both the URL and append '/__/auth/handler' at the end.
- 5.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.
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.
Verify user creation
Last Updated Date: August 23, 2023