Facebook login in Android using React and Expo

Ricky H. Putra
2 min readFeb 7, 2021

--

Many mobile applications today allow users to login with third-party authentication such as Facebook. In today's post, I am going to show you how easy it is to set up and build in Android using React & Expo framework but the idea should be applicable to other frameworks.

Facebook Login
  1. Generate Facebook App ID for your application

Create an account if you have not had so, and go to https://developers.facebook.com/apps/

Choose Create App -> Build connected experiences, fill up the form and you are good to go. You should be able to see your App ID in the app dashboard page. We will need to use this App ID when calling Facebook Login API.

2. Prepare your React Expo project

In Expo docs, refer to https://docs.expo.io/versions/latest/sdk/facebook/ where it explains how to install the package with code example. You should be able to create a simple login page based on the sample code which is basically calling Expo’s Facebook.initializeAsync function (pass it with Facebook App ID created in the first step) and using Facebook Graph API to fetch user info

3. Write the code

In my example, I am using reducer function “useReducer” in React so that I can manage different login states for example after login I want to show welcome message as shown in line 18 in below code snippets.

4. Test login

Once you hook the function with the UI component such as button, you can test it. Upon clicking on the button, it will show login box for you to enter Facebook credentials.

How about logout function? Well, Expo Facebook does have function Facebook.logOutAsync but when I try to login again, it will not show the login box anymore and used the previously entered credentials automatically.

So I decided to call Graph API manually and force delete the Facebook session’s token every time I logout. This allows me to re-enter the credentials.

Hope this article helps you implement Facebook login and logout to your React Native mobile application. Cheers.

Please follow me if you find this article useful, it would motivate me to write more useful articles and helping others to learn. Thank you.

--

--

Ricky H. Putra
Ricky H. Putra

Written by Ricky H. Putra

Leading digitization initiatives in AwanTunai focusing on strengthening Indonesia MSME businesses with technology. Software Dev | Automation | Data Science | AI

No responses yet