Facebook Login Authentication in React Native without Firebase

Introduction :

Many times we need facebook login authentication in our app and mostly we need email Id from facebook account .

We’re gonna achieve that same thing without using Firebase (because firebase can cause more overhead). We will use React Native FBSDK module to get the job done.

Steps to create a app in facebook console

1. Go to facebook console (if you are not logged in through any facebook account do login from any)
2. Go to My Apps (right side page top)
3. Click on Create App Right top
4. Select None (last option ) and click next
5. Provide any appropriate display name
6. Give facebook Password and your facebook app is ready.

Steps to make Project live

This step is important because in development mode app will not have features like login authentication .

1. Go to Basic in settings

1. Provide Privacy policy url and Term of service url (link doesn’t affect much ) and save changes. If you don’t have any you can create online.
2. Toggle this button to make the App live.

Setup Facebook login

We have to enable facebook login to use that same in our project.

1. Go to dashboard and will see something like this mostly

Click on get started and accept everything and submit .

1. Go to dashboard will see this

1. click on setup
2. Go to Android

1. click next
2. Check

mavenCentral()

If it is present then fine else add that in android/build.gradle

1. Add implementation ‘com.facebook.android:facebook-android-sdk:latest.release’ in android/app/build.gradle

1. Click on next
2. Add package name

1. save and continue
2. Now the difficult part to get release key hash

9.1 go to bin folder of java

9.2 open cmd from that folder

9.3 run this

keytool -exportcert -alias androiddebugkey -keystore debug.keystore | “C:\openssl\bin\openssl.exe” sha1 -binary | “C:\openssl\bin\openssl.exe” base64

[ here androiddebugkey is KeyAlias]

[debug.keystore is keystore encrypted file path ,for convenience i have moved debug.keystore file in same directory(inside java/jdk/bin)]

[“C:\openssl\bin\openssl.exe” this is openssl path if you don’t’ have openssl you can download and unzip]

9.4 you will get hash copy that and paste on facebook console

save and continue

10. Make this toggle to “Yes”

save and next

11 . copy given string and paste in android/app/src/main/res/values/strings.xml

like this

12. Do this step [mostly it is done by default]

13. Do this changes

14. Then next and next facebook auth login done

Install required Dependencies

Run “npm i react-native-fbsdk”

Finally integration in app

On top

Helper function

Call heper function like this

<Button onPress={fblogin} title=”fblogin” />

Same way you can add App Event in your app if login doesn’t work

Important links

How to get user info (email, name, etc.) from the react-native-fbsdk?

App not setup: This app is still in development mode

React native - fbsdk LoginManager vs LoginButton

How to get user info (email, name, etc.) from the react-native-fbsdk?

Openssl is not recognized as an internal or external command

https://www.youtube.com/watch?v=2ZyMUROcC2g