Add Google-login to a Flutter app using Firebase Authentication [ 5 minute tutorial]

[Music] we shall add google login to this new flutter app and here is the corresponding firebase project so here we have to click on this button authentication and then click on get started and then we have to enable google as the sign in service provider here using this switch and then here you have to provide a name this name will be visible to the users and you have to select support email and now save in the next step you have to execute this command on the terminal so you will be asked for a password and enter android sd password because this is for the debug ssh key now here you will find this key and we shall copy it and you have to add it in the project settings of the firebase project now install the packages firebase auth and google signing in your flutter project once they are installed open the login page and import the libraries firebase authentication dot dart and google sign in dot dot now we shall create a function and we shall write the authentication related code inside this function and we shall call this function from the on press function of the button of the login button inside this function i'll show you the steps in the reverse folder so at the end you have to make a call to a function named sign in with credential of the class firebase auth so you have to get an instance firebase dot instance and call this function to this function you have to pass an instance of the class earth credential so we have to get that and we can get that with help of the class called google off provider we shall call google or provider dot credential we have to pass id token and access token so we have to get those values now so for that we are going to use a class called google sign in we have to create an instance and call sign in this will give us an instance of the class google sign-in account this class has a getter called credent authentication from which we can get an instance of the class google sign-in authentication and this instance will give us the id token and the access token so to the function credential for the parameter access token we shall pass google author access token and google or dot id token for the parameter id token this function sign in which credential returns a future of type user credential so we shall use away to wait for it and we shall hold the result in a variable of type user credential we can access the information of the authenticated user from this instance so let us try to print the name of the user user credential.user gives us an instance of a class called user and we can access the different properties of this class so let us print the display name now run the app try to login and on the console here we can see the name of the user so we have successfully implemented this portion of authentication now to load the home page on successful authentication you can use the navigator here or you can listen to the authentication state changes inside the main dot dot file so inside the main.dart file while adding the widget to the property home of the material app we shall listen to the changes of authentication state we are going to use a stream builder here because we shall listen to a stream that we can get by calling the function or state changes of the firebase or class so we have to pass this stream to this parameter stream and this stream provides us an instance of the class user we have to specify that type here and this can be null so make it nullable inside the builder function first we are going to check if any error has occurred if any error occurs we shall return the text widget with the error message and if the connection state is active we shall try to access the value so snapshot.data will give us the value an instance of the class user in this case or null if the user is not authenticated so if it is null then we shall return an instance of the login page widget and if it is not null which means that the user is authenticated we sell return and instance of this widget my home page now let us also add a logout button on the app bar so here to the property actions of the app bar we shall pass the list inside the list we shall add an instance of the widget icon button now inside the on press function of this icon button we are going to add two statements first is a call to the function sign out of the instance of the class google sign in and the next statement will be firebase or dot instance and then the function sign out so if you skip the first statement then you will face an issue next time when you try to login the pop-up to select the email will not appear and the previously selected email will be used for authentication so now run the app try to login and you will notice that the log the homepage appears and here if you click on the logout button you'll be logged out of the app so this video is a first and to the point tutorial if you want a more detailed a longer version of this video take a look at the description you will find the link to it and like the video subscribe to the channel thanks for watching

Channel: Droidmonk

Views: 18,217

Keywords:

Id: VCrXSFqdsoA

Length: 4min 58sec (298 seconds)

Published: Wed Jun 15 2022