Ultimate Step-by-Step Guide: Google Auth in FlutterFlow and Supabase

Hello friends and welcome to this flut oflow tutorial in this tutorial we'll be implementing the signing in with Google function in our flowflow apps with a super based database a huge shout out to Elvin zutra 5839 for suggesting this awesome function I think it's a really useful function and is super relevant in our real world applications so enough yapping let's get straight into it right now all right so over here I have my base flut flow project set up with a homepage a register page as well as a signin page you can clone this base flut flow project I've put the link down in the YouTube video description below so once you have cloned this project the other requirements to have are a base super Bas project set up as well as a Google Cloud console accounts now the first thing that we have to do is that we have to link our super based project to our flf Flow app so under settings and Integrations and under app settings will enable Authentication for the authentication type it'll be super base and for the entry page it will be the signin page for the login page it will be the homepage next we can scroll down and under Integrations we go to super base we'll enable super base and for the API URL we go back to our superbase project and we'll go under project settings under configuration we'll click on API and we'll copy and paste this URL over here and now we also copy and paste this Anon public URL key now we'll press on get schema now we can go to our Google Cloud console and we'll create a new project once your project has been successfully created we'll go under apis and services and we'll go under o off content screen we'll choose the external user type we'll click on create and now you have to give an app name note that do not use the name Google in your app name as that will result in errors you would also have to give a support email as well as a developer contact information next you can click on Save and continue for the Scopes we'll just save and continue and now you can add some test users so that you can test the Google signin function without having to wait for Google to authenticate and verify your users now we'll just go back to our dashboard and after we have set up the o o consent screen we'll go to credentials and now now we have to add some credentials we'll choose oo client ID and as for the application type we'll be covering web applications Android apps as well as iOS apps in this video so first we'll deal with the web application we'll have to add an authorized redirect URL and for this we have we can find it in our super base you'll go to Authentication under providers we'll go under the Google provider and we'll copy this callback URL over here next we'll create credentials for Android applications for the package name go back to your flut flow dashboard and under app details we'll copy and paste this package name over here for the sha1 certificate we have to generated it ourselves so we have to open our Command Prompt if you're on Windows or your terminal if you're on Mac and in your command prompt you would have to paste this command over here I'll be putting this command in the video description as well for the key Store password it will be Android a n d r o i d all in lowercase letters and now you should see that over here we have generated a sh1 key so we can just copy and paste this over here do not that if this this is your first time implementing a goal sign in and generating a sha1 key that you would likely be met with this error over here where key2 is not recognized as an internal or external command this is because we have not yet downloaded the key2 module into our computer just yet so first we will have to install key2 on your system and the requirements to do so is that you would have to have Java installed on your system as well to install Java you can click on this link over here and you can download the Java SDK depending on whether you are on Mac or on windows so just follow the instructions in this article which I will also be linking in the video description so if you're on Windows you have to follow these steps in order to add the key2 folder to your system path and if you follow all those steps you should be able to generate the sha1 key so back to our Google Cloud console after copy and pasting the sha1 key we can now create and now lastly we have to create the credentials for iOS apps so for the bundle ID once again we can go back to our flut flow dashboard and we'll copy the package name and paste it in the bundle ID over here if if you're releasing your apps on the App Store you would also have to give the App Store ID as well as the team ID for your app so now that wraps up the configuration for our Google Cloud console The Next Step will be configuring super base for the Google off sign in and login so in super base under providers will and under the Google provider we want to enable sign in with Google for this client ID it will be the web clients and we'll copy and paste this client ID over here for the client secret it will be this one over here for the authorized client IDs this one will be under the Android client and we'll copy and paste the Android client ID lastly for iOS you can toggle this skip non check to be true and now we'll save next we go under URL configuration and we want to change this site URL you can find the site URL in your flut flow dashboard and under app settings for web publishing you'd want to copy and paste this site URL over here we click and save that and now we have to add a redirect URL to redirect our native users back into our flf flow apps after they have finished their Google signed in so this redirect URL can be found under app details and under routing and deep linking it'll be the URL scheme and that's it for configuring super base for Google authentication The Next Step will be to add Google authentication into our flut flow apps so in your flut flow dashboard but first we have to add a user data table into our super based project so we we want to create a new table let's name it users for the ID instead of an 8 by integer type it will be a uu ID type and we will want to add an email column which would be of type text now we want to go back to our flut flow dashboard and under superbase Integrations you want to get schema and under superbase authentication we want to enable Google authentication now we have to copy and paste the iOS client ID so we go back to our Google Cloud console and under iOS clients we'll copy and paste the client's ID and we do the same thing for the web client now we can implement the actual Google sign in functionality in our app so in our widget tree let's do with the sign in with Google first so with the sign in with Google button selected we'll go to the action flow editor and we'll search for super base and we'll choose the login action for the the off provider will just choose Google now we can deal with the register page click on the register with Google button and for the action flow editor you will add an action and we'll also add the login action with Google but now we have to add an additional action when registering an account we'll search for super base and we want to insert a row into our users table for the ID it will be the authenticated users user ID for creator that it will be the global properties current time and for the email it will just just be the authenticated users email now we can close this and that's all you have to do to implement Google off in your flat flow apps with super base unfortunately we not able to test the Google authentication function in the run and test mode in flut flow as you would need an emulator or publish your web app on a secondary domain to be able to do so however please feel free free to refer to this video to see how Google authentication works in your flutter flow apps so that wraps it up for today's video thank you very much for watching I hope that you have learned now how to implement Google or in your flutter flow apps with super base stay tuned for the next video thank you and [Music] goodbye I

Channel: just xolotl

Views: 272

Keywords: google auth flutterflow supabase, flutterflow, flutterflow tutorial, supabase, supabase tutorial, app development, mobile app development, supabase auth, nocode tutorial, supabase flutterflow, google sign in flutterflow, flutterflow tutorial for beginners, supabase google sign in, supabase authentication, google authenticator, flutterflow google sign in, flutterflow google login

Id: aKTTNq9yjZ4

Length: 12min 34sec (754 seconds)

Published: Mon Apr 01 2024