In today’s article, we are going to implement social login in flutter. We will only implement Google and Facebook login.
Our Flutter app development company also provides various Social Login compatibility with your app.
Step 1. First, create a flutter project by running the following command.
|
1 |
flutter create social_login |
here, social_login is the name of the project
Create Firebase Project and Enable Authentication
Step 2 Create a project on firebase and enable both Google and Facebook login.
Please follow this to create a project on firebase create-firebase-project
Step 3. Once step 2 is completed add apps (android and ios). Please follow this.
Step 4. Enable google and Facebook login
- Go to firebase console
- Open Authentication Tab
- Navigate to the Sign-in method
- Add a new provider (enable both Google and Facebook)
Setup Facebook developer account and app
Note: To enable Facebook login you need to have a Facebook developer account. If not already have please create a Facebook developer account and then create a project. Please follow this to create an account.
Please follow this to create a Facebook app.
Step 5. Once the Facebook app is created now we need to add a platform.
- Go to dashboard
- Select Facebook login
- Select a platform for which you want to add a Facebook login (android/ ios).
Now as our firebase project is configured and also facebook developer is also ready. Now we can finally start to integrate social login.
Step 6. As we have already created a flutter project, it’s time to add the required dependencies to our project. Please add the following dependencies to our project.
You may add dependency by any of the following methods.
- Open your pubspec.yaml file and add the following
|
1 2 3 4 |
dependencies: google_sign_in: ^5.3.0 flutter_facebook_auth: ^4.3.0 firebase_core: ^1.15.0 |
- Add from the command line
|
1 2 3 4 5 |
flutter pub add google_sign_in flutter pub add flutter_facebook_auth flutter pub add firebase_core |
Step 7. Platform-specific changes for Facebook login
- Android
Please follow this for Android Configuration
- IOS
Please follow this for IOS Configuration
Step 8. Create buttons to perform login
|
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 |
Center( child: Column( children: <Widget>[ TextButton( onPressed: () async { final result = await firebase.performGoogleSignIn(); if (result != null) { log(result.email); } }, child: const Text("Signin with Google"), ), TextButton( onPressed: () async { final result = await firebase.facebookSignIn(); if (result != null && result.status == LoginStatus.success) { final data = await FacebookAuth.instance.getUserData(); log(data.toString()); } }, child: const Text("Signin with Facebook"), ), ], ), ), |
Step 9. Now we will write the logic to perform google and Facebook login
- Import the required packages
|
1 2 |
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart'; import 'package:google_sign_in/google_sign_in.dart'; |
- Google login
|
1 2 3 4 5 6 7 8 9 |
Future<GoogleSignInAccount?>? performGoogleSignIn() { try { return GoogleSignIn().signIn(); } catch (err, stk) { log(err.toString()); log(stk.toString()); return null; } } |
- Facebook Login
|
1 2 3 4 5 6 7 8 9 |
Future<LoginResult?>? facebookSignIn() { try { return facebook.login(); } catch (err, stk) { log(err.toString()); log(stk.toString()); return null; } } |
Conclusion
Hope this helps you to understand how to integrate social login in the flutter app.
Please head over here for more blogs on flutter.
Be the first to comment.