Unlock Seamless Authentication: Sign in with Google in Flutter App | Supabase Tutorial

hello everyone today we learn how to integrate Google signin without using Firebase on our flut project we can also add that to our super base so that we can use it with super base odd let's get started here I've gone ahead and created a basic flatter application and I have added two dependencies in the pspec yo file which are superbas letter and Google signin now we'll create a super based project we'll follow along with this tutorial and uh we will create a super based project new project we can [Music] add never explained yes we'll do that database password you will have a database password let's create it now okay so we have created a super base account now let's connect the odd with Google all right so let's go to the authentication here first of all let's go to the authentication here it's taking some time to load let's reload this page real quickly [Music] okay we will carry forward this tutorial so uh these are the prerequisites and we have added these dependencies and uh now what we're going to do is we've created a super base project now we have to go to authentication providers SCH Google let's go to authentication [Music] providers Google and we'll enable this now we have to give client ID and client secret and authorized client IDs for Android we'll do just that by going to in fact I already have it here so we will create a new project we call it letter explained you create the project wait for a while let it [Music] finish and we going to select the project and what we're going to do is we're going to type in odd let's see what it what comes up type in o o all right we go here let's see what comes up can this we take external and we click create and our app name is explained support email let explain then we need to add a developer email and just add the same email letter explains here on gmail.com just save and continue all right now we have Scopes we don't we don't need that at the moment save and continue save and continue and these are what we have we go back to the dashboard got it we click on credentials what we're going to do is create a credential here all the client [Music] ID and we are going to have a web application web cine one that's fine and important part is that we have to click a redirect URL right here authorized redirect URL we get that here we copy that from here paste it over here we don't need a second one just the first one we do we click create and then we copy the client ID and we populate here at client ID here and uh we go to the client Secret and you go here and paste the client secret you can see it right over here all right so that's done now for Android we create create credentials and we give all client ID take Android Android client one now we have to provide the package name and the Sha certificate fingerprint so what we do is we will type in this could could be really good let's see yeah this is it now we copy this this is the default key that we have and we're going to do is we are going to put it in the terminal here and we will get this right over here this is the sha1 we come back here to the Google uh we put it over here that's done now we have to have the package name for package name we go to Android uh built Gradle you can see it right over here example dot right over here we put that there and you click on create we get a client ID we copy that right from there and here we paste it and we skip non checks and then we save it and let it save okay now it's saved and enabled we can see right over here we've given all these things all right so now that said let's see what we have in the article we have all this for iOS uh letter Rod okay so we are creating a login screen copy the whole thing from here and we will put it all over here we can put a okay let's see what it is what main yeah everything is there and paste over here for every so login screen your login screen is not added copy the login screen from there me put it over here login screen is added but now we have other problems and we don't have profile screen and these Imports we will create a new file paste it over here let me change it to we will change the my OD app to the name that we have here in pups bre Amo which is this one right over [Music] here oh if we don't want it like this we just [Music] have l in right over here that's it and fix the issue with the main never we go to login we need a couple things here remove that that as well we need to have profile screen and we need to fill all these things after that okay now let's have a profile screen like Romas we're going to do is that we're going to copy this paste it over here I'll provide the link to the article so you can refer and we can remove these things from over [Music] here and in the in the profile screen what we're going to do is import super base super base. Dot we'll import [Music] that all right so what we're going to do we are going to create a super base instance we can put it right over here okay now that is fixed we can go over here we can do that here as well we can import it remove the constant okay couple are gone we can import this profile screen from from there we can remove the constant now login is fixed and then we have the uh we have the login screen we can import that really quickly constant that's fine okay now we have the setup now we have to instantiate okay we have to give all right so all that is set up now what we're going to do is in the home main screen we have to give super base URL in and on key now we go back and go to settings API and copy the URL and put it over here and the a non key copy that and put it over here save it and restart okay now we have Google login right over there but we cannot log in just yet what we're going to have to do is do a couple more things first off we need to go to login and then we need to put the uh web client ID right over here that's what we have to do so for that we have to go to credentials and then click on okay and we can put copy this right over here copy it and put it right over here all right so after that for now we can just remve remove the iOS client ID now we have all these things all right so that is done and Next Step what we going to do is we are not providing uh what we going to have to do here is go to build. gradal file and we have to have the signin configs right over here we go to buildout Gradle file on app s cradle default application you paste it right over here save it save it stop the application and let's rerun it real quickly let's see how that works so basically what we're doing here is we providing the client ID and then this is the Google sign in part and the authentication then after that we get the access token and ID token and we can provide that to super base sign in with ID token and we can sign in now let's check it out click here it's loading and then we click here voila we are logged in just like magic that's it guys that's it for this tutorial see you in the next one

Channel: Flutter Explained

Views: 763

Keywords:

Id: CSx7qdyOK-A

Length: 14min 1sec (841 seconds)

Published: Fri Jan 12 2024