Hi guys, let's learn, how to set up Google authentication with superbase on a Flutterflow app. Currently, Flutterflow supports only email authentication if you're using superbase instead of firebase. So let's add Google authentication with custom code. Let me show you a demo of Google authentication with superbase here. So this is my super project. In the authentication section you can see there are no registered user yet. And this is my web app and I created this in Flutterflow. So I have set both email and Google authentication here. Let's start testing it by clicking login with Google. So select your email. It's now redirecting me to the app's home page where I can see my user id and email. That means we have successfully authenticated ourselves with Google. So now let's check in supervisor if our user is created or not. So here you can see that our user has been created and the provider is Google. Let's see what happens if we create an account with an email. So let me sign up here with my email and password. So it's also redirected me to homepage. Here I can see my user id and my email address. Let's check the superbase. So our user is created here with the email provider. This means that our authentication with both provider is working properly. Now let me show you how to set up this with any Flutterflow project.
First let's open our Flutterflow project. So this is my project. I have set up only the UI. Now let's set up our superbase connection with Flutter. go to the settings, click on superbase. Here we will need the superbase host URL and NLK. Let's retrieve it from superbase. Open your superbase project, go to the settings, click on API. So this is our base URL. Copy the base URL and paste it here. Now go back to the superbase and copy this anon key and paste it back in flutter. Click get schema to check if our connection is working or not. So here you can see that there is only one table called product because I only created this table in superbase. But that means that our supervisor connection with Flutterflow is working. Now let's set up our email authentication. First go to the setting again. Then go to the authentication. For authentication. Type select Supervisor, select the login page that we just created for the initial page and select home page for the logged in. Now go to the UI. Let's set up our email authentication on the create account. First select the create account button. Then go to the action flow editor and add a new action Select Create account and choose the email provider. Finally, select the email and password fields. That's it. Our app can now create a new account in Superbase. Now let's set up email login. Select the Login button, and go to the action flow editor. Add an action select login, choose the email and password text field. That's it. Our email login and create feature is done. Now let's test it. But before testing it, let's disable the email confirmation from superbase. For testing purpose. Go to the superbase and select authentication. Now go to the provider and in the email provider disable email confirmation. Note that you should enable this when you are in production. But for now we are disabling it and now our test is ready. Let's first create an account. Enter an email and password. Click on the create button. We have successfully logged in and now we are on our homepage. Now let's check in superbase to see if our user has been created or not. Open Superbase, go to authentication. As you can see here, our user account is created and provider is email. That means we have successfully implemented our email authentication. Now let's set up Google authentication. Go to the superbase again, then go to the authentication, select the provider. Here is a list of authentication providers supported by Superbase. The method I am going to show you can implement any of these authentication providers in Flutterflow. So here is Google. Select it enable this toggle. Sign in with Google for setting up Google Login with Supervisor we need to provide client id and client secret for Oauth in supervis. So let's get client id and client secret. Open your Google and search for Google Cloud platform. Select this one. Select your project. If you don't have any, then create one. Since I already have a project, I will be using that. Now go to the search bar and search for Oauth. Select Oauth and consent screen here add a developer email address. I'm going to add mine. Save and continue. Now go to the credentials, click create new credential. Select co auth client in the application type select web application. Don't worry, it will also work on Android. Name it whatever you want. At the bottom you will see authorized redirects uris. Open your superbase, go to Earth and the provider Google. You will see a back URL for earth. Copy and paste it here. Hit create. Now we got our client id and client secret that we need to add in the superbase. Copy the client id, paste here, copy the secret id paste it here and that's save. Now go to URL configuration and paste your website URL here. Now we also need to redirect URis for Android redirection. You can get it from app details page, URL schema and then just add it in superbase. Then save. We are done in superbase side. Now let's set up Google Auth in our flutterflow project. Here we will create a new custom action to authenticate our user with Google. Go to the custom code section and add a new custom action. Let's name it. Sign in with Google in the editor paste the given code. Now we need to make some modification to ensure it's work properly. In the section where it says redirect Pis web you will need to provide the domain name of your website. Additionally, in this section you will need to add apps deep link. This will ensure that authentication works on mobile devices. So save this and let's get our deep link. Click on setting in the app details. Scroll down a bit and you will see a routing and deep linking. Just copy the URL schema and paste it in the code. Also update that too. Now let's save this and compile it. It's compiled now. Now let's use this action in our UI. Go to the login page that we created earlier. Select the Google login button. Add action select our custom action. Close it now we have successfully implemented our Google authentication with superbase in our Flutterflow project. With this implementation, we will use our authentication user in the same way as we do for email authentication natively supported by Flutterflow. The only difference is that we have added Google authentication with custom action. The code I used to build this is available in the description. You can copy and paste it from there. Additionally, if you want to clone the exact project to your Flutterflow account, you can join our Patreon family of Flutterflow developers and support this channel to create more helpful videos. Thank you very much for watching the video. If the video was helpful to you in any way, please like and subscribe to the channel for future updates. If you have any question related to Flutterflow or any custom code, leave a comment and I will try to answer as soon as possible. Thanks for watching. Keep building awesome apps.
