Tutorial For React Native App Setup : How to Set Up Facebook Authentication For The App

Let’s Learn Step By Step Process For React Native Application.

React Native is actually great for creating a mobile App with the use of javascript only. In recent years javascript ecosystem exploded and there are a few frameworks that rely on mobile web view to render and execute the application, but now with React Native, apps are totally different beasts.

This unleashes the power of developing native apps in pure js, without compromising performance (because today everything is about performance, right?)

Now let’s start with the process of creating the app

There various boilerplates out there for this like :

hats create-react-native-app
react-native-starter-app
react-native-webpack-starter-kit
react-native-redux-starter-kit
ignite cli
expo cli

For now, we are going to use the init command to React to achieve this

Here are the commands

Command 1 :> npm install -g react-native-cli

This command is used to set up React to native environments.

Command 2 > react-native init projectNameHere

Instead of project name here enter your project name. Please note that you cannot put capital letters, spaces or special character in the command line

Command 3 > cd projectNameHere

Command 4 > react-native run-android (react-native run-ios)

That’s It!!!!!!

Yes, you have understood right this the only process you need to create an app. This would probably take 8-10 min to emulate & your app is ready.

And the best part of using React Native is once your app is built just press Cmd+D you get the developer menu and just click “Enable Hot Reloading” item.

Now you can edit and save the file without waiting for the app to recompile on every single file change. You can make any changes here and they will reflect immediately on emulator ⚡⚡⚡.

If you want to do debugging than follow these steps

Hit Cmd+D in the emulator and click on “Debug JS Remotely“ which will open the new Chrome tab.

In the Source tab, you can see all js files and you can add some breakpoints to debug your code.

> npm install react-devtools –save-dev

In package.json, script section, add “react-devtools”: “react-devtools”.

And just run:

> npm run react-devtools

This will open a separate window where you can see app layout and where you can edit styles and see changes immediately ⚡⚡⚡.

Now let’s move on to our second task. Let’s create a Facebook login For Our App.

To integrate the Facebook login we will require to add the following library.

Facebook Log In Through API Integration

react-native-oauth

The react-native-oauth library provides an interface to OAuth 1.0 and OAuth 2.0 providers with support for the following providers for React Native apps:

Twitter
Facebook
Google
Github
Slack

This library cuts out the muck of dealing with the OAuth 1.0 and OAuth 2.0 protocols in react-native apps. The API Integration is quite easy and straightforward.

Here is the Snippet to create the library :

import OAuthManager from ‘react-native-oauth’;
const manager = new OAuthManager(‘myfirstapp’)
manager.configure({
facebook: {
client_id: ‘YOUR_APP_ID’,
client_secret: ‘YOUR_APP_SECRET’
}
});
// …
manager.authorize(‘google’)
.then(resp => console.log(resp))
.catch(err => console.log(err));

Features

Isolates the OAuth experience to a few simple methods.
Automatically stores the tokens for later retrieval
Works with many providers and simple to add new providers
Works on both Android and iOS
Makes calling API methods a snap
Integrates seamlessly with Firestack (but can be used without it)

Installation

Install react-native-oauth in the usual manner using npm:

npm install –save react-native-oauth

Now let’s see how to integrate this set up in Android

Android setup

After we link react-native-oauth to our application, we’re ready to go. Android integration is much simpler, thanks to the in-app browser ability for our apps. react-native-oauth handles this for you.

Please note that all of the callback URLs follow this particular Scheme: http://localhost/[provider_name].

Make sure this is set as a configuration for each provider below (documented in the provider setup sections).

Make sure you add the following to your android/build.gradle file:

maven { url “https://jitpack.io” }

For instance, an example android/build.gradle file would look like this:

// Top-level build file where you can add configuration options common.
buildscript {
// …
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url “https://jitpack.io” } // <~ ADD THIS LINE
maven {
url “$rootDir/../node_modules/react-native/android”
}
}
}

Creating the manager

In our JS, we can create the manager by instantiating a new instance of it using the new method and passing it the name of our app:

const manager = new OAuthManager(‘myfirstapp’)

We need to pass the name of our app as the OAuth manager uses this to create callback keys. This must match the URL route created in your android app. For instance, above we created a URL scheme for Twitter. Pass this as the string in the OAuthManager constructor.

Configuring The Providers

Providers, such as Facebook require some custom setup for each one. The following providers have been implemented and we’re working on making more (and making it easier to add more, although the code is not impressively complex either, so it should be relatively simple to add more providers).

In order to configure providers, the react-native-oauth library exports the configureProvider() method, which accepts two parameters and returns a promise:

The provider name, such as facebook
The provider’s individual credentials

For instance, this might look like:

const config = {
facebook: {
client_id: ‘YOUR_CLIENT_ID’,
client_secret: ‘YOUR_CLIENT_SECRET’
}
}
// Create the manager
const manager = new OAuthManager(‘myfirstapp’)
// configure the manager
manager.configure(config);

Implemented providers

We are going to work on Facebook provider right now, react-native-oauth and the required keys to pass when configuring the provider:

Facebook (Android)

In order to add Facebook authentication, we require a Facebook app. You can create a Facebook app or navigate to an existing app you can go to Facebook Developer Page

Now find your existing app or create a new application and find the app id. Note down the app Id than, navigate to the Settings panel and find your client_secret.

For Android, we also need to add the app package name.

Also, we need to add the Key hash for development and production mode in the setting of Facebook login

Also, disable the single sign-on on the android.

For Android, you will also need to set the redirect URL to http://localhost/facebook in the

Facebook Login settings.

We’ll need to create a new URL scheme for Facebook and (this is a weird bug on the Facebook side) the facebook redirect URL scheme must be the first one in the list. The URL scheme needs to be the same id as the Bundle ID copied from above:

Back in our application, add the App ID and the secret as:

const config = {
facebook: {
client_id: ‘YOUR_APP_ID’,
client_secret: ‘YOUR_APP_SECRET’
}
}

Authenticating Against Our Providers

We can use the manager in our app using the authorize() method on the manager. The authorize method takes two arguments (the first one is required):

The provider we wish to authenticate against ( Facebook)
The list of options on a per-provider basis (optional)

For example:

manager.authorize(‘facebook’)
.then(resp => console.log(resp))
.catch(err => console.log(err));

This method returns a promise that is resolved once the authentication has been completed. You’ll get access to the authentication keys in the resp object.

Calling A Provider’s API

We can use OAuthManager to make requests to endpoints from our providers as well. If our user has been authorized for the request, we can execute the request using the credentials stored by the OAuthManager.

The makeRequest() method accepts 3 parameters:

The provider we’re making a request to.

The provider we’re making a request to.
The URL (or path) we want to make the request.
Any additional options.

We can pass a list of options for our request with the last argument. The keys OAuthManager recognizes are:

params – The query parameters

method – The HTTP method to make the request with.

Available HTTP methods:

get post put delete head options trace

It’s possible to use just the path as well. For instance, making a request with Facebook at the /me endpoint can be:

manager
.makeRequest(‘facebook’, ‘/me’)
.then(resp => {
console.log(‘Data ->’, resp.data);
});

To add more data to our requests, we can pass a third argument:

manager
.makeRequest(‘facebook’, ‘/me’, {
headers: { ‘Content-Type’: ‘application/java’ },
params: { email: ‘[email protected]’ }
})
.then(resp => {
console.log(‘Data ->’, resp.data);
});

To add more data to our requests, we can pass the third argument:

deauthorize()

We can deauthorize() our user’s from using the provider by calling the deauthorize() method. It accepts a single parameter:
The provider we want to remove from our user credentials.
manager.deauthorize(‘facebook’);
Now you have successfully created a Facebook login for your app. So if a user lands on your app they can log in through Facebook. This the page they will be redirected to when they click on login through Facebook.