Google, Facebook Sign in support with Flutter

I am new to Flutter, Is there any way that i can provide Sign in using GOOGLE/FACEBOOK with Flutter.

Thanks

Adding this late answer since now there is a package, flutter_facebook_login that replaces flutter_facebook_connect. Here is a functioning main.dart example that should work. Just keep in mind you must have followed all configuration as described in the repository and must have a facebook app configured:

import 'package:flutter/material.dart';
import 'package:flutter_facebook_login/flutter_facebook_login.dart';
import 'dart:async';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Facebook Login',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Login Facebook'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
login() async {
final facebookLogin = new FacebookLogin();
final result = await facebookLogin.logInWithReadPermissions(['email']);
switch (result.status) {
case FacebookLoginStatus.loggedIn:
print(result.accessToken.token);
break;
case FacebookLoginStatus.cancelledByUser:
print('CANCELED BY USER');
break;
case FacebookLoginStatus.error:
print(result.errorMessage);
break;
}
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
floatingActionButton: new FloatingActionButton(
onPressed: login,
tooltip: 'Login With Facebook',
child: new Icon(Icons.add),
),
);
}
}


You should see the login screen when clicking bottom right button, and check the printed response on your debug console:



This is the way to go right now since the package actually uses native Facebook Login SDKs on Android and iOS. So no excuse to use Firebase or having to interface yourself!

Hope it helps others who are having troubles with facebook login. And credits go to the package creator roughike

For google signin use google_sign_in, this package is actually quite mature and easier to get going.

As of Dec 2017, there is a Facebook Login Solution and also 1 for Facebook Login with Firebase to create a Facebook FirebaseUser. The initial Facebook Connect Login Package can be found @ https://pub.dartlang.org/packages/flutter_facebook_connect

It requires the following webView package that redirects to Facebook's SignIn Page @ https://pub.dartlang.org/packages/flutter_webview_plugin

And a custom button can be implemented like so...

final _facebookConnect = new FacebookConnect(
appId: '<APP_ID>',
clientSecret: '<CLIENT_SECRET');

FacebookOAuthToken token = await _facebookConnect.login();


The token can then be used with FirebaseAuth like so...

await FirebaseAuth.instance.signInWithFacebook(accessToken: null);


A few extra steps, but overall pretty straight forward execution. There's also a Firebase_Connect method to implement a FacebookLogin Button...

new FacebookLoginButton(
appId: '<APP_ID>',
clientSecret: '<CLIENT_SECRET>',
scope: [FacebookAuthScope.publicProfile],
onConnect: (api, token) {
...
}),


The Google Sign In is even easier. Simply add the Google_SignIn Package from https://pub.dartlang.org/packages/google_sign_in and add the following code to your custom Flutter button...

GoogleSignInAccount googleUser = await _googleSignIn.signIn();
GoogleSignInAuthentication googleAuth = await googleUser.authentication;
await FirebaseAuth.instance.signInWithGoogle(
idToken: googleAuth.idToken, accessToken: googleAuth.accessToken);


I don't think there is an implementation directly in Flutter Dart

But maybe by using a native implementation and communicate with Java/Swift code.
You can build your UI and trigger the native OAuth workflow from flutter.

https://github.com/flutter/flutter/tree/master/examples/hello_services

Google sign-in exists for Flutter via the google-sign-in package. Check out the Firebase for Flutter codelab for more info.

AFAIK, there isn't yet a Facebook sign-in package for Flutter (although one exists in Dart for the server side). Writing such a package should be an interesting exercise...

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

flutter websocket connection issue