How To Implement Login With Facebook In React | Fix It With Ankit

hello everyone welcome to this video in this video we'll learn how we can Implement working with Facebook and react so let's get started [Music] so here you can see I have a react app created so this was created with npx create react app and now we'll use this package that is called react.js social login to integrate login with Facebook to our react application so let's go ahead and install this package so here I am on my vs code I'll just open the new terminal here and we'll just type in this command that is npmi the act as social login and react social login buttons so we'll need these two packages to integrate login with Facebook so I'll just install this so while this is being installed let's just go ahead and create a Facebook application so for that we'll have to go to the browser and we'll have to go to this website that's called developers.facebook.com I'll provide all the resources in the description so here we'll just have to go to create app and we'll select consumer and click on next and in the display name what we'll do is we'll just type in display name of our application so I'll just type in react demo make sure that you don't include the trademark of any other company here so I'll just click on create app and it asks me for my password so I'll enter my password we'll just need the app ID so we'll just copy this and we'll use this later so let's go to the so let's go to the react application and start the integration so I'll just go to vs code and here I'll just clear the code that we already had so I'll remove all of this and we'll also remove these logo and CSS as well so now we'll need to import two things the first one is login social Facebook from reactive social login and the second one is Facebook login button from react social login buttons so so I'll just add in a component called login social Facebook and inside of this as a child component will add in a Facebook login button now the login social Facebook takes in some props so the first one is app ID so I'll just type in app ID and will leave it empty for now the second drop that it will take in is one result [Music] which is a function so it will give us a response [Music] now will this console lock the response for now and the third prop that it will take is on reject so I'll just type in on reject which will also be n function so it will return an error and we'll just block the error here now let's go ahead and get the app I so I'll just go back to the Facebook developer page and here I'll just copy this ID and just paste it in here now I'll just save this now let's see if the app is compiled or not yes it is successfully compiled so let's go to the browser and check if it is working or not so I'll just go to the browser and here we can see we have a login with Facebook button so I'll just click on this button and here it says that react demo is requesting access to your name and profile picture and email address so I'll click on continue as Ankit so now here we didn't see any difference right so let's go to the console and check if the user was logged in or not so here we have an object so inside of this we have data and inside of that we have all the details of the user so that means we were successfully locked in so now let's display the user details if the user is logged in and only show this button if the user is not logged in so let's go ahead and do that so for this let's store the response in the state so I'll just create a new state call it profile profile and set profile which will be a used state which will be null in the beginning now what we'll do is we'll just do set profile and response dot data foreign [Music] and we'll pass in the response.data to it so that the response data is stored in this property that is called profile now we'll have to wrap this component inside of a div so what I'll do is I'll just create a new div here and just put it in inside of this foreign [Music] logic to check if the profile exists or not so let's say if the profile does not exist that means we'll have to add an exclamation mark here if there's no profile then show the login social Facebook and if there is a profile then don't show anything so I'll just add in an empty string now this part is done now let's go ahead and create another part where we'll show the user details so we'll just type in this one so if we have the profile then we'll show the profile dot me and will show the profile.picture.data.url so I'll just save this and if we have the profile we'll show the profile dot mean and we'll show the profile.picture.data.url and if we don't have the profile then we'll not show anything [Music] foreign [Music] we won't show anything we are missing a div here so we'll just add in a div and now if we save this now let's go ahead and import the use state from react so I'll just import it at the top [Music] from react and just save this and we can see the application was compiled successfully so let's go ahead and check if it is working as expected or not so I'll just go to the browser [Music] and clear this console [Music] so I'll just click on this login with Facebook button now and it got logged in and we have the name of the user and we have the profile picture of it successfully now like most applications if your react application has a backend that gives you a GWT token to authenticate a user then what you can do is you can use this access token in the back end and try to fetch the user details using this access token from Facebook now if you find the same email ID in your local database then you can generate a GW token for that user and if you don't find a user in your local database then you can create a user in your database using the details provided by the Facebook API and then send in JWT token to the front end so this way you will be able to authenticate your application so this was all and how to implement login with Facebook in react hope you like the video if you got value from this video do hit the like button and for more such insightful content do subscribe to this channel thank you for watching [Music]

Channel: Fix It With Ankit

Views: 21,697

Keywords: facebook, facebook login, facebook login react, facebook login sdk, react facebook login, facebook login react js, facebook login localstorage, facebook clone in react js, facebook clone using react, react login with facebook, autenticación facebook, node react login with facebook, login facebook react js, react js facebook login, facebook auth, login with facebook, mern stack login facebook, react facebook auth, react facebook, login facebook, Fix It With Ankit

Id: 8m1M3AW5bBE

Length: 8min 44sec (524 seconds)

Published: Mon Nov 14 2022