Hi Friends,
Hope you are all well. This post is a sequel to my previous post on flutter authentication. In this post let’s talk about social authentication; i.e., authenticating users into your application with a third-party authentication provider like Google, Facebook or Twitter.
To learn the basics of flutter get my course – Click here.
Other flutter courses – here. (Affiliate Link)
Let’s begin.
A screencast of this post
Now let’s continue from where we left off.
(If you don’t have the code, kindly refer to my previous post here)
First let’s start with installing the dependencies.
Open up pubspec.yaml file and add the below dependency.
|
1 2 3 4 5 6 |
dependencies: firebase_auth: cloud_firestore: google_sign_in: flutter: sdk: flutter |
Alright, now open the firebase console and enable Google Sign-in provider.
Wait, there’s more to do. Open up the project settings and add we need to add a SHA1 fingerprint. If you don’t have one use the below command to generate it
|
1 2 |
keytool -exportcert -list -v \ -alias androiddebugkey -keystore ~/.android/debug.keystore |
(Enter this command in a terminal and copy the SHA1 key it generates and paste it as shown below)
Alright, that’s it for the configs. Let’s move on.
(If you have any doubt in the configuration, kindly watch the video once, I have shown how to do it step-by-step)
Open up Login Page and add another button as shown below.
loginpage.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
import 'package:flutter/material.dart'; import 'package:firebase_auth/firebase_auth.dart'; //Google provider import 'package:google_sign_in/google_sign_in.dart'; class LoginPage extends StatefulWidget { @override _LoginPageState createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { String _email; String _password; //google sign in GoogleSignIn googleAuth = new GoogleSignIn(); @override Widget build(BuildContext context) { return new Scaffold( body: Center( child: Container( padding: EdgeInsets.all(25.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ TextField( decoration: InputDecoration(hintText: 'Email'), onChanged: (value) { setState(() { _email = value; }); }), SizedBox(height: 15.0), TextField( decoration: InputDecoration(hintText: 'Password'), onChanged: (value) { setState(() { _password = value; }); }, obscureText: true, ), SizedBox(height: 20.0), RaisedButton( child: Text('Login'), color: Colors.blue, textColor: Colors.white, elevation: 7.0, onPressed: () { FirebaseAuth.instance .signInWithEmailAndPassword( email: _email, password: _password) .then((FirebaseUser user) { Navigator.of(context).pushReplacementNamed('/homepage'); }).catchError((e) { print(e); }); }, ), SizedBox(height: 15.0), RaisedButton( child: Text('Login with Google'), color: Colors.blue, textColor: Colors.white, elevation: 7.0, onPressed: () { googleAuth.signIn().then((result) { result.authentication.then((googleKey) { FirebaseAuth.instance .signInWithGoogle( idToken: googleKey.idToken, accessToken: googleKey.accessToken) .then((signedInUser) { print('Signed in as ${signedInUser.displayName}'); Navigator.of(context).pushReplacementNamed('/homepage'); }).catchError((e) { print(e); }); }).catchError((e) { print(e); }); }).catchError((e) { print(e); }); }, ), SizedBox(height: 15.0), Text('Don\'t have an account?'), SizedBox(height: 10.0), RaisedButton( child: Text('Sign Up'), color: Colors.blue, textColor: Colors.white, elevation: 7.0, onPressed: () { Navigator.of(context).pushNamed('/signup'); }, ), ], )), )); } } |
That’s about it.
Now look at this piece of code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
onPressed: () { googleAuth.signIn().then((result) { result.authentication.then((googleKey) { FirebaseAuth.instance .signInWithGoogle( idToken: googleKey.idToken, accessToken: googleKey.accessToken) .then((signedInUser) { print('Signed in as ${signedInUser.displayName}'); Navigator.of(context).pushReplacementNamed('/homepage'); }).catchError((e) { print(e); }); }).catchError((e) { print(e); }); }).catchError((e) { print(e); }); }, |
This is where the actual sign-in happens. When we use google plugin to sign in we get a key with contains an idToken and an accessToken. We use this to authenticate the user into our flutter app (which uses the firebase authentication system for managing users). After authenticating the user we would need to redirect him to the dashboard page as well.
That’s it. Now run the app and you would see the below screen.
Try tapping on the Login with Google Button.
You would get signed in (An overlay would appear if you are using more than one google account in the same device)
Now open up your list of users in your firebase console. You would see that this user has been added into our system as well.
That’s it.
Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.
Donate to keep this site alive – here.
(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).
Join our flutter community – here.
Thanks for reading. Peace..
