React Native Facebook Login?

Table of Contents

Facebook Login for React Native

This guide provides examples of using the Facebook Login Button and Login Manager components in your React Native applications.

To read more about the features available with Facebook login, see Facebook Login for Apps.

Login Button

The simplest way to add Facebook login functionality to your application is to use the LoginButton object from the SDK. When using the LoginButton, all of the complexity of creating a login user interface is handled for you. You specify the permissions that your application needs, and the object notifies you about user actions through attribute-bound functions. To learn more about permissions, see Permissions Overview.

To create a Facebook login for your app, copy the following code into a file called FBLoginButton.js. Note that to use the LoginButton object, you must import the LoginButton class from the react-native-fbsdk module.

import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton } from 'react-native-fbsdk';

export default class FBLoginButton extends Component {
 render() {
   return (
     <View>
       <LoginButton
         publishPermissions={["email"]}
         onLoginFinished={
           (error, result) => {
             if (error) {
               alert("Login failed with error: " + error.message);
             } else if (result.isCancelled) {
               alert("Login was cancelled");
             } else {
               alert("Login was successful with permissions: " + result.grantedPermissions)
             }
           }
         }
         onLogoutFinished={() => alert("User logged out")}/>
     </View>
   );
 }
};

module.exports = FBLoginButton;

To change the publishing permissions, modify the publishPermissions attribute of the LoginButton tag. For a list of available permissions, see Permissions Reference.

When the login has completed, the function you provide for the onLoginFinished attribute is executed. As you can infer from the example, error conditions are passed in the first parameter, and results in the second. A null error state doesn’t indicate a successful login. When a login has completed successfully, meaning that the user has a Facebook account and authorizes your application to access it, then the permissions that they have granted the app are exposed via the grantedPermissions property of the result.

After a succesful login, the view of the text of the login button changes to “Log out” to indicate that clicking on it disconnects your app from their Facebook account.

To add the FBLoginButton class to your rendered view, add the FBLoginButton tag to your render function in the file index.ios.js.

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

var FBLoginButton = require('./FBLoginButton');

export default class YourApp extends Component {
 render() {
   return (
     <View style={styles.container}>
       <Text style={styles.label}>Welcome to the Facebook SDK for React Native!</Text>
       <FBLoginButton />
     </View>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 label: {
   fontSize: 16,
   fontWeight: 'normal',
   marginBottom: 48,
 },
});

AppRegistry.registerComponent('YourApp', () => YourApp);

Login Manager

The LoginManager class is used to request additional permissions for a session or to provide login functionality using a custom UI. Like LoginButton, the LoginManager class is loaded from the react-native-fbsdk module. The example below performs a login with minimal permissions.

const FBSDK = require('react-native-fbsdk');
const {
 LoginManager,
} = FBSDK;
   
// ...

// Attempt a login using the Facebook login dialog,
// asking for default permissions.
LoginManager.logInWithPermissions(['public_profile']).then(
 function(result) {
   if (result.isCancelled) {
     alert('Login was cancelled');
   } else {
     alert('Login was successful with permissions: '
       + result.grantedPermissions.toString());
   }
 },
 function(error) {
   alert('Login failed with error: ' + error);
 }
);

Subscribe to our Newsletter.

Thank you! Your subscription has been added to our newsletter!
Oops! Something went wrong while submitting the form.

Related Blogs.

What is Material Design Lite and what are its advantages?What is Material Design Lite and what are its advantages?
MDL stands for "Material Design Lite". It is a free and open source library used for website's designing and its a look like material design.
SEO with Angular – Angular UniversalSEO with Angular – Angular Universal
SEO is an abbreviation of Search Engine Optimization. Here, you will learn how to do SEO with Angular for a web page.
Difference between Functional and Object Oriented ProgrammingDifference between Functional and Object Oriented Programming
These are two very popular programming paradigms in software development that developers design and program to. Read more to find out.
How to use Font Awesome for your website?How to use Font Awesome for your website?
Font Awesome helps adding scalable and beautiful icons on a web page. Let's teach you how to use awesome fonts for your site.
JQuery: The Write Less, Do MoreJQuery: The Write Less, Do More
jQuery is a (write less or do more) lightweight JS library that simplifies programming with JavaScript. Know more about the benefits of using jQuery in this blog.
Cross Browser Compatibility IssuesCross Browser Compatibility Issues
What is Cross Browser issue? They usually occur in various web applications. Learn to solve these cross browser compatibility issues in this blog post.
How To Add Flash Messages in AngularJS?How To Add Flash Messages in AngularJS?
Is something wrong with adding flash messages in AngularJS? Read this guide to get professional advice.
Angular 4 FORMS ConfusionAngular 4 FORMS Confusion
Many people are often stuck with the Angular 4 forms confusion. But no need to worry because this solution will work for you.
Publish Subscribe patternPublish Subscribe pattern
Nowadays, Web Applications are set to target maximum relevant users as they can. In order to do so, an application must have these qualities.
Dependencies issue when one signal is used with google maps (React native)Dependencies issue when one signal is used with google maps (React native)
Problem Statement: Google maps work fine when used alone but it get dependency issue when one signal is added to the project.
Setup Redis on AWSSetup Redis on AWS
This tutorial will help you in setting up redis on AWS. Follow these steps to configure the redis through Amazon Linux.
Create an Angular modular pluginCreate an Angular modular plugin
How to develop a Modular Plug-in For angular 4? Learn to create an angular modular plugin here.

Contact.

You have an idea? We handle all the rest

Drop us a line.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

USA

500 Grant Street, Downtown, Suite 2900,
Pittsburgh, PA 15219, USA

+1 (412) 475 9053

United Kingdom

Suite A12, 56 Wood Lane, London,
W12 7SB, UK

+1 (93) 606  7875

Pakistan

2 West Canal Bank Road, Lahore 54000,
Pakistan

+92 323 4957725

Project inquiries

hello@phaedrasolutions.com

it’s not about ideas
it’s about making ideas happen
Copyright 2022 - Phaedra Solutions.
All Rights Reserved