Google Sign in With Auto-Login in Flutter
Auto-login using Shared preferences in the flutter
Auto-login is one of the key features of an app. Here, the auto-login function is done using Shared preference. Shared preference is one of the ways of storing the data in an android device with key and value. The shared preferences values are stored locally in the android device. So, we can fetch that data whenever needed. Here in this article, we’ll see about how to use auto-login with google sign in.
Getting Started
The first thing you should do is to create a flutter project. The second thing you need to do is you should create a firebase project on firebase’s website. At the time of creating, you should download the google-services.json file and place it in your project’s android/app/ folder and the website will ask for the android package name and SHA1 key. You can find your android package name in android →app →src →main and in that folder, you’ll see AndroidManifest.xml file in that file you can find the android package name. You should provide SHA1 so that you can overcome some of the errors.
To generate the SHA1 key you should go to your java installed folder and in that folder, you can see JDK and JRE folders. Navigate to the JDK folder and then to the bin folder and open a command prompt there and just execute this code in the command prompt.
keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystoreAfter executing it you can get the SHA1 key, Copy that and paste it in firebase and you should also configure your project/gradle and app/gradle after following the procedures shown on that website you’ll be able to connect with firebase. After following the procedure, navigate to the authentication page in the firebase and you can see the Sign-in method tab in that you should turn on Google and remember to select your mail in project support mail. If everything is successful, Let’s code.
Plugins
You should add some plugins in pubspec.yaml file. The plugin we’re going to add are as follows,
firebase_auth: ^0.16.1google_sign_in: ^4.4.6rxdart: ^0.21.0
1st package is used for authentication with firebase, the Second one is used for Google sign in and the third one is for using the observables method.
Then there is another plugin used for Shared preferences. So also add that plugin in the dependencies field.
dependencies:
shared_preferences: ^0.5.8
Let’s Code
Here in this project, I have created a file called auth.dart to handle all google sign in and Shared preferences. The code for auth.dart is given below.
auth.dart file
In the above code googleSignin() function is used to sign in to the Google account. logIn() function is used to set the Shared preference with uid as key and Google UID as a value in Shared preferences. autoLogin() function is used to find whether is used is logged in or not. If the user is logged in then the function will return the UID else it’ll return a null value. logOut() function is used to remove/clear the values with the key as ‘uid’. That’s all with the auth.dart file. The remaining part is main.dart, loginPage.dart, homePage.dart files. The code for those files are as follows.
In main.dart file we create a new stateful widget class in that class, Initially, we check for whether the user is signed in or not. If the user is signed in, I’ll set isLoggedin to true else it’ll set false. In Build function, we’re checking whether the isLoggedin is true or not. If logged in it’ll move to home page else it’ll show login page.
In the login page when the user clicks on the button login user will be asked to select the google account. Then he’ll move to the home page and the UID of the user is stored in Shared preference. when the user opens the app for the next time the user will be shown home page.
On the home page, the UI remains simple with just the logout button and text showing that it’s the home page. When the user clicks on the logout button user will be signed out of google and also the Shared preferences values will be cleared or removed. So, when he opens up the app next time user will land in login page of the app.
Screenshots
The final outcome of the app will be as follows.
The link for the app’s GitHub repository is here. In case if you ran into an error just checkout project gradle, app gradle and settings.gradle file. In my repository.
If you have liked the post and wish to contribute to me you can buy me coffee
Conclusion
I hope you got something on the Auto-login with Google sign in using Flutter. Hope you don’t ran into any errors. If caught on some error feel free to comment it out. With this, the Auto-login with google sign is completed. Customize the code based on your preference.
