SignIn with Facebook

10min
Setting up Facebook login on your Flutter app using Parse
Introduction
Parse Server supports 3rd party authentication. In this guide you will learn how to setup Facebook authentication/login on your Flutter app using Parse.
Prerequisites
To complete this tutorial, you will need:
﻿Flutter version 2.2.x or later﻿
﻿Android Studio or VS Code installed (with Plugins Dart and Flutter)
A Flutter app created and connected to Back4App.
Note: Follow the Install Parse SDK on Flutter project to create an Flutter Project connected to Back4App.
[Facebook for Developers Account] (https://developers.facebook.com)
Set up the plugin flutter_facebook_auth on project.
A device (not Simulator) running Android or iOS.
Goal
To add Facebook login on your Flutter app using Parse Server
- Configure Facebook Login for Android - Quickstart
Follow instructions the plugin ﻿flutter_facebook_auth﻿for Android on link https://facebook.meedu.app/#/android﻿
- Configure Facebook Login for Android - Quickstart
Follow instructions the plugin ﻿flutter_facebook_auth﻿for iOS on link https://facebook.meedu.app/#/ios﻿
- Set up Parse Auth for Facebook
Go to Back4App website, log in and then find your app. After that, click on Server Settings and search for the Facebook Login block and select Settings.
The Facebook Login section looks like this:
﻿
Now, you just need to paste your Facebook appId in the field below and click on the button to save.
﻿
In case you face any trouble while integrating Facebook Login, please contact our team via chat!
- Add the Sign In with Facebook
Now that you have the project set up, we can get the user data and sign in to Parse.
According to the documentation, we must send a Map with user authentication data.
Dart
       //Make a Login request
       final LoginResult result = await FacebookAuth.instance.login();
3
       if (result.status != LoginStatus.success) {
         Message.showError(context: context, message: result.message!);
         return;
       }
8
       final AccessToken accessToken = result.accessToken!;
10
      //https://docs.parseplatform.org/parse-server/guide/#facebook-authdata
      //According to the documentation, we must send a Map with user authentication data.
13
      //Make sign in with Facebook
      final parseResponse = await ParseUser.loginWith('facebook',
          facebook(accessToken.token, accessToken.userId, accessToken.expires));
       //Make a Login request
       final LoginResult result = await FacebookAuth.instance.login();
3
       if (result.status != LoginStatus.success) {
         Message.showError(context: context, message: result.message!);
         return;
       }
8
       final AccessToken accessToken = result.accessToken!;
10
      //https://docs.parseplatform.org/parse-server/guide/#facebook-authdata
      //According to the documentation, we must send a Map with user authentication data.
13
      //Make sign in with Facebook
      final parseResponse = await ParseUser.loginWith('facebook',
          facebook(accessToken.token, accessToken.userId, accessToken.expires));
﻿
- Sign in with Facebook from Flutter
Let’s now use our example for Sign in with Facebook in Flutter App, with a simple interface.
Open your Flutter project, go to the main.dart file, clean up all the code, and replace it with:
Dart
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
5
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
8
   final keyApplicationId = 'YOUR_APP_ID_HERE';
  final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  final keyParseServerUrl = 'https://parseapi.back4app.com';
12
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

  if (kIsWeb) {
    // initialiaze the facebook javascript SDK
    FacebookAuth.i.webInitialize(
      appId: "YOUR_FACEBOOK_APP_ID", //<-- YOUR APP_ID
      cookie: true,
      xfbml: true,
      version: "v9.0",
    );
  }
25
  runApp(MyApp());
}
28
class MyApp extends StatelessWidget {
  Future<bool> hasUserLogged() async {
    ParseUser? currentUser = await ParseUser.currentUser() as ParseUser?;
    if (currentUser == null) {
      return false;
    }
    //Checks whether the user's session token is valid
   final ParseResponse? parseResponse =
        await ParseUser.getCurrentUserFromServer(currentUser.sessionToken!);

    if (parseResponse?.success == null || !parseResponse!.success) {
      //Invalid session. Logout
      await currentUser.logout();
      return false;
    } else {
      return true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter - Sign In with Facebook',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: FutureBuilder<bool>(
          future: hasUserLogged(),
          builder: (context, snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
                return Scaffold(
                  body: Center(
                    child: Container(
                        width: 100,
                        height: 100,
                        child: CircularProgressIndicator()),
                  ),
                );
              default:
                if (snapshot.hasData && snapshot.data!) {
                  return UserPage();
                } else {
                  return HomePage();
                }
            }
          }),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
86
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter - Sign In with Facebook'),
        ),
        body: Center(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
               Container(
                 height: 200,
                 child: Image.network(
                     'http://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
               ),
               Center(
                 child: const Text('Flutter on Back4App',
                     style:
                         TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
               ),
               SizedBox(
                 height: 100,
               ),
               Container(
                 height: 50,
                 child: ElevatedButton(
                   child: const Text('Sign In with Facebook'),
                   onPressed: () => doSignInFacebook(),
                 ),
               ),
               SizedBox(
                 height: 16,
               ),
             ],
           ),
         ),
       ));
 }

 void doSignInFacebook() async {
   late ParseResponse parseResponse;
   try {
     //Check if the user is logged.
     final AccessToken? currentAccessToken =
         await FacebookAuth.instance.accessToken;
     if (currentAccessToken != null) {
       //Logout
       await FacebookAuth.instance.logOut();
     }

     //Make a Login request
     final LoginResult result = await FacebookAuth.instance.login();

     if (result.status != LoginStatus.success) {
       Message.showError(context: context, message: result.message!);
       return;
     }
147
     final AccessToken accessToken = result.accessToken!;
149
     //https://docs.parseplatform.org/parse-server/guide/#facebook-authdata
     //According to the documentation, we must send a Map with user authentication data.
152
     //Make sign in with Facebook
     parseResponse = await ParseUser.loginWith('facebook',
         facebook(accessToken.token, accessToken.userId, accessToken.expires));
156
     if (parseResponse.success) {
       final ParseUser parseUser = await ParseUser.currentUser() as ParseUser;
159
       //Get user data from Facebook
       final userData = await FacebookAuth.instance.getUserData();

       //Additional Information in User
       if (userData.containsKey('email')) {
         parseUser.emailAddress = userData['email'];
       }

       if (userData.containsKey('name')) {
         parseUser.set<String>('name', userData['name']);
       }
       if (userData["picture"]["data"]["url"] != null) {
         parseUser.set<String>('photoURL', userData["picture"]["data"]["url"]);
       }

       await FacebookAuth.instance.logOut();
       parseResponse = await parseUser.save();

       if (parseResponse.success) {
         Message.showSuccess(
             context: context,
             message: 'User was successfully with Sign In Facebook!',
             onPressed: () async {
               Navigator.pushAndRemoveUntil(
                 context,
                 MaterialPageRoute(builder: (context) => UserPage()),
                 (Route<dynamic> route) => false,
               );
             });
       } else {
         Message.showError(
             context: context, message: parseResponse.error!.message);
       }
     } else {
       Message.showError(
           context: context, message: parseResponse.error!.message);
     }
   } on Exception catch (e) {
     print(e.toString());
     Message.showError(context: context, message: e.toString());
   }
 }
}
203
class UserPage extends StatelessWidget {
 Future<ParseUser?> getUser() async {
   return await ParseUser.currentUser() as ParseUser?;
 }
208
 @override
 Widget build(BuildContext context) {
   void doUserLogout() async {
     final currentUser = await ParseUser.currentUser() as ParseUser;
     var response = await currentUser.logout();
     if (response.success) {
       Message.showSuccess(
           context: context,
           message: 'User was successfully logout!',
           onPressed: () {
             Navigator.pushAndRemoveUntil(
               context,
               MaterialPageRoute(builder: (context) => HomePage()),
               (Route<dynamic> route) => false,
             );
           });
     } else {
       Message.showError(context: context, message: response.error!.message);
     }
   }

   return Scaffold(
       appBar: AppBar(
         title: Text('Flutter - Sign In with Facebook'),
       ),
       body: FutureBuilder<ParseUser?>(
           future: getUser(),
           builder: (context, snapshot) {
             switch (snapshot.connectionState) {
               case ConnectionState.none:
               case ConnectionState.waiting:
                 return Center(
                   child: Container(
                       width: 100,
                       height: 100,
                       child: CircularProgressIndicator()),
                 );
               default:
                 return Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
                       Center(
                           child: Text(
                               'Hello, ${snapshot.data!.get<String>('name')}')),
                       SizedBox(
                         height: 16,
                       ),
                       Container(
                         height: 50,
                         child: ElevatedButton(
                           child: const Text('Logout'),
                           onPressed: () => doUserLogout(),
                         ),
                       ),
                     ],
                   ),
                 );
             }
           }));
 }
}

class Message {
 static void showSuccess(
     {required BuildContext context,
     required String message,
     VoidCallback? onPressed}) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Success!"),
         content: Text(message),
         actions: <Widget>[
           new ElevatedButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
               if (onPressed != null) {
                 onPressed();
               }
             },
           ),
         ],
       );
     },
   );
 }
300
 static void showError(
     {required BuildContext context,
     required String message,
     VoidCallback? onPressed}) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Error!"),
         content: Text(message),
         actions: <Widget>[
           new ElevatedButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
               if (onPressed != null) {
                 onPressed();
               }
             },
           ),
         ],
       );
     },
   );
 }
}
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
5
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
8
   final keyApplicationId = 'YOUR_APP_ID_HERE';
  final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  final keyParseServerUrl = 'https://parseapi.back4app.com';
12
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

  if (kIsWeb) {
    // initialiaze the facebook javascript SDK
    FacebookAuth.i.webInitialize(
      appId: "YOUR_FACEBOOK_APP_ID", //<-- YOUR APP_ID
      cookie: true,
      xfbml: true,
      version: "v9.0",
    );
  }
25
  runApp(MyApp());
}
28
class MyApp extends StatelessWidget {
  Future<bool> hasUserLogged() async {
    ParseUser? currentUser = await ParseUser.currentUser() as ParseUser?;
    if (currentUser == null) {
      return false;
    }
    //Checks whether the user's session token is valid
   final ParseResponse? parseResponse =
        await ParseUser.getCurrentUserFromServer(currentUser.sessionToken!);

    if (parseResponse?.success == null || !parseResponse!.success) {
      //Invalid session. Logout
      await currentUser.logout();
      return false;
    } else {
      return true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter - Sign In with Facebook',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: FutureBuilder<bool>(
          future: hasUserLogged(),
          builder: (context, snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
                return Scaffold(
                  body: Center(
                    child: Container(
                        width: 100,
                        height: 100,
                        child: CircularProgressIndicator()),
                  ),
                );
              default:
                if (snapshot.hasData && snapshot.data!) {
                  return UserPage();
                } else {
                  return HomePage();
                }
            }
          }),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
86
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter - Sign In with Facebook'),
        ),
        body: Center(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
               Container(
                 height: 200,
                 child: Image.network(
                     'http://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
               ),
               Center(
                 child: const Text('Flutter on Back4App',
                     style:
                         TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
               ),
               SizedBox(
                 height: 100,
               ),
               Container(
                 height: 50,
                 child: ElevatedButton(
                   child: const Text('Sign In with Facebook'),
                   onPressed: () => doSignInFacebook(),
                 ),
               ),
               SizedBox(
                 height: 16,
               ),
             ],
           ),
         ),
       ));
 }

 void doSignInFacebook() async {
   late ParseResponse parseResponse;
   try {
     //Check if the user is logged.
     final AccessToken? currentAccessToken =
         await FacebookAuth.instance.accessToken;
     if (currentAccessToken != null) {
       //Logout
       await FacebookAuth.instance.logOut();
     }

     //Make a Login request
     final LoginResult result = await FacebookAuth.instance.login();

     if (result.status != LoginStatus.success) {
       Message.showError(context: context, message: result.message!);
       return;
     }
147
     final AccessToken accessToken = result.accessToken!;
149
     //https://docs.parseplatform.org/parse-server/guide/#facebook-authdata
     //According to the documentation, we must send a Map with user authentication data.
152
     //Make sign in with Facebook
     parseResponse = await ParseUser.loginWith('facebook',
         facebook(accessToken.token, accessToken.userId, accessToken.expires));
156
     if (parseResponse.success) {
       final ParseUser parseUser = await ParseUser.currentUser() as ParseUser;
159
       //Get user data from Facebook
       final userData = await FacebookAuth.instance.getUserData();

       //Additional Information in User
       if (userData.containsKey('email')) {
         parseUser.emailAddress = userData['email'];
       }

       if (userData.containsKey('name')) {
         parseUser.set<String>('name', userData['name']);
       }
       if (userData["picture"]["data"]["url"] != null) {
         parseUser.set<String>('photoURL', userData["picture"]["data"]["url"]);
       }

       await FacebookAuth.instance.logOut();
       parseResponse = await parseUser.save();

       if (parseResponse.success) {
         Message.showSuccess(
             context: context,
             message: 'User was successfully with Sign In Facebook!',
             onPressed: () async {
               Navigator.pushAndRemoveUntil(
                 context,
                 MaterialPageRoute(builder: (context) => UserPage()),
                 (Route<dynamic> route) => false,
               );
             });
       } else {
         Message.showError(
             context: context, message: parseResponse.error!.message);
       }
     } else {
       Message.showError(
           context: context, message: parseResponse.error!.message);
     }
   } on Exception catch (e) {
     print(e.toString());
     Message.showError(context: context, message: e.toString());
   }
 }
}
203
class UserPage extends StatelessWidget {
 Future<ParseUser?> getUser() async {
   return await ParseUser.currentUser() as ParseUser?;
 }
208
 @override
 Widget build(BuildContext context) {
   void doUserLogout() async {
     final currentUser = await ParseUser.currentUser() as ParseUser;
     var response = await currentUser.logout();
     if (response.success) {
       Message.showSuccess(
           context: context,
           message: 'User was successfully logout!',
           onPressed: () {
             Navigator.pushAndRemoveUntil(
               context,
               MaterialPageRoute(builder: (context) => HomePage()),
               (Route<dynamic> route) => false,
             );
           });
     } else {
       Message.showError(context: context, message: response.error!.message);
     }
   }

   return Scaffold(
       appBar: AppBar(
         title: Text('Flutter - Sign In with Facebook'),
       ),
       body: FutureBuilder<ParseUser?>(
           future: getUser(),
           builder: (context, snapshot) {
             switch (snapshot.connectionState) {
               case ConnectionState.none:
               case ConnectionState.waiting:
                 return Center(
                   child: Container(
                       width: 100,
                       height: 100,
                       child: CircularProgressIndicator()),
                 );
               default:
                 return Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
                       Center(
                           child: Text(
                               'Hello, ${snapshot.data!.get<String>('name')}')),
                       SizedBox(
                         height: 16,
                       ),
                       Container(
                         height: 50,
                         child: ElevatedButton(
                           child: const Text('Logout'),
                           onPressed: () => doUserLogout(),
                         ),
                       ),
                     ],
                   ),
                 );
             }
           }));
 }
}

class Message {
 static void showSuccess(
     {required BuildContext context,
     required String message,
     VoidCallback? onPressed}) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Success!"),
         content: Text(message),
         actions: <Widget>[
           new ElevatedButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
               if (onPressed != null) {
                 onPressed();
               }
             },
           ),
         ],
       );
     },
   );
 }
300
 static void showError(
     {required BuildContext context,
     required String message,
     VoidCallback? onPressed}) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Error!"),
         content: Text(message),
         actions: <Widget>[
           new ElevatedButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
               if (onPressed != null) {
                 onPressed();
               }
             },
           ),
         ],
       );
     },
   );
 }
}
﻿
Find your Application Id and Client Key credentials navigating to your app Dashboard at Back4App Website.
Update your code in main.dart with the values of your project’s ApplicationId and ClientKey in Back4app.
keyApplicationId = App Id﻿
keyClientKey = Client Key﻿
Run the project, and the app will load as shown in the image.
﻿
Conclusion
At this stage, you are able to use Sign in with Facebook in Flutter on Back4app.