React Native — Login with Facebook
Tags: reactnative, facebookgraphapi, facebooklogin, expo
Published: 2020-01-12 14:37:23

---
title: React Native — Login with Facebook
published: true
date: 2019-10-06 19:20:52 UTC
tags: reactnative,facebookgraphapi,facebooklogin,expo
canonical_url: 
---

### React Native — Login with Facebook using Expo

![](https://cdn-images-1.medium.com/max/300/1*DTEc0XyMSIWZvaanu9v8cA.gif)<figcaption>ReactExpoFacebookAuth</figcaption>

React native is very popular these days when it comes to hybrid mobile apps development. This article will help you to integrate [Facebook's Graph API](https://developers.facebook.com/docs/graph-api/) in your native mobile app using [React Native](https://facebook.github.io/react-native/) with [Expo](https://expo.io/).

> Expo is a set of tools and services for building, deploying, and quickly iterating on native iOS, Android, and web apps from the same codebase.

#### 1. Install Expo CLI and create new project

First thing you need to have Expo CLI installed globally on your development machine. You can install it by using npm command :

```
**npm install -g expo-cli**
```

After installing Expo CLI create a new project using command:

```
**expo init ReactNativeFacebookAuth**
```

Expo CLI will ask you to choose between templates, choose ‘blank’ under the Managed workflow section. Expo CLI is now initializing a new project: it copies a basic template and installs react, react-native and expo. When the project is initialized and ready to go, the command will exit.

#### 2. Setup Facebook App

Go to [https://developers.facebook.com/apps/](https://developers.facebook.com/apps/) and sign up if you have not yet done so. You will see below screen,

![Facebook developers — Add new app](https://cdn-images-1.medium.com/max/1024/1*Xggh131iOZZVQQOFwTE_JA.png)

Create a new app and add your details as below,

![Facebook developers — Create new app](https://cdn-images-1.medium.com/max/1024/1*ozZiKkaGDqIxoYa6Q849dg.png)

This will create a new facebook app. Then go to **settings \> Basic** in the left panel. Scroll down to the page and click on Add platform and select Android.  
 Add rRW++LUjmZZ+58EbN5DVhGAnkX4= as an Android _key hash_.

This is it, you are now ready to write a code to integrate your facebook app into your react native app.

You can more information on Facebook integration for Expo apps at below link,

[Documentation](https://docs.expo.io/versions/latest/sdk/facebook/)

#### 3. Add Facebook to the application

Below command provides Facebook integration for Expo apps.

```
**expo install expo-facebook**
```

**Write a code to integrate Facebook**

{% gist https://gist.github.com/RishikeshVedpathak/b1a4e081bcbcecefb466f0b4f68c41fc.js %}

#### 4. Understanding Facebook API

Make a note of below method,

```
await Facebook.logInWithReadPermissionsAsync('712635261226351', {
 permissions: ['public\_profile'],
});
```

**_Facebook.logInWithReadPermissionsAsync_** method prompts the user to log into Facebook and grants your app permission to access their Facebook data.  
Permissions is an array specifying the permissions to ask for from Facebook for this login. The permissions are strings as specified in the [Facebook API documentation](https://developers.facebook.com/docs/facebook-login/permissions). The default permissions are ['public\_profile', 'email'].

It returns { type: 'success', token, expires, permissions, declinedPermissions }

1. If the user or Facebook cancelled the login, returns { type: 'cancel' }.
2. token is a string giving the access token to use with Facebook HTTP API requests.
3. expires is the time at which this token will expire, as seconds since epoch. You can save the access token using, say, AsyncStorage, and use it till the expiration time.
4. permissions is a list of all the approved permissions.
5. declinedPermissions is a list of the permissions that the user has rejected.

See below output screenshots for reference,

![](https://cdn-images-1.medium.com/max/270/1*7qzCSmdapLqGZ44rnNjQfg.jpeg)

![](https://cdn-images-1.medium.com/max/270/1*2ztpHpaOhiC23gXDdXKq4A.jpeg)<figcaption>React Expo Facebook Auth</figcaption>

#### Conclusion

We have successfully created a react native app(with Expo) which allows user to login using their Facebook account. You can find the final code in the GitHub repo,

[RishikeshVedpathak/ReactNativeFacebookAuth](https://github.com/RishikeshVedpathak/ReactNativeFacebookAuth)

I hope this will help you to understand and encourage you to freely use facebook’s graph API with react native. Please feel free to give feedback and suggestions!

### And more...
- Check [Hybrowlabs](https://hybrowlabs.com/react-js-dev-outsourcing) for React app development services.