Facebook Login In React Native | Expo

-







React native is a hybrid mobile app development platform that enables you to use your application in android, ios as well as web. so code once and use it anywhere and In this article, we will configure how to make Facebook authentication in your react native application using Facebook Graph API with Expo.

"Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase."


Requirements

Expo account
Facebook developer account
Your Expo project setup


Step 1: Create an expo project
 Create an expo project and install the expo-facebook library by following these command below:-
expo init Login_Social
cd Login_Social/
expo install expo-facebook
expo start


Step 2 Get Facebook kay hash - To get this you have to sign in to your expo account on your terminal or if not have to create a new one and type the command given below.


expo fetch:android: hashes
If you not have credentials type expo credentials: manager and follow mentioned below screenshot.





Step 3 Create an app on https://developers.facebook.com/ Once you get the hash key copy that one and create your Facebook developer account after that create a new application that you want to connect, fill in all necessary details about your application like name, package name icon, and follow mentioned below. and copy that hash key and Go to Settings => Basic = > Add Platform => Android or as you want.













Paste that hash key and save changes and copy AppID for your application code which you need for login initialization.


Step 4 Make changes to your navigation or files: just type and follow the code below to complete a login authentication using Facebook with the expo. after fetching the user's data it will return you response object (user profile).






So finally we configured Facebook login in react native using Expo you can get code repo in my GitHub the link below:-


https://github.com/ShivamNamdeo/facebook-login-expo










Comments

Post a Comment

Popular posts from this blog

Factorial of the "N" natural numbers using recursion and iterative method in CPP language

-
Image
In this post, I am gonna show you how to find factorial of N numbers using recursion and as well as iterative approach, Here is the video clip of recursion that will visualize that how the recursion work.    Here's the code below in this code I have used input.txt and outout.txt for input-output purpose. and you can also use the code below and visualize using the recursion visualizer tool using this link https://recursion.now.sh/ Recursive approach It will take one integer value to find out the factorial and in this, we will take the first base condition, where the recursion will stop and we will get our final answer, and second which will create the stack size of the given number. Iterative Approach For the iterating approach, we just have to iterate the one variable "i" until we got the last number "n". and parallelly multiplying it with the "fact" variable which we have declared as "1" before.
Read more

Solution for "Developer Error" In React Native Google Authentication

-
Image
  " Developer Error " In React Native Google Authentication So in this post, I am gonna show you how you will figure out the developer error in react native google authentication like this is a common error while you start learning about google authentication so make sure anything you are doing of installing any type of dependencies must follow the whole documentation properly because this is the major issue while start learning new technology or something other you are doing is your project so let's start about this topic. Dependencies For RN >= 0.60 please use version installed from @react-native-google-signin/google-signin yarn add @react-native-google-signin/google-signin For RN <= 0.59 use version 2 installed from react-native-google-signin yarn add react-native-google-signin Make sure you properly installed this dependency in your project follow this documentation link below https://github.com/react-native-google-signin/google-signin So this error is shown to ...
Read more

No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs,

-
Image
Just got a solution to an error which I was facing for the last 2 days, It was really a bit mistake which I was doing but now resolved,  I was trying to send a SMS from Twilio API  // const app = express();  const express = require('express');  app.use(cors()); <<<<< // if you just comment on this above line you get the same error mentioned below, I have set upped react server/website on 3000 port and express server on 4000 port. so the website sends a post request running on 3000 port to the server on port 4000 mechanisms called cross-origin request. // Access to fetch at 'http://localhost:4000/api/send-sms' from origin 'http://localhost:3000' has been  blocked by CORS policy: Response to preflight request doesn't pass access control check:  No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CO...
Read more