Facebook Login Button In React

Key Takeaways

[Music] hey guys being a programmer or web developer or any job at all where you sit all day can do horrible things to your back and your health in general over time so I would definitely suggest looking into a stand sit desk and anthro desk has affordable and quality solutions for maximum health and productivity you can choose from different frame widths depending on your needs I actually just got one myself and I love it they also offer accessories like standing converters and floor mats so check out anthro desk com or click the link in the description below hey what's going on guys so in this video we're gonna get started with Facebook log in our Facebook authentication in react now this is going to be an introductory tutorial more for the beginners to intermediates and react basically we're going to make a button where the user clicks it and we request we request some data and if they allow it then we'll be able to get that data and we can do what we want with it now in this case we're just going to store it in our components state and then we're going to render it in the application and the view now this is a good example if you watched my last video where I talked about taking a tutorial and then adding to it this is a good example because what you could do is you could take that data and do something different you could put it in local storage for example and have your own local logout system because we don't actually want to log out of Facebook through our application you could do that you could implement a back-end and send it to your back-end the data and put put it in your own database you could use something like firebase you could add Redux there's a million things that you could take from this small tutorial and build something bigger alright so what we're gonna do is use this react facebook login so this is the github repo here I'll also put a link in the description and it's pretty easy to use we just install it we bring it in and we can add this here with our app ID which will have to create we'll have to register a Facebook app and then we basically have a callback where we can get the response from and we can do what we want with that response so before we do anything we have to go to developers I spoke comm slash apps whenever you create any kind of Facebook application using their API you need to register it so we're gonna say add new app and you can't have the name face face book or face or book or FB in the display name so I'm just gonna do react social and we'll go ahead and create that and let's put this thing in what is it Raa k what is that an F I'm horrible at these things okay so now what we want to do is we want to choose facebook login because that's that's basically the service that we want to use so we'll say setup and we're using web and then the URL I'm just gonna put localhost and then the rest of the stuff is basically for if you're using the SDK with vanilla JavaScript we don't really need this stuff I do have a video I did probably about a year ago showing you how to implement facebook login or authentication with vanilla JavaScript but we don't actually need any of this stuff so we can just click Next and then the last thing we want to do here is go to settings basic and we want we want to just add in this app domains right here localhost if we don't do that we're going to get an error when we tried a lot when we try to authenticate so let's do that and click Save Changes and now we have our app ID all right so now what we'll do is open up the terminal and we're going to create our react application if you don't have the create react app CLI installed you'll have to install it globally so you have to do is install our I and then dash G create react app okay but I already have it installed so I'm not going to do that once you have that set up you can say create react app and then the name of it which I'm just going to again call react social and that will generate our application or our boilerplate whatever all right so that's all set now what I'm going to do is I'm going to open this up envious code whoops I shouldn't did that I need to actually go into the directory first so let's say CD react social and then we'll do code alright and then from here on out I'm going to use the integrated terminal down here and vs code now if we if we implement this button and we click it it's going to give us a message telling it telling us that it's not secure it needs to be HTTPS so to prevent that before I forget we're going to create a dot env file in oops in the root here so let's say new file and call it dot env okay so this is our environmental file and we're going to just going to say HTTP s equals true and save that ok we'll close that up now we'll go ahead and run our server so we'll say NPM start and that will start our react server and you see how it said generating SSL certificate and now it's going to give us this because obviously we don't really have a certificate so we're just gonna hit advanced and proceed alright so now we have our boilerplate set up so let's go back to vs code and I'm actually going to open up a new terminal I'm gonna let the server run and open up a new one and we want to now install what does it call they think it's react facebook login okay and we're gonna go into source well that's well that's going on and we're gonna create a new folder called components because basically I just want to have a component I'm just gonna call it Facebook it's gonna have the button and it's going to have some state and in that state it'll have an in is logged in and we're gonna check to see if if the user actually went through and authenticated if they did then we'll go ahead and we'll display our state data okay but as I said you can take it further and you can store it in local storage or do whatever you want to do with it so let's create a new file and components and I'm just going to call it Facebook j/s okay so in facebook j/s we're gonna I'm gonna generate a class-based component called Facebook and by the way if you want to do that you can install and vs code it's the es7 react to redux extension you can just do our CC tab and it'll give you a class-based component so in here let's bring in our module our facebook login so facebook login from react facebook login and then we're gonna create some states so let's go above the render and we're gonna have is logged in which will of course initially be false we'll also have the user ID which we'll get from the response that'll be just nothing to begin with so name email and let's get the picture okay so that's our state our initial state now it will do is let's go down here and inside our render but not in the return we're going to initialize a variable called FB content and then what I want to do is check to see if we're logged in so we'll say if this dot state dot is logged in and then else so I'm not going to worry about if we're logged in yet we want to deal with it for not and if we're not we want to go back let's see we want this right here so basically this facebook login with all this all these attributes so I'm going to just copy that and what we want to do is set FB content equal to that and we want to change the app ID to our own so I'm going to go back here and copy that and we'll go ahead and paste that in here and then another thing I want to do is right here the on click and callback methods in the example they had a functional based component we're using a class based so in order for this to work we just need to add this dot like that all right and then what we'll do is go let's go above the render and let's add component clicked sorry if you can hear that banging next door so component clicked and we're just going to use arrow functions here so that we don't have to do like this bind or bind this and I'm just gonna do a console log we're not really going to do anything with component clicked but just to show you that it does work if you want something to happen when it's clicked what we do care about is this one here responds Facebook because that's what gives us the actual data so we'll say response Facebook and that'll give us a response parameter and then what we want to do actually for now we'll just console.log it so you guys can see what it gives us okay so that's all we'll do for now we will be putting it into the state after and then finally down in the return we want to put our FB content like that alright and I guess for now we'll just say FB content equals no and if you notice when I save some things change for instance my single quotes go to double quotes and stuff like that it's because I'm using the prettier extension and I have it set to to auto format when I save alright now that we have that let's go into app dot j/s and let's bring in that component so Facebook from and we have that inside component slash Facebook and then let's change up whoops let's change up this h1 will just say Facebook off example and this sentence here I'm just going to change will say to get started authenticate with Facebook and then our component will go right here okay save that and now if we go back to our application we see our button okay so I'm gonna open up the console here and Chrome and click the button and I'm already logged into Facebook as you can see here so it's not guide we don't I'm not gonna have to oops what happened where'd it go let me just reload this I'm not gonna have to like type in my facebook login or anything because I'm already logged in in the browser so it's gonna basically ask if we want to share name profile picture and email address because that's what we asked for now we could ask for more but that's that those are the only things we asked to share so that's what it's gonna say so let's say continuous Brad and now let's take a look at the console and you'll see we get all this data so the name email ID access token expires in so this will expire in a certain amount of time the ID the picture which is actually an object data object with the height but the URL is what we really want and that's it sign request use your ID so you can do what you want with this information my purpose of this tutorial is basically to show you how to get this and then you know you can do what you want with it but what we're going to do is just store it in state and display it here if we're a law if we're authenticated all right it's more authentication than login so let's go back to our app and let's go to our Facebook j/s and then instead of just console logging a response let's put it into state so we'll say this dot set state and we now want to set la is logged in to true ok because we authenticated and then we'll set the user ID to response ok because it gives us back that response and then dot user ID ok we'll get the name and we'll set that to response dot name email response dot email and picture now picture is going to be response dots picture dots data dot URL all right so now all that stuff is in our state now let's go down to the render and say when we are logged in we're gonna set FB content to a div and inside here let's put actually going to add a little bit of style here so we want double curly braces and in here let's set the width to 400 pixels let's set margin to auto I want to bring it to the middle let's set the background to light gray and we'll set the padding to 20 pixels okay and then inside the div will have the image which will have a source and the source is going to be this dot state dot picture and then it has to have an alt or will get a console error so the alt I'll just do this dot state dot name alright so that'll give us the image now we'll do the h2 so in the h2 let's put will just say welcome and then the name so this thought state dot name and then we'll just put email and we'll say this dot state email okay so if we're logged in it'll show that stuff and that should do it so let's go ahead and save this let's go back and there it is okay so we have the image obviously yours will be from whatever account you authenticate with and that's that now if I were to log out of Facebook and go back and reload now we're not authenticated okay and it's basically just a way to to see who is doing what in your application okay so you'll probably want to store this data if you if you took my no J step2 Express MongoDB dev to deployment course we used Google OAuth and what we did is something like this and then we took the ID and stored it in a MongoDB database and that way the user could log in again and we could see who it is and if they added a story yeah we it was a story books application that user ID was attached to their story we also used passport J s along with the Google OAuth module and there is a facebook olaf module as well so if you wanted to kind of look into that you could now if i if i go to login since i'm not logged in to facebook i'll have to real aughh in here okay instead of just whatever clicking whoops if the wrong password okay so now I'm logged in again alright so I think that's gonna be it guys I know it's a short tutorial I am working on some long-form content for YouTube before I start my next course for instance we're gonna build a subscription-based laravel app that will be a short series I also want to get into some more django stuff some other languages golang and i know i've been doing a lot of react lately but we are gonna be working more with few J s which I personally love as well as angular and as well as you know that this the HTML CSS stuff the the beginner stuff so stay tuned and I will see you next time