In this tutorial, we will walk you through the process of setting up Google authentication in your FlutterFlow app using Supabase as the backend.
Get ready to enhance your app's security and user experience effortlessly. Let's get started!
WATCH OUR YOUTUBE TUTORIAL
Before starting, ensure you've set up your Supabase project and completed the necessary authentication setup. If you need assistance, check out the links in the description for more step-by-step tutorials.
STEP 1: Configure Google Cloud Project
Configure the OAuth Consent Screen
1. Set up a Google Cloud Platform account.
2. Click on “all projects” and then “new project. ”
3. Name the project and continue.
4. Set up the OAuth consent screen (page displayed after you click the "Sign with Google" button).
5. Navigate to "APIs & Services" and select the OAuth consent screen tab.
6. You have to choose an external option.
7. Input app details, user support email, and developer contact email.
8. Under the "test users" section add at least one test user's email for immediate testing.
9. Configure other optional fields.
Create Credentials for Web, Android and iOS:
Create credentials to enable your app to access Google data seamlessly.
Web Application Credentials
→ Navigate to the "APIs & Services" page and select the Credentials tab.
→ Click on "Create credentials" and choose OAuth client ID.
→ Set the application type to "Web Application."
→ Retrieve the URI by opening your Supabase project. Visit the Authentication tab, select Providers, and locate Google. Open the section, copy the Callback URL, and paste it during the credential creation. Click "Create" to proceed.
Android Credentials
→ Once again, click on "Create credentials," select OAuth client ID, and set the Application type to "Android."
→ Input the package name and SHA-1 Key. Find the package name in your FlutterFlow project settings under "App Details" and copy it into Google Cloud.
→ Generate the SHA-1 key by entering the provided command in your terminal. Note that you'll need to replace this key with the one from the Google Play Console once your app goes live. Upon entering the command you will be prompted to input the password - just type “android” (in all lowercase).
→ Copy and paste the generated SHA-1 key back into Google Cloud.
iOS Credentials
→ Repeat similar steps for iOS by creating new credentials, selecting iOS as the Application type, and pasting the Bundle ID.
→ After your app goes live, specify the App Store and Team ID as required.
→ Click "Create" to complete this step.
You're now ready to move on to the next step!
STEP 2: Configure Authentication in Supabase
In this step, we'll guide you through the process of enabling Google login and provide client IDs in Supabase. Follow these simple steps to integrate it smoothly into your app:
1. Enable Google Login
→ Go to the "Authentication" section in Supabase and select "Providers."
→ Find "Google" and turn it on to activate Google login.
2. Enter the Client ID and Client's secret
→ Paste the Client ID and Client secret from your Google Cloud Web credentials into the designated fields.
3. Configure Android Credentials
→ Open Android credentials and insert the Client ID into the Authorized Client ID field in Supabase.
→ Turn on "Skip nonce checks" for iOS compatibility.
4. Set Redirect URL
→ Define the redirect URL, where users go after successful authentication.
→ In Supabase, go to the Authentication tab, choose "URL Configuration," and follow these steps:
a) Copy your Site URL from FlutterFlow's Web Publishing tab.
b) Paste the Site URL in Supabase under "Site URL" and save.
c) Go back to FlutterFlow settings and select App Details.
d) Copy the URL Scheme from FlutterFlow's App Details under "Routing and Deep linking."
e) Paste the URL Scheme in Supabase under "Redirect URLs.
By completing these steps, you ensure a seamless user experience, allowing native users to effortlessly navigate back to your app!
STEP 3: Enable Google Authentication in FlutterFlow
Open FlutterFlow settings, click on the Supabase integration option and enable the Supabase Authentication section. Now you need to paste the Web and iOS client IDs. Go back to the Google Cloud, copy the Web Client ID, paste it, and do the same for the iOS.
STEP 4: Add a Google sign-in button
Your signup page should include a Google sign-in button for a straightforward sign-in process.
Whether you design your own button or use a template, remember to follow Google's UI guidelines for a seamless user experience.
STEP 5: Add create account action
It's time to incorporate an account creation flow. This process involves two actions:
Log In Action: Begin by adding a "Log in" action and set the authentication provider to Google and add another action and search for “insert row”. This action establishes an account in Supabase but does not create an entry in the "users" table within the "public" schema.
Row in Supabase Action: This action will add selected data to this table. Configure this action by:
→ Selecting the right table and clicking "add field.
→ Setting the "ID" Value: Click on the "Authentication User" source and choose "userID" to set the value for the "ID" field
→ Adding the Email Field: Click "add field" again, and locate the email field. Set the value for the "email" field by clicking on the "Authentication User" source and selecting "Email."
→ Add or Remove unnecessary fields: Simply remove any unnecessary fields (or add them) to create a new input in your user's table.
This flow now successfully creates a new user and inserts them into the designated "users" table within Supabase!
(It's important to note that, at this stage, we haven't specified the logic for login and signup, so some refinement would be required for seamless functionality in a real environment).
STEP 6: Logout
If your app also includes a logout button, you should add a simple "log-out" action before testing the entire authentication flow. Head back to the actions tab and click "open." Then within the action menu, click "Add action" and search for "Log out."
You're ready to test the authentication flow!
STEP 7: Test
Testing the Supabase Google login is not available in Run or Test modes due to certain restrictions. However, there are alternative methods for testing on different platforms.
→ Web App Testing: Publish the app to a subdomain and test it there.
→ Android and iOS Platforms: Test the app on the Xcode simulator or Android Studio. We've included a link to a user-friendly step-by-step tutorial to assist you in testing on your device.
You can follow these tutorials to set up your test environment:
FlutterFlow YT video for Mac testing environment.
That's it for this tutorial!
Now you can elevate your app game by integrating Google authentication into your FlutterFlow app using Supabase.
Make sure to subscribe to our Youtube channel for more FlutterFlow tutorials!
