Flutter: Facebook and Google Authentication

I am trying to include Facebook and Google Authentication in my app which I am creating using Flutter. Is there a tutorial where I can utilize to implement as it is bit uncertain on how to include html elements and Javascript in Flutter to enable such authentication. Or is there a complete different way of authentication for Flutter?

You can use the google_sign_in plugin. Check out the documentation in the plugins repo and on pub.

There isn't a Facebook plugin yet, but you could write one.

I'd recommend leveraging Firebase.

Here is a codelab: https://codelabs.developers.google.com/codelabs/flutter-firebase/index.html#0

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.

Like the others mentioned for google use google_sign_in plugin and for Facebook you can use this one.

https://github.com/lejard-h/flutter_facebook_connect

But to connect to Facebook you have to register your app by Facebook. They provide an documentation for this.

Note: don‘t forget the redirection to localhost like the README of the github project explains.

The Facebook plugin will open an webview (you need to install the webview_plugin too) where the user can authenticate and accept the permission your app needs.