React authentication with social media (Facebook, Github,Google)

all right so welcome back to the coding in today's video we're going to learn how to do authentication uh with social media so first we're gonna do authentication with facebook github and google and all of this possible by using firebase alright so let's get started all right so here i'm using wii is good so you can use any checker data you want and i'm using create react apps for this project and so and here's our result like now so the first thing first that you need to do you need to install uh firebase into your project so you can use either npm or yawn so let's go ahead and do that i i have already done that and the next thing is you need to do is to create a firebase project if you have done create this one so you don't need to but so right now i'm going to create a new firebase a new project i'm going to call this one new projects and then i accept the term and this one and then you just click accept everything so you can choose any location you want so i'm gonna go with the united states right here so it might take a couple of minutes all right so after that done you will see this screen right here and what we're interested in too is to create the projects for webs and then you can click on the web right key and then you can give your app's name so i'm gonna say demo and then we didn't redone it hosting so this one you can set up later on now we're going to click this one and then it's going to generate our sdk and then we can crop this one so which one i'm going to do i'm i'm going to copy everything from here so after this i've copied this i'm cutting you if you have an existing existing project you can go into this uh right here and then you go project setting and then you can go into the conflict right here as well so it's it's similar to this one all right so after that we're going to add this one to our project so what i'm going to do i'm going to create a folder called configs and then i'm going to create call firebase uh by base conflict dot js and then i'm gonna paste everything here and then i'm changing this to cons and then we need to import firebase from firebase from yeah firebase that we install and the next thing is we need to export default firebase all right so that's pretty much it and for the next things that we have to do we need to uh do authentication so we're going to create a function for that so what i'm going to do is i'm going to create this called folder called service and this service is going to handle the authentication so often application or i'll just call this auth.js and then we're going to have the function called socials just going to take this one and then it's going to do the authentication right here and which one or what i'm going to do i'm going to export default social media so this one we are not yet to do anything to this one yet so and then i'm going to the next thing is we need to configure the method that we're going to use so because we're going to use with uh google firebase google facebook and github so you need to go into authentication right here and then you on the science method right here you need to enable all of this so for that first i'm going to go into conflict this one first i'm going to do the ask method that we're going to do and then in here i'm going to punch so we're going to have facebook's provider is going to be equal to firebase dot r so we need to import firebase so right here i'm gonna do import firebase from firebase config and then what we can do is firebase.firebase that facebook's ask provider and now we can export this one export come this one in we're gonna do this three times so this one is for github's provider and this one is going to be google provider and then this one is going to be google provider and then this one is going to be github provider all right so that's pretty much it all right so in here we can pass a provider as the parameter and then what we can do in here we can we can do firebase so we need to import that from our configs so import firebase forms we get out from here and then we go to config and pick firebase and then we can do us dot sign in with pop-up and then we can pass the our provider and then we can do this is then response and now we can return the response with the user and then if there's an error so we can respond that one as well so return rest and this one we can do return as well return from this one and i think that's pretty much it on uh for our function so in here and that rust is going to be error okay great all right so next we're going to create a ui so that we can have a button to login for that so here in app.js i'm going to create a budonks uh this one all right called and then we're gonna do facebooks and then we can do on clicks and then we're gonna call handle on clicks all right so this one and then i'm gonna create a function called handles on click and hold on click okay so in here we're gonna pass the provider so we're gonna facebook provider and if you're using with github you need to pass the github provider so when we're doing that we need to do like this so otherwise we're going to call this immediately so then in here we're going to have the provider parameter and after that we can call our social media provider and then we can do current results here we can do a weight from this one and by that we need to use an async on top right here so after that we can console the lock of the result and same thing we can copy and paste this one three time and this one we're gonna do with the github provider and then this one we're gonna do with google provider you can actually looping this one as well so this one can be github and this one is going to be google all right so now if i refresh so there's an error right here this ca is not a function all right i think so oh okay so we need to create this one we need to import this one with a new keyword so then i think everything should be work fine all right so that's good so we have this one it look really ugly but i think i can put this one in the header i guess all right good so now if i press on facebook so it's going to be open pop-ups like this one but right now we go back into our console we should have an arrow i guess because we not allow so we do not not allow doing with facebook yet so and the first thing first that you need to do with facebook is you need to go into the um firebase authentication and then you can go into facebook right here so and then we need to enable this one so when you click enable it require an app id and have secret so where do you get this one so you get this one by going to the facebooks for developer and then you can click on the first link right here and then you can go to my apps and then if you don't have an app you can create an app but i already have an app so i can click on this app and after that this is an app id so you can see there's an app id right here so you can copy this one and paste it right here and if you want to add secret you go to setting and then go to basics and then if this is your app secret so you click show this one and then you give a password to this one so i'm gonna go ahead and keep my password and so i can sell this one so after this one you give you can get the app secret and then you can paste it right here all right so the last thing that we need to do we need to copy this one and now we hit save so we go back into our app we go into our facebook logins and then we go into setting and then we need to paste this one so this is my previous project so i can remove this one or you can keep there's a multiple way so then you can paste this one and after that you click save all right so after that done you right now you can refresh this one and you can do facebook uh login again so for that i'm gonna do with uh this one right here i'm gonna and then i'm gonna do facebook login so it's going to be pop up and redirect it to login with my facebook so the app setup is still development mode and you don't have access to switch which is the test user to ask an admin for permissions i see so we need so we need our app for that i think maybe i can do it in here let's see so i need to save this one and i think i can create this one so right now if we go back in here as you can see we have the information of uh me but like i told you like as you can see before because our app is in the development so we need to make this one uh into the live so that we can allow other users to use this one so for now because it's in only in the development mode when i only create using this app so only i can register with this one and the next thing is we need to do maybe you have any still any question you can still ask me on how to make a live can ask me in the discord server as well and the next thing is we need to do with google so google is really simple and you can go into google right here and you click this one enable and then you provide your emails and then you click save i already done that so i can click on the google right here so in here what i can do i can click on google so right now there's an email like this one i'm gonna choose this one and all right so that's pretty much it so as you can see and then the console.log right here we can have uh the emails so this is the email that we sign in and the last one is we're gonna do with githubs so with hit githubs similar so you go to github and you click enable then you need the client id and client secret and also a similar with the facebook but this one is not complicated it's easily than facebook so all you need to do is to go into your github profile then click on your profile and then going to develop per setting and then you can click on os apps then you click a new os app and then you give your application name so i'm going to give this like a demo and this one you can do with the local host and then the authorized this one that's the link it's from the firebase so i can copy this one so i think i can move this one to right here okay so i can copy this one and then i go back into my github and then i can paste this url and give a description so demo and then you register and then you have the demo app and this is your client id so you can copy this one and the client secret um let's see where do we get this one so this one generate a client secret and then this one after copy that one you can paste it right here all right let's see so you cut you need to copy your secret right here and then the next the last one you copy this one you hit save and then you need to pass the so we already done that so we paste this one so we're going to update our projects all right so that's pretty much it so then i'm going to refresh this one i'm going to go with github and that should do it and then it's authorized with me with this app so then i do acry and then voila after that as you can see we can go into dm right here we which is there there's an email right here so yeah i think um that's pretty much it on how to do authentication with uh social media so we do facebook we do github and google and if you have any questions so you can ask me and in the discord server or in the comments below and i hope this tutorial helped you and alright so see you guys next video peace

Channel: Daily Web Coding

Views: 13,115

Rating: 4.7873755 out of 5

Keywords: authentication, react, react social login, react authentication, react firebase authentication, login authentications with react, social login, login authentications with react (passport.js), firebase authentication, facebook login react, react facebook, react google authentication, social authentication, login authentications with react.js, facebook auth with react, github auth with react, google auth with react, firebase authentication with react, react auth firebase

Id: MG3ZTfdxODA

Length: 14min 20sec (860 seconds)

Published: Tue Feb 09 2021