Login with Google Using Supabase in FlutterFlow App @FlutterFlow @Supabase

Support Channel By Joining Patreon and get Clone the Project and Access Exclusiv Contents

Time Stamps -

- (00:00) Supabase Google Login Demo
- (00:10) Setting up Supabase Connection
- (02:25) Email Authentication Setup
- (04:00) Google Authentication Setup

In this video tutorial, we will learn how to set up Google Authentication with Supabase in a FlutterFlow app. The script covers various topics, including an introduction to the topic, setting up the Supabase connection, email authentication, Google authentication, and concluding remarks. The step-by-step instructions and demonstrations provided in the script will guide you on how to implement these features in your app.

We will start by exploring the Supabase project and the web app created in FlutterFlow. Then, we will demonstrate how to log in with Google and check if the user has been created in Supabase.

Next, we will dive into the process of setting up Google Authentication in your app. We will walk you through the steps of retrieving the Supabase URL and Anon Key, connecting FlutterFlow with Supabase, and setting up email authentication. We will show you how to create a login page, set up email authentication, and test the functionality by creating a new account.

After that, we will focus on setting up Google Authentication. We will guide you through the steps of enabling Google as an authentication provider in Supabase, obtaining the Client ID and Client Secret from Google Cloud Platform, and adding them to Supabase.

Once the Supabase setup is complete, we will show you how to integrate Google Authentication into your FlutterFlow project. We will create a custom action and demonstrate how to use it in the UI.

By the end of this tutorial, you will have a solid understanding of how to implement Google Authentication with Supabase in your FlutterFlow app. The provided script and demonstrations will help you navigate through each step of the process.

If you want to follow along with the code or clone the project, you can find all the necessary resources in the description. Make sure to like and subscribe to our channel for more helpful videos on FlutterFlow and custom code. If you have any questions, feel free to leave a comment, and we will be happy to assist you.

[lucenajjj]

I have to congratulate you not only for the video but for making the code available, many Youtubers make videos and don't make the code available. You're 1000 note

[mazenalsakkaf]

Fantastic video! I'm particularly interested in implementing a reminder feature that can notify the user even when the app is not running. I'm using FlutterFlow and Supabase, and I'm not sure how to achieve this functionality. Could you please share some guidance on how to approach this?

Thanks again for the great content!
Cheers

[bluerm]

Great video! It is really helpful. Could we build flutterflow app using apple login in supabase?
And this topic is in your future video plan??

[jwolpert]

This has changed, right? Flutterflow authentication options now include Supabase/Google oauth direct setup without creating custom code, no?

[alexjunio_prof]

Thank you! Could you teach us how to insert a row in a table "user" as example after the users sign up with Google?

[ajaykumarz]

Hey, the status bar color changed but the text and icons on status bar is not visible. maybe those text and icon colors are also white? how to handle this?

[romilmachado]

Hey,
I am facing an issue in my flutter flow project.
Is there any way I can connect with you.
Instagram or chat box?

[wesseldieben]

I have a question this only seems to work on web. XCode for IOS doesn't support dart library 'dart:html'. So how do we solve this?

[atheer]

Is it possible to integrate Stripe connect (for multivendor type of transactions ) in flutterflow with supabase as a backend? If so Can you please make a video on this. Thank you for the content and info.

[YohannanKPhilip]

Hey Thanks for the video,
Your video works great for web app
But can you help how to make this of mobile app?

[mohamedsaid]

thanks for all the other videos by the way they are great and very very helpful.

[abdifatahsaid]

thanks for the video, i have a question how to get the sccess_token, refresh_token and user_id after authenticated. thank you

[JimilPatel-fh]

Thank you for this video..can you please make video how to see realtime changes in flutterflow from supabase?

[sergiuKyzminskiy]

Hello! The video is good, but is I don't need to create an account in the app, how should I perform auth. to the app. For example, I want to create the app for private company and the access to the app will only for the people, who are in the DB.

[mohamedsaid]

i did exaclty as shown in teh video but the it keeps saying "Declaration not found" am i missing on something??

[Kamal_sabki]

Thanks for the video, I have an issue with google signup as am not able to redirect the user to a certain page to continue the onbording, i have a page with pagview widget (7 pages) and based on the choice of auth (email, google or apple) I redirect the user to the right pageview index to continue the onbording signup, but the behavior is different as when clicing on signup with google the user is directed to the site URL of supabase, even redirect url with deep linking not working ? any suggestions please to redirect the user only in the sigup process ? thanks

[mdsalahuddin]

Compile button is not available on the custom action code page on ff. any advice?

[pramodgeorgehq]

Hi Manish, how do I connect with you?

[diegotewhite]

Thanks for sharing your knowledge!!! I ran into a problem and I can't solve it. I get an error when compiling the action.
This is the error :

Unknown error compiling custom code. A common cause is a custom widget or action whose name in the code does not match the name provided in the editor.

To make sure it's not the name, I used the boilerplate. I changed the name signInWithGoogle 1000 times, I put shorter names... but nothing.

I thought it was a Beta version problem, but no. I tried compiling it with the beta in another project and it worked.
The only difference is that the other project does not import this:

import

Forgive me if I'm showing you this and it has nothing to do with it, I'm not very clear about this.

[sbessot]

hello, it seems to stay in test mode for Google, how do we change it to production ?