Implement Facebook, Instagram, Google and Apple login on existing react app

Question

Right now we have the only login with the phone number (we a reusing firebase). We need to implement a login using those other platforms. I am afraid to implements all sign-in functions. If you have the experience, please help me.

Answer 1

Facebook login in React Native apps

Step 1: Create a basic React Native app

$ react-native init myApp

Step 2: Facebook Developer Console?—?Create your app

The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our React Native application.

Once we finish creating our app, we will go to the Facebook app dashboard and pick App Id from there. It will be required in installing the Facebook plugin in the app

??Step 3: Add your Platforms to Facebook

We need to let Facebook know which platforms we’ll be using (if it’s just web, iOS, or Android).

we just need the Bundle ID

?Step 4: Install the React Native FBSDK to connect your app with Facebook

Install JavaScript packages
Install the react-native-fbsdk package: yarn add react-native-fbsdk or npm install react-native-fbsdk
Finally, link the SDK to configure the iOS and Android projects: react-native link react-native-fbsdk

Step 5: Running Apps
Step 6: Authenticate Users using Facebook

Login

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

export default class Login extends Component {
render() {
return (
<View>
<LoginButton
onLoginFinished={
(error, result) => {
if (error) {
console.log("login has error: " + result.error);
} else if (result.isCancelled) {
console.log("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log(data.accessToken.toString())
}
)
}
}
}
onLogoutFinished={() => console.log("logout.")}/>
</View>
);
}
};

Requesting additional permissions with Login Manager

// ...

import { LoginManager } from "react-native-fbsdk";

// ...

// Attempt a login using the Facebook login dialog asking for default permissions.
LoginManager.logInWithPermissions(["public_profile"]).then(
function(result) {
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
}
},
function(error) {
console.log("Login fail with error: " + error);
}
);

My App.js looks like following

import React, { Fragment } from 'react';
import LoginController from './LoginController';
const App = () => {return (<LoginController/>);};
export default App;

Implement a Facebook login button

import { LoginButton, AccessToken } from 'react-native-fbsdk';
.....(inside render)
<LoginButton
onLoginFinished={
(error, result) => {
if (error) {
console.log("login has error: " + result.error);
} else if (result.isCancelled) {
console.log("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log(data.accessToken.toString())
}
)
}
}
}
onLogoutFinished={() => console.log("logout.")}/>
....

LoginController.js

import React, { Component, Fragment } from "react";
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Button, Image, } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
export default class LoginController extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pushData: [],
            loggedIn: false
        }
    }
    componentDidMount() {

    }

    render() {
        return (
            <Fragment>
                <StatusBar barStyle="dark-content" />
                <SafeAreaView>
                    <ScrollView
                        contentInsetAdjustmentBehavior="automatic"
                        style={styles.scrollView}>
                        {global.HermesInternal == null ? null : (
                            <View style={styles.engine}>
                                <Text style={styles.footer}>Engine: Hermes</Text>
                            </View>
                        )}
                        <View style={styles.body}>
                            <View style={styles.sectionContainer}>
                                <LoginButton
                                    onLoginFinished={
                                        (error, result) => {
                                            if (error) {
                                                console.log("login has error: " + result.error);
                                            } else if (result.isCancelled) {
                                                console.log("login is cancelled.");
                                            } else {

                                                console.log(result);
                                                AccessToken.getCurrentAccessToken().then(
                                                    (data) => {
                                                        this.setState({
                                                            loggedIn: true,
                                                            userID: data.userID
                                                        })
                                                        console.log(data, data.accessToken.toString())
                                                    }
                                                )
                                            }
                                        }
                                    }
                                    onLogoutFinished={() =>
                                        this.setState({
                                            loggedIn: false,
                                            userID: ''
                                        })
                                    } />
                            </View>
                            <View style={styles.buttonContainer}>
                                {!this.state.loggedIn && <Text>You are currently logged out</Text>}
                            </View>
                            {this.state.loggedIn && <View>
                                <View style={styles.listHeader}>
                                    <Text>User Info</Text>
                                </View>
                                <View style={styles.detailContainer}>
                                    <Text style={styles.title}>ID</Text>
                                    <Text style={styles.message}>{this.state.userID}</Text>
                                </View>
                            </View>}
                        </View>
                    </ScrollView>
                </SafeAreaView>
            </Fragment>
        );
    }
}

const styles = StyleSheet.create({
    scrollView: {
        backgroundColor: 'white',
    },
    listHeader: {
        backgroundColor: '#eee',
        color: "#222",
        height: 44,
        padding: 12
    },
    detailContainer: {
        paddingHorizontal: 20
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        paddingTop: 10
    },
    message: {
        fontSize: 14,
        paddingBottom: 15,
        borderBottomColor: "#ccc",
        borderBottomWidth: 1
    },
    dp: {
        marginTop: 32,
        paddingHorizontal: 24,
        flexDirection: 'row',
        justifyContent: 'center'
    },
    engine: {
        position: 'absolute',
        right: 0,
    },
    body: {
        backgroundColor: 'white',
    },
    sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
        flexDirection: 'row',
        justifyContent: 'center'
    },
    buttonContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
        flexDirection: 'row',
        justifyContent: 'center'
    },
    sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
        color: 'black',
    },
    sectionDescription: {
        marginTop: 8,
        fontSize: 18,
        fontWeight: '400',
        color: 'black',
    },
    highlight: {
        fontWeight: '700',
    },
    footer: {
        color: 'black',
        fontSize: 12,
        fontWeight: '600',
        padding: 4,
        paddingRight: 12,
        textAlign: 'right',
    },
});

Step 7: Test your app on Android

react-native run-android