React Social Login with Passport.js | React oAuth w/ Google, Facebook, Github

hello my friends today i'm gonna show you social media authentication using react and passport.js we will have this home page and we are not allowed to reach any post here unless we are logged in so it's gonna redirect me to the login page and i can log in using these social media buttons you will see how easy to do that using passport desk and moreover we will be using sessions so even if i refresh the page we will be still logged in and you can add other applications like twitter spotify steam solo ok if you want to see more tutorials like this please like the video and subscribe to the channel if you are ready let's get started okay we have a client folder here and inside i created my react application as you can see we have only app.js here and inside we have this text let's see okay that's all so we are gonna start with design part of course you can directly skip to passport.js part but i recommend you to watch here that because it can be a little bit confusing if you don't know which components we are using and where they come from so let's start firstly we are gonna have a number here it's gonna include our logo and user information or a login button and after that we are going to have a home page it's going to include three cards here and when i click those cards we are going to go to pause page let's do that quickly i will come here and create two folders first one will be pages and second one will be components number is gonna be a component so i'm going to create this here i will say now about.jsx okay let's create our function and i'm going to write here number and i'm going to call this here let's say number okay as you can see it comes from components if i save it's gonna be here i have some so how we are gonna handle styles i will come here and create just one style file app.css i'm not going to separate them we can use this only here so i will say import app.css okay let's come here and let's give class name for this it's going to be naver let's create our logo it's going to be span and i'm going to say lama app like that let's give class name logo and after that i'm going to create ul list here and class name will be list and inside this list we are gonna have three items first one will be let's say ally and list item and it's gonna include user avatar so i will say image and class name like that and second one will be user name list item and let's say john doe we are going to change it and list item logout button like that let's open up app css and give some style for them let's open up here so we can see better okay for the main container number i will say hide 50 pixels and background color will be this color which is kind of purple and text color will be white let's see okay something like that so let's make them horizontal display flags and align item center i'm gonna give some space from left and right but firstly let's take care of this list i wanna make it horizontal also so i will say list display flex align item center and i'm gonna delete those dots so i'll say this style none okay perfect as you can see we don't have any image yet but let's give some space between them so if i come here and say justify content and space around are going to be like that let's give some space between those items list item and margin right 20 pixels and i can increase font weight 500 okay nice and cursor pointer so we can click them we can give this click effect so okay let's give image for avatar for the source i'm gonna paste my image here like that it's not important that because we are gonna take this image and this name from our social media accounts but for now we are gonna use this as you can see it's really big so i will say avatar with 32 height 32 and i want to make this circle like that and let's say object fit cover okay awesome let's increase this logo before this list i can write it here so i will say logo font size 20 and front face will be bolt okay it's much better and that's all let's create our homepage i can close here and let's close here also and i'm going to come here and create my page it's going be home.jsx and let's say home here and i'm gonna use after never of course we should import like that so let's come here and give a class name it's gonna be charles hall so what i'm gonna do is i'm gonna create three cards here and each one is going to include title image and some description so to make this easier let's create a data dummy data so we can use them quickly so i will say data.js and inside i'm gonna paste my items as you can see we have three posts each one has title image description and long description we are gonna use it for home page and use it for post page so let's use them i will say posts okay it's not coming we should import this manually so i will say import posts from data okay right now i can map through this data we are going to use each of them so i will say map and for each post so let's create here our card component i will say card.js or jsx i will quickly initialize my card component and i'll say card and let's call it here let's see as you can see we have three cards here so basically i can pass my data as a prop so i will say post equals post so right now i'm able to take this post here as a prop i use it here let's say for example post and title as you can see post and description they all are here have some but there's an important thing if you are using map don't forget writing here a unique key and it's gonna be our post and id remember we have unique ids here we can use them okay by the way don't forget this class name we are going to use it later but let's create our card first i will delete here and i'm going to create s pen and it's going to be title title or card title whatever you say and that's right here post dot title and after that we are gonna have image and class name will be image and source will be post dot image and we have description so we can use p attack here and i will say description and i'm gonna write here post dot description and finally i'm going to create a button i will say cart button and let's say read more okay let's save and see okay we have title image description and button here okay i have some let's give some style i'm gonna open app css again here and firstly let's give a size for this card card component i'm gonna close here okay we didn't give any class name here let's give it's going to be cut so i will say with 30 percent and if i come here and for image i will say with a hundred percent so basically our card will be thirty percent of the parent and image will be a hundred percent of its parent which is cut let's see i will save here okay something like that and remember this is our homepage and remember our home class name i will come here and say home display flags to make them horizontal like that i will give some padding from top and bottom and from left and right like that okay they are to close each other let's separate them i'll say justify content and space between okay awesome for the responsive design i will come here and say display wrap sorry flex wrap and it's gonna be wrap so for those cats i can give padding also like that but we cannot see our container to see that you can give border color here or you can give box shadow so if you search for any box shadow generator you can arrange your box shadow here like that spreads blur it's totally depends on you and after that you can just copy here and paste for your style file i've already done that so i'm gonna paste it here like that let's see and it's gonna be like that as you can see we have box shadow and i'm gonna give border radius here for the radius is gonna be 20 pixels okay as for this image they are going to be same size so i can come here and say hi to hundreds for example and objective will be cover like that let's give some margin from here and here from top and bottom so i will say margin 20 and 0. okay perfect what about this description that's right here quickly description text color will be this dark color i will give margin bottom and line height is going to be 25 pixels let's take care of this button cards button i will delete border for the radius 10 pixels background color will be again this purple color but darker one like that let's keep padding okay let's make this font color white and font weight will be bolt let's say cursor pointer also and that's all i have so so when i click one of them we are gonna go to post page of course we are gonna do this by using react router dom but for now for just the design i will come here and change it with post but we don't have yet let's create pages i will say post dot js post and i will come here and change this home page it's gonna be possible okay so let's change this it's gonna be container let's say post it's gonna include image post image we are gonna have title post title p for post description and remember we have one more description and it's going to be post long description of course we are going to fetch data using our data js here but we cannot do that right now because we are not using react router dom right now but basically when we go to post and let's say one or two or three we are gonna see those items according to this item id let's take just one of them we are gonna change it later so i'll say post equals i'm gonna import these posts from data so i'm gonna get just one of them let's say two and i'm gonna use them here for image it's gonna be pause dot image for h1 pause dot title description and long description okay like that let's give style quickly app.css i will come here and i will say post for the container i will center them first so i will say display flex flags direction column in this case they are going to be vertical and if i say align item center they are going to be centered like that what about this image i will say with a hundred percent height let's say pixels like that let's give object fit okay and i'm gonna give a space here margin bottom 20 pixels okay what about description post description i will give padding from left and right like that font size will be 24 front which will be thinner and color will be gray like that let's give merging here matching top 50 yeah so for long description i will do this similar thing post long description padding a hundred but if i do that this space will be really big so i will say padding top just 50 and let's say font size 18 and line height will be 24 pixels like that so we have only login page let's create that also i will close everything here i will come here and for pages i'm going to say login.js i'll say login for the app page i will delete this and i'm gonna say login okay we are gonna use some icons social media icons so i will say image folder i'm gonna move my images as you can see we have three icons we are gonna use them soon so firstly i'm gonna add here a title so h1 tag login title choose your login methods and after that let's create a wrapper it's gonna be a box which includes our inputs and buttons but firstly i'm gonna split this box into two pieces left side and right side left side will include voicing media icons and right side will include normal inputs so let's say left and right and inside left let's create our buttons so i will say login button firstly we are going to import our images here let's say import google from image and google png i will do the same thing for others facebook and github let's make them lowercase okay we can use them right now i will say image and icon class name and source will be google and it's gonna include a text which is google and i'm gonna duplicate this deal like that it's gonna be facebook and github okay they are here icons are here also but we can't see them that because they are white also and what i'm gonna do is i'm gonna give an additional class name here it's gonna be google facebook and github i'm doing this that because we are gonna give different background colors for each item so what about right sides i will come here and i'm gonna create input and placeholder let's say username and one more is gonna be passwords and finally a button and i will say submit like that let's make them horizontal i will open app.js here sorry app.css and i'm gonna write here login first remember it's our main container oops i didn't give it's going to be lucky okay firstly let's give a height here what i'm going to do is giving 100vh height but if i do that it's going to overflow here that because we have a number to prevent this i will say height and calculate is going to be 100 v h minus 50 pixels which is our nail bar height okay after that let's enter our wrapper display flex align item center justify content center oops okay i didn't save here okay awesome so what about wrapper let's say with 60 percent height 75 percent and if i give box shadow again exactly the same box shadow it's going to be like that of course we are gonna take care of this title but first let's make this comment out we can see better our wrapper right now after that we are gonna give position absolute for this title and it's gonna be showing up here so let's enter those items i will say display flex and align item center also i can give both the radius here but as you can see left and right sides are too close to fix that i will write here left and right and they are going to be flags one half of this dropper is left side half of this dropper is right side i will make them vertical so i will say display flags flags direction will be column column and a line item center okay perfect so i can give one more item here it can be so we can write here or and it can be a circle so it will look better i think so after this left side i'm gonna create one more div and it's gonna be center and it's going to include a line i can write yourself close and one more do and it's going to be or you are going to understand better right now so if i come here and say center height a hundred percent and i'm gonna center everything okay we are gonna give border for this or text and our line is gonna be like that from top to bottom i will say or border to pixels solid and gray actually light gray as you can see let's make a circle for the radius 50 pixels and i'm gonna give some padding padding time okay let's say color gray and background color white i will make this font weight bolt okay house so what about this line let's create it here line i will say with 0.5 pixels right 70 percent because remember center is 100 percent so it's gonna start from here and end somewhere here let's give background color it's gonna be light gray also so how i'm gonna center this it's gonna be under this ore to do that i can use position and if you are using position absolute the parent should be position relative and i'm gonna center this to do that i'm gonna use top bottom left and right and they're gonna be zero and if i say margin auto it's going to be centered like that but as you can see it's on this circle to prevent this i will say here that index and minus one so it's gonna be under this circle awesome so let's take care of our social media icons buttons so remember login button here this will be 150 i will give padding 15 and 25 i will do border radius just 5 pixels and text color will be white we are gonna change background colors according to these class names let's do that for google i will say background color and it's gonna be this color i will duplicate this for facebook and github it's gonna be this blue color and it's gonna be black let's see so let's make them bolt font weight and we can center them so i will come here and display flex align item center font weight bolt okay i will give my gym button and let's take care of our icons remember our class name is icon here so i will say 20 20 and margin right pixels like that i have so what about those inputs let's say 200 pixels i will give padding 15 and 25 pixels maybe 20 it's too big okay margin bottom 20 like that and this submit button 200 background color will be purple and font color will be white font weight will be bolt like that let's play this border and give some padding border will be known and padding will be 15 and again maybe border radius okay perfect so what about this title what was the name let's see i'm gonna open this again and i will choose this i will say position absolute and if i say top 150 it's gonna be here let's change this color it's going to be light gray and perfect so we finished our design let's install react root rhythm and let's take care of rooting here i will make this larger and i'm gonna open new terminal here and i will say cd client and if you are using npm npm install if you are using yarn yeah i'm at and react router dom as you can see real quick dom just released the version 6. so there are some differences between version 6 and 5. let's see what we have i will say installation and as you can see we are still using browser router and the main difference is we are not going to be using switch anymore instead we are going to use roots as you can see we are gonna wrap our roots with this component and inside our roots we are gonna write here elements and our component let's copy here actually first let's copy here let me showing this and let's close everything and open our app.js okay i will import this and other components firstly we are gonna wrap our application with this component browser router after that we are gonna use routes to wrap our routes so let's delete here and write roots okay remember it was switch in the version 5 right now we are using roots and we are going to use this component here and in the version 5 we were writing like that root and this component between them but here in the version 6 we are not going to do that instead we will write here our path first the home page and elements will be the home page component like that let's do the same thing for others for login it's going to be login page for post and we are going to use a parameter for each id so i'm going to write it like that and my element will be paused let's try i can close here i will refresh the page as you can see this is our home page if i write here login it's going to open up login page if i write here post and any parameter it's going to open this page you can change here but what i'm gonna do is creating here a user variable const user and let's say first false of course we are gonna take this after login process but for now i'm just trying to teach you how we are using new routes in the version 5 we were using redirect components to use any condition but this time for version 6 we are gonna use navigate component so how we are gonna do that if we have a user there is no sense to see this page again and same thing for products if there is no user they are not gonna see this page our posts will be kinda premium and to see them they should be logged in so how we are gonna do this let's delete here and write our condition i will say if there is a user navigate to home page to home page like that if there is no user use login page like that let's see we don't have user right now but if i turn to true and if i try to go to login page it's gonna redirect us to home page so i can do the same thing for this route i will copy here so i will delete here and i'm gonna say if there is a user we will be able to see post page if there is not it's going to be a question mark of course if there is no user we are going to navigate again like that and we are going to say to login page okay we have a user right now we can visit posts like that but if we don't have any user let's say false as you can see login page let's try again post as you can see awesome it works so one more thing we need to know about react route to them and they're to be links of course you can use anchor tech but if you are using react router dom i recommend you to use link component how we are going to do this let's open number for example for this logo i'm gonna use a link so let's copy this and let's say link as you can see from react router dom and between them i will say lama app and i will say to home page i'm in the login page right now as you can see its style is different i will click and we are going to home page but it looks really strange let's take care of this style so i will say class name and it's gonna be link i will open app css and here i will say color inherit so it's going to inherit from its parent and text decoration will be no basically we are going to remove this underline and it's gonna look like the previous one so what else i can do right now we have a user here i can use this user here i will pass this as a prop so i can use it here basically if we don't have any user we are not gonna show those items instead i'm gonna write here a login button so let's come here and give a condition i will say if there is a user we are going to use some elements if there is no we are going to use different elements so let's move this after ul like that and if there is no user i'm gonna create here a link and i will say login and basically we are gonna go to login page let's make this login also sorry link also okay as you can see we don't have user we are seeing this page if i click we are going to login page but if we have a user let's make it true we are going to see those user information and logout button awesome it's that easy so i can do the same thing for these cuts let's open card component and here i'm gonna use link and class name will be link and to post but we should decide which post id we are using so i will come here and say backtick and post and i'm gonna write here post dot id i will hold over one of them oops we can't see it okay i didn't cover like that okay we can see our pointer right now and as you can see on the left bottom it's post one pause two and pause three if i click we are gonna go to this page okay and finally let's take care of this page if you remember we are using this pose directly so how we are gonna do this dynamic i want to take this post id and filter my posts array here and we are gonna reach the actual post there is an awesome hook we can use it so i will say const location and it's gonna be use location hook and let's see what we have here console.log and location of course there is no post right now so i will comment them out and let's open our console let's expand this and console and as you can see there is an object here we have path name here so basically we can use this path name and we can split this string by using those slashes and we can reach this number let's do that i will say const path and it's going to be location dot path name this name and i'm gonna split this using slash so it's our second item zero one two so we are gonna reach this number so let's filter our item so i'm gonna say post and it's gonna be posts dot filter actually we can find track this so i'm gonna say find and i'm gonna write here my condition if p dot id equals this path if i do that it's not going to work that's because this id is a number but this path is a string to prevent this i'm going to write here two string methods and we are gonna reach our post so if i open here again and let's try as you can see they are here if i go to another cards paused one awesome it works as you can see react to tridom is that easy there is nothing complex so we finished our design and routing process so how we are gonna log in using social media accounts so to do that we are gonna use passport.js as you can see it's an authentication middleware for notches and it's express-based web application so it means we are gonna create an express server so i'm gonna create one more folder here let's close this client site so i will say backend and let's come here i will open up backhand and i'm gonna install my node application first npm and init dash y so it's gonna create our packet json here let's see okay it's ready let's create our main js file it's going to be index.js we are going to create our application here but we need couple libraries i will clear here and it's gonna be yarn at firstly we are gonna have express server passport.js we are gonna use course library it allows us to make requests from any client server in this case is going to be our react app and we are going to use nodemon and cookie session let's create them and i'm going to explain everything to you okay it's ready let's create our express app i will say const express is gonna be require and express so how we are gonna create our app it's really easy anything we should do is writing here express function and if i come here and say app dot listen and we are going to write here our port number let's say 5 000. and after connection i'm gonna write here something console.log server is running let's see i will come here and say node index.js and server is running but if i make here any changes when i save it's not gonna appear here to prevent this we are gonna use nodemon and let's write here nodemon and index.js and of course it's gonna be start in this case if i say here npm start or yarn start is gonna listen our application oops i said star is gonna be start okay as you can see it's listening our application so whenever i change anything in my application it's gonna automatically refresh the app now so then we click any of those buttons we are gonna see a model here it's gonna come from google facebook or github and when we authenticate they are gonna give us session cookies so even if i refresh the page our user still will be here to do that we are gonna use sessions so i will say app.use and cookie station and let's write here name station of course in an object and keys you can create an emv file and create your private key but i'm just gonna write here llama it's not that important and max h it's gonna be one day so basically we can calculate it like that it's gonna be one day and after that i'm gonna initialize my passport library so let's say app and use passport and initialize and finally we are gonna use passport and station okay let's use course i will say app.use it's gonna be course i'm gonna write my configuration firstly let's write our client server it's gonna be http localhost and remember we are using 3000 for the react app and we can write here our methods it's going to be get post put delete or whatever it really doesn't matter for this tutorial and i will say credentials and it's going to be true it basically allows us to send stations through our client server requests so let's create our first authentication method and it's going to be google authentication so you can come here and search for any strategies as you can see there are many of them you can log in with facebook twitter google local by using your inputs github steam azure spotify there are tons of things here so let's write here google and as you can see it's the most popular one let's use it we are gonna need one more library let's install oops something is wrong by the way course is not defined okay let's import const course require and course so let's open one more terminal i know it looks really small but let's say cd backhand and yarn at this library if you are not familiar with passport.js it can be a little bit confusing the way of using this library might be a little bit weird for you but don't worry just follow the tutorial and try to create your own app using this tutorial and in this tutorial we are not gonna use any db we are not gonna use jwt if you watch my other tutorials you can combine them with that it's just gonna be a quick crash course okay as you can see we are gonna use google strategy here we are gonna need a client id and client secrets how we are gonna get that so if you go to console.cloud.google.com you are gonna see this page of course after activating your user information and here we are gonna use credentials and we are gonna create o alf client id but before that you should create your application and consent what google needs and after that you can come here and create your public and private id i will say application type web application okay i'm not going gonna change it and here i'm gonna create my authorized redirect uris what does it mean when i click this button the model is gonna show up and when i log in via google or facebook or github we are going to redirect to home page here and also we should redirect to some url using our backend server so we should write both of them so i'm gonna write here http localhost and three thousand and also http localhost 5000 and let's say off google and call back you can write whatever you want but password just prefers to be writing them like that so we are gonna use our callback url like that okay let's create and as you can see we have a client id here and secret id let's copy them and here i'm gonna create one more file it's gonna be passport.js and let's say const google client id is gonna be this id of course you can create an ema file here and use this api key there but i'm not gonna do that and const google client secrets but if you are deploying your application i highly recommend you to use emv file by the way and our secret key okay so let's use this strategy here as you can see we are gonna call this library let's write it here i will change it to const and we are going to use those lines oops client here as you can see we provided our client and script ids and callback url and as you can see after authentication it's gonna give us access token refresh token profile and a callback function after login process you can use any db like mongodb and you can find your user if there is no user you can create new one but we are not gonna do that that because we are not gonna use any db so we don't need here a callback function instead we are gonna use don so if everything is done we are gonna return no error but profile what's this profile basically user id username profile picture and other pictures something like that basically it's a user information and after that since we use sessions we should serialize and deserialize our user we have to use that to pass our session so it's going to be serialized i think we didn't import our passport let's import like that okay we can write it right now and it's gonna take our user and dom function and tom null and user i will do the same thing for that serializing so let's say the serialized user and it's going to be the same thing i know it's weird but this is how it works if we are using sessions we have to use those functions by the way you can write here for example if you are using mongodb you can say const user for example username profile dot display name avatar profile dot photos and first photo adder and after that create new user model and finally you can save your user but we are not using mongodb so we need those sessions so let's use this passport.js here so i'm gonna say const passport let's say setup and require passport.js of course you can basically write it like that we are just importing this file it really doesn't matter and after that we can create here our roots so i'm gonna create new folder it's gonna be roots and inside let's say auth root if you watch my other tutorials you already know how to use it it's gonna be express router and let's import passport and it's gonna be require passport firstly we are gonna get a client request to do that we are gonna use a router and here post method is gonna be login method or you can write get doesn't matter we are not sending any data from our react app of course if we are using inputs here it should be post method but we are just calling our get method using those buttons so i'm going to say google and after that if we visit this page we are going to call passport and authenticate and authentication methods will be google and finally we are gonna use here scope objects and it's gonna include only profile so it's gonna give us only id profile picture name something like that and after that we need a callback function bluetooth.get and remember it was google and callback after login process we are going to call this url and as you can see there is an auth here but i'm not writing that because we are going to define this in index.js don't worry about that and again passport and google after that we are gonna have two options first one will be success redirect after successful authentication we are gonna be redirected to this home page so we can use this url like that or you can write here const client url and basically we can use this here like that and second option will be failure redirect if it fails we are gonna go to other url and it's gonna be login and failed we don't have this url let's create here i'm gonna say router and get and login failed like that and it's gonna be request and response and we can return anything to our user let's say response status will be 401 which is not authenticated and we can send here any json file so we can say error or message whatever you want i will say success it's gonna be false message failure or any other long message as i said you don't have to write it like that you can send whatever you want and what if it's successful i will duplicate this and i will say if it's successful let's say here success passport jazz is gonna return as a user and it's going to be inside our request so let's use it i will say if request and user it means if it's authenticated we can send other message here i will say response status is going to be 200 which is successful and let's write here success true message successful and also i'm gonna send my user and it's gonna be request dot user and also you can send your cookies request dot cookies or if you are using jwt you can write it here whatever you send to your user i'm just gonna send this user which includes our user information okay but we are not gonna use it here this url here instead we are gonna go to client url which is our react application and we are gonna use use effect we are gonna make requests for successful login if there is a user it's gonna send us our user if there is no user we are not gonna have any user and we are gonna keep seeing this login button actually we can write here logout also i will say router.get it's gonna be logout and request response we are gonna use logout method here and after that we can redirect our users anywhere so it's gonna be response redirects and it's gonna be again client homepage client url okay basically this method is gonna play this user request.user and after that it's gonna redirect us to client url which is our react app let's try this i will go to index.js and import my oauth route here so i'll say const authroute and it's gonna be require and roots auth okay so we can use this route here after course let's say app dot use and it's gonna be auth url and auth root so whenever we make any request for this url it's gonna automatically call this and we will be able to use those methods by the way there is a problem here ah that because i didn't export my route here i should say module exports and router okay so how i'm gonna use those requests using my react application let's open login page here and i'm gonna write here on click methods then we click this button google button it's going to call google function let's create it here i'll say const google what we are going to do here basically we are going to make google request using this url but we cannot directly do it here it should be in the back end so basically i will say window dot open and i'm gonna write here my url which is http and localhost 5000 and old and google and it's gonna open in this page in this tab so i'm gonna click oops there is a problem something must be wrong here oh 30 000. it's gonna be three thousand and also i'm gonna give my url here because it's gonna allows us to make requests from any application and it's going to be our react application i will save and let's try again i will refresh i'm clicking ok still same error that means something wrong with here google google callback oh i should delete this example and let's try for the last time i will go back and refresh i will try to click again and this time as you can see test lama and we are authenticated if i open my console and application here inside cookies as you can see two cookies here and it includes crypto user information by the way those items look a little bit strange so i'm gonna make time responsive i will just copy and paste i'm not gonna waste your time i just edit here media query let's see again as you can see it looks better but as you can see we have session but we don't have user here how we are gonna handle that if i come here as i said before we are gonna make requests for this endpoint in our app.js let's open up app.js and here we are using a dummy user instead we are gonna make a request okay it can stay here i'm gonna delight later so i'm gonna use use the fact hook and my dependency will be an empty array it means whenever i refresh the page and start my application it's gonna run let's create our fetching function so i will say const get user it's gonna be a async function and we are gonna make request of course you can use axios or any other library but i'm just gonna use track the javascript fetch and let's make this request http localhost 5000 both and login success and after that we need some configuration here firstly method will be get methods of course if you are using axios it's gonna be easier so let's say credentials includes and i'm gonna write here my header like that and of course you can write here a variable and a weight but let's do that without acing a weight i'm gonna use them so let's say then it's gonna return as a response and i will say if response dot status equals 200 which is successful return response.json the parentheses will be here let's delete here okay i'm doing that that because if there is no user it's not gonna send this status so in that case we can throw any error i will say draw new error and authentication has been failed and after that we have response json we can use it i will save one more then and let's say response objects and remember it includes success and message and user and we are gonna be using this user so i will take this object and i'm gonna set my user in this case we don't need that anymore instead i'm gonna use use effect sorry use state and i'm gonna set my user user set user is gonna be use statehook at the beginning it's going to be null and here after taking this object i will say set user response object dot user and finally we can catch a new error if there is an error just console.log okay it might be confusing but don't worry if you check couple times you're gonna understand better so i can call my function and that's all let's write here console.log and user and we can see the difference and as you can see our user is here that's because when i refresh the page it just makes this request and because of the session we have a user so what else i can do i can give functionality for this logout button let's open number for logout button here i will say on click it's going to be logout function let's create here const logout and this time we are gonna call this endpoint let's see i'm clicking and as you can see it's amped right now if i log in again and it's here if i open my console as you can see we have an object we have display name id inside name we have two items family name given name and photos as you can see this is my avatar so we can use those items how we are gonna do that in app.js i'm able to use this user and we are already passing this user to number so we can use it there i'm gonna delete this console log and open my number and we have a user instead of where is our name here instead of john doe i will say user dot display name and here for image i will say user dot photos and first item and it's not on the first item let's check again item and inside remember there is a value i can use it here also and that's all let's see as you can see my name and my avatar awesome it works i can log in and log out right now perfect and when you create one passport strategy others are gonna be much more easier let's say github it's gonna be github two let's open this and i'm gonna install this library let's import this yarn add passport github and if you go to github.com settings and developers you are gonna see this page and you can create here new application and after that you are gonna write here localhost 3000 and here localhost 5000 and auth github and callback exactly the same thing we did before for google and after that it's gonna give you client id and secret and as you can see my application home page callback url and this is my client id and i will take my secret id also so i will paste them here for my passport page let's paste here as you can see it's exactly the same thing we are using github strategy access token refresh token profile tone we are gonna delete here again so it's exactly the same thing so we don't need here i will just duplicate i will say duplicate this piece of codes and it's gonna be [Music] github strategy and i'm gonna change here github and github callback and here will be the same but let's import our strategy it's gonna be github strategy and it's gonna be passport github and two let's come here again i'm gonna copy here and paste again this time it's gonna be github and that's all let's see how it works i will come here and i will do the same thing for github let's say github here and this button is going to be on click event and it's going to call our function github let's see i will open my login page and if i click here as you can see my username and avatar it didn't open github model that because i've logged in before so if you login once it's not going to open that model anymore it's going to be the same thing for google also let's click as you can see it's not opening that model anymore we are directly getting authenticated have some it's that easy so in this case when i click any post here we are going to login page if i log in we will be able to see these pages awesome so let's do the same thing for google on click and google sorry it's not google it's facebook and let's create one more function here it's going to be facebook but if we create our functions as we did before we are going to get an error that because we cannot use http urls for facebook apis it doesn't let us it should be only https so we are not able to use it in localhost so you have to get a domain or somehow make your localhost https and after that you will be able to see your facebook authentication but anyway let's do that i will say facebook and let's search for facebook strategy and as you can see we are going to use this one and this is how we are going to use it i will say young ads passport facebook and here it's gonna be passport facebook and it's gonna be facebook strategy and again i'm gonna create facebook app id and secret if you go to developers.facebook.com you can get those id and secret and i will use it here facebook strategy and let's change here facebook app id and facebook app secrets like that and i'm gonna change here and let's try if i click this button i can't click oh it should be for our div here i will paste if i click again it's not gonna work and it can also say your application is not secure because as you can see this url must use ssl certification and start with https so we are not able to use it here but it works i tried on a domain don't worry by the way we can give cursor pointer here app and login button okay awesome so we finished this project i hope you enjoyed in the future we are gonna use this social media authentication for our big projects but for now i think it was a good beginner tutorial if you learned something new today please like the video and subscribe to this channel and you can support tamadev using the link in the description below or youtube join button and that's all don't forget to follow lama dave's social media accounts i hope i will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 15,573

Keywords: react, react login, react auth, react oauth, react authentication, react passport.js, passport.js, react google login, react facebook login, react github login, react social media login, social media authentication, passport.js google, passport.js github, passport.js facebook, react tutorial, react router dom 6, react project

Id: 7K9kDrtc4S8

Length: 74min 55sec (4495 seconds)

Published: Wed Nov 10 2021

Reddit Comments

[u/nesikim]

Source code: https://github.com/safak/youtube/tree/react-social-login

[u/McSlambley]

Thank you!! I've been gearing up all week to learn how to implement this functionality this has made the process 10x more approachable. I appreciate you ❤️

[u/albenis99]

Good project, tbh I would prefer more jwt than passport for authentication because is more secure for any project

[u/Zestyclose-Shallot18]

How do you get the profile picture of a Facebook user?, google and other providers are giving a profile url but Facebook isn't, does someone know anything about this please help