Google Authentication With React JS & Firebase - Sign In With Google - Firebase v9

hey what's up guys i'm glad to be back with another video here and in this video i'm going to show you how we can use google authentication and your own react.js project using firebase so let me just give you a quick rundown of our application that would be able to be building here so basically we're gonna have a home page we're gonna have an account page which is a protected route meaning the user must be authenticated in order to view the account page we're also gonna have a sign in page now additionally we're also gonna be using context api and react to manage our our state throughout their project so this is what we're going to be building here this is our page and over here off to the left is the firebase uh authentication dashboard here and as you can see we have a blank table there's no users now in my home page here i'm gonna go ahead and click on the sign in button and that is going to forward me to the sign in page now there's two ways to sign in with google using firebase we can use a pop-up where we click this a pop-up sign up shows up and we can slide in that way or we can be redirected to the google page and then redirected back to our site once we're logged in i'm going to show you how we can do both options and i'm going to talk about the best use cases for each scenario so let's go ahead and click the sign in button and you can see we have a nice pop-up here and i'm just going to click that to sign in with my account and boom it redirects us to our account page and already populates our information and if we reload our users table on the authentication tab you can see we have a new user created now i'm going to go ahead and log out there and what i actually want to do is i'm going to change this over to now we're going to sign in by redirecting here so i'm just going to refresh that and real quick you guys the account page like i said is protected protected route so if we go to our account page right now you can see it flashed real quick and then just redirected us back to our homepage and i'm gonna show you how to configure all that react.js here so let's try this again with a redirect to the google page i'm gonna sign in here and i'm gonna click the button and it should just redirect us in our browser like so you can see our accounts.google tab here and then i'm just going to click on another google account of mine and it's going to take me back to the account page and now you can see it populates with my information that google has and let's just refresh our authentication table on firebase and you can now see that we have an additional user so i'm going to show you how to build all this from scratch and react.js we're going to be using react router dom context api and firebase i'm going to show you how to configure it all so without further ado let's get started all right you guys before we begin i just want to give you a quick rundown of our application so you can kind of understand it a little bit better like i said it's going to have three pages it has a home page which we're at right now we're also going to have a sign in page we click this here we can go to our sign in page and we're also going to have an account page here which we want to display some user information be able to log out and also this account page we want it to be a protected route which means the user must be authenticated in order to view this page otherwise there's going to get redirected to the sign in page so let's go back to our homepage here and just on our code here all i've done is create a basic react application and i've installed tailwind don't worry about telling if you don't want to use it that's fine there's very very minimal css in here anyways and so over here we have a components folder where we have navbar and just a simple nav bar we are going to be using react router dom and then our pages tab here we have a account page home page and sign in page now i assume you already know uh you're pretty familiar with react router dom if not i'm just going to give it a quick run through so what we're going to do is yarn add react router dom okay and if you're using npm that's fine too which is mpmi react router dom now just a quick round down here so instead of the so when using react router dom you have to surround everything in a browser router tab here so just replace that react dot shrimp mode with this browser router here and then in your app.js we're going to have routes here and then in between the routes we're going to have individual route with a path to the home page here i'm just going to display my home page page here which is just all it is is just a single div here within h1 and then we're gonna have an account page which again just a div here no none of the logic is working right now and then a sign in page and this google button really really cool you guys if you want to use this google button it's super easy to use all you have to do is it's just react dependency yarn ad it's a react google button go ahead and install that then just import google button and then you can just just literally type it in like that super easy to use and it looks pretty cool so that is our project here so what we want to do first is go ahead and configure firebase and then we're gonna move on to our contacts so let's go to firebase over here and i'm just gonna expand this you can see a little bit better so we're just gonna using firebase.google.com okay then we're gonna click on get started and we're going to create a brand new project so for our new project what do you want to call it i'm going to say google auth youtube okay and we're not going to be using any analytics for this go ahead and create the project it's pretty quick you guys and like i said this is uh this is really really cool stuff i'm having a lot of fun using firebase and the the google authentication is really really neat in your react js project so definitely you want to use this on like a portfolio or anything like that so all right there we go already complete there so let's just continue now this is like the dashboard for firebase uh we're going to be only focusing on the authentication here and what we want to do first is we've created a project we want to attach our our application here so we're going to be clicking this web button right there and we're going to call this google auth you can call it whatever you like and don't worry about the hosting for now so firebase has really really great documentation it's really awesome you can really learn a lot if you just read through their docs so what it wants us to do first is actually install firebase so i'm just gonna um you can copy that if you want for using npm like i said i'm using yarn so i'm gonna say yarn add firebase the next what we wanna do is just copy all of that i'm just going to slide this down a bit now and what we want to do is actually create a firebase file so i'm going to create this firebase.js inside my source folder here and i'm just going to paste over what i copied there looks like that went down some so um we can go to docs actually so now that's what we need to do to connect firebase now we need to do a couple just an additional step to use the firebase authentication as you can see here it says to add sdks to software development kits for firebase products you can go here to to see all the libraries so what we're going to do here is we're looking at i'm going to pump this up a bit so what we want to do here say um console and our google auth youtubes we're going to be using here and authentication and let's get started so i've already made another video you can sign in with all different ways using firebase email and password phone google facebook i've already made a video using a email and password sign in and i'll put a link to that in the description below for this video we're just going to be focusing on google so let's go ahead and enable that you do have to have a google account so just go ahead and click continue and that's what we need to do there now let's go over to the google docs because we need to do we need to add in our sdk for to our firebase project and close that oh it looks like something's acting funky there that's right so let's go into authentication then we're going to hit web and then let's go down to the google here or sorry before we get started actually let's click that and what we need to grab is this get auth import get auth from firebase and we can just post paste that right here and then we're also going to need to grab this uh authentication right here and we can just paste that at the bottom now we're not going to be using any logic in our fibrous application so let's just go ahead and export that like so export const auth get off there we go so now what we want to do okay so we're actually already set up so let's go ahead and get our context uh file going because that's we're gonna be putting all of our logic so in our source folder let's create a context folder and i'm just gonna create a new file and i'm gonna call this auth say authcontext.js boom there we go now for our context we're going to be importing a few things okay we're going to be using the use whoops use context and we're going to be using create context there we go and first what we want to do is we want to say um we're going to be using see const and we'll say auth context equal to create context there we go and then we want to say const or sorry export cons we're going to be using this all over the place so auth context provider we're going to be using this throughout our application and this is going to take in some children sorry i'm looking at my mic looking around my microphone i've not yet cut a microphone arm here then we just want to return here and what we want to return is this auth context provider here so auth context dot provider and we want to return our children inside there now we're also going to take some values in here which we're going to leave blank for now but let's go ahead and just create our space and then at the very bottom we of course want to export const user auth okay there we go amberson return the use context of auth context there we go now everything that we want to be available throughout our application we're going to put inside this auth context provider and the way we use context we need to go into our app.js and i'm going to wrap our entire project in the uh the the user auth context here so we're going to say in our wrap jazz project here voice want to say sorry auth context provider and just to be clear that is coming from our auth context right here so that's what we want to grab and we want to wrap everything inside there so let's just go ahead and move that up oh i've got our navbar here i'm going to slide that up to the top there perfect now let's just save that so it gets nice and formatted there we go now going back to our auth context file here what we want to look for okay is basically all our logic we're going to wrap inside of our context so i'm going to shrink this down here so for google what we want to do let's go ahead and import some things we're going to be using not ios and just so we can see we're gonna click on this google so like i said firebase has really really great documentation there's a lot of really helpful things in here so if you read through it you're i'm almost positive you'll be able to find all of the answers you're looking for so what we want to do is to access the google auth provider let's just go ahead and copy that and i'm just going to paste it right here at the top now additional things that we're going to need is also like i said we have the sign in with pop-up method and also the sign in with redirect and let's go ahead and import that so sign in with pop-up and then of course the one right below that the sign in with redirect now let me shrink that down so we can see we're also going to want a sign out function there we go and we're also going to want the on off state change method and what that is is basically it's going to check to see we're going to wrap this in a use effect and whenever we run this we're going to check to see if a user is authenticated or not so that's what we want to do right there i'm going to just shrink that down just a little bit here now now we have access to all these so what we want to do is just go ahead and pull that in we're going to be putting it right in here so i'm just going to say const and we'll say google sign in okay there we go and what we're going to have in this google sign in we're going to have um we scroll down here it tells us what we need to do we need this provider so what we're going to say is going to paste that in const provider equals the new google auth provider and then let's do our sign in with pop-up first so i'm going to say sign in with pop-up here and that's going to take our auth then also our provider just like so now we have to pass these down in our value here so we can use them throughout our application so let's just pass in the google sign in and we're going to be passing in a few more things as well so it looks like we have an error let's see what our error is export cons where's our error value sorry guys let's have a look over here what's going on oh we didn't pass in our auth here that's all we need to do sorry we didn't import auth so we just need to grab this from our firebase file so import auth from we just go find where is it at firebase there we go okay that should take care of the error google sign in was not defined google signed in just need to fix that all right there we go so now let's go into our i'm going to open this up let's look in our sign in page there we go so let's go to our sign in page now what we want to have over here we want to import and we're looking for the user ah from context and we're looking for our auth context there we go now in seer inside our sign in what we have now have access to is our user auth authentication here so now we have access to our google sign in so let's go back to our sign-in button here and in here what we're going to have is have a handle we'll say const handle google sign in okay and it's just going to be an arrow function here and this is actually going to be an asynchronous function so we can just say async and then here we're going to have a try catch statement there's many ways to do that that's how we're going to do it here then we're going to have a catch and we'll catch all the errors and we'll just console.log any of the errors and then here what we're going to say is a wait and we're looking for our google our google sign in right there we'll say google sign in we actually don't have access to it yet that's okay google sign in function and oops the the reason we don't have access to it because we did not have imported our auth here so what we can say here is const and we'll say we're saying google sign in equal to user auth here we go now we should have access to that so handle google sign in and on our button here if you use a different button that's fine too but on our button what we can say is on click and we just want to run that function handle google sign in so i also want to do a few more things here so let's go ahead and see if this actually works i'm just going to pop open our terminal here so we can look at our console and let's see if we get any errors let's go ahead and click the button nothing's happening what is going on oh there it goes there we go we just need to refresh look at that you guys that's all we needed to get this far look let's uh let's go ahead and sign in with an account here and see what happens so i'm not seeing any errors that's a good sign let's go back here to our just our console here and let's look at our table there we go you guys boom already have a user now um we don't have any other functionality we can't sign out yet and we can't detect if the user is actually authenticated yet um so let's go ahead and do that and then we're going to focus on some redirecting and so on and so forth so let's go back into our auth context here and what we want to challenge or take care of next is probably this on off state change and we're actually going to check for this in a use effect okay so we're going to just open up a use effect down here and we'll say use effect there we go make sure that imports there at the top there we go all right and we're going to add our dependency array so we only want it to run once whenever the component mounts and in here what we're going to say is const on subscribe okay equal to on auth state changed and that's what we pulled in up here and what that's going to take in is auth and then also an arrow function here and this is going to be our current user right and i'm going to show you what the current user is because we're going to have access to this and we're also going to have our state in here as well so we're going to have manage our user in our state so our const and we're just going to say we'll open up our brackets here whoa user set user equal to use state and we're just going to set this as an empty with the set that as an empty object so go ahead and hit save you wrap this there we go so go ahead and hit save there we go so usage is not defined let's import that there we go now in here where were we so in our use effect in this arrow function what we want to do is set the user to current user there we go and then down here we want to return and we're going to return this um we're going to return this arrow function here to unsubscribe i really need to get a microphone arm i'm just talking around this thing i apologize for that this is a function by the way unsubscribe function okay boom there we go now let's go ahead and just refresh that okay so that takes care of our errors there now let's go into our um before we test if this works or not we're going to console log this console.log and i'm just going to say user [Music] user and we'll just say user just like that let's go ahead and refresh that so i'm gonna try to sign in again i'm gonna be using the same one here and we should see in our state down here right now is an empty object no what's going on here so it's not liking something here um maybe we can just log our current user let's try that again and we're setting this okay so we're already logged in right now and i just wanted you to see that so i'm gonna go ahead and just do this again so as you can see this is our current user and we're actually setting this to the user right there and if you look in here this is um from firebase all the information we have so i actually already has my display name just off of my google account there and we can access some other data as well so let's go in here and let's add our we can add a user and also sign in so let's check this out let's go in here and add our sign out function so i'm going to put this just above my use effect here and what i want to say is just const i'm going to call this a log out and again this is going to be an arrow function and in here i just want to say we'll say [Music] sign out and this is going to take the off there now we course we need to pass this down so let's pass down the log out we also want to pass our oh period there we also want to pass our user okay so let's just refresh make sure there's no errors and i want to add in let's do some conditional rendering on our nav bar and so basically we want this to say sign in and if there's a user we're going to check to see if there's a user now that we have the on off state change we're going to check to see if there's a user and if there is a user we want to display a logout link otherwise we'll say sign in so for our login let's do that right here so i'm just going to open up some curly brackets here so we can type some javascript and before we do that what we need to do is import our user auth there from our context there we go okay and let's bring that in we'll say cons and we need the user we also want to grab the log out and that's equal to the user auth okay so now we have access to the user and we can just click user so we're looking for the user email or the display name so let's check this let's say we'll use a ternary operator we'll say if user and some optional training here if user um it doesn't matter we'll user we just leave it like that we'll say this sorry display name okay if that's true then let's render we'll say i'm going to render a button here with this this says sign out sorry let's say log out else i'm just gonna paste this in here boom so since we are logged in right now we should see a lock out button there we go now let's give this some functionality so what we say is just on click we want to run we'll say handle sign out okay so let's go and save that and let's create our handle sign out function so const handle sign out like so okay that's spelled correctly and what we want to say here and this is going to be a asynchronous function as well and we'll say try catch going to catch all the errors here what is console.log any of our errors okay and what we're going to say is async and we'll say await and we're going to grab that log out just like so there we go that's all we need to do right there you guys awesome awesome so let's see if it works oh hey there we go now it should say no okay so now we can sign in we can sign out but we'd like to have whenever we sign in you don't want to be stuck on this sign-in page like that that doesn't make any sense we're going to use rack. and use some url redirecting so let's go into our let's go into our sign-in page okay and in our sign in page what we can say i'm gonna import let's see i'm gonna import the use navigate okay from this is react router dom and just right here i'm gonna say const navigate equal to use navigate method there so now uh we could just say right here okay and this i'm gonna show you why this doesn't make sense okay so we could just say like this once we sign into google navigate but there's an issue with that because once we click this pop-up it's gonna go ahead and well let me we want to let's route to the account page once we sign in there so i'm going to refresh this log out there so here we are let's go into our sign in page now if we click this it's going to automatically redirect us to our account page and we don't actually want to be directed unless we're unless we're actually signed in so let's just go ahead and cut that out and what i'm going to do is actually wrap this in a use effect here so basically on our on our use effect for our sign in page whenever somebody's on our sign-in page they don't need to be there if they're already signed in so that's what we're going to do run this use effect we're going to put this dependency array in there so we only want to run it once when the component mounts and what we're going to check to see if is a user is not whoa the user is sorry i'm getting around this microphone here user is not null what we want to do is just navigate to the account there and user we need to bring that in here there we go all right so let's see let's log out i'm going to try this again oh that button we haven't done let's do that login button log out button um so where is our nav bar i'm just gonna copy that right there because we already did that and let's cruise on over to our account page and i'm just going to paste that in there it's our handle sign out button right there and let's just attach that to this button right here so we'll say on click we want to run that function which is the handle sign out and we of course want to import user auth from our context whoa from our context file there we go and we'll say const and we're wanting the log out okay so now this button should be able to log out before we do that let's do this okay so let's just instead of user what we want to say check to see if the user is available and then we can just say the display name and of course yeah we need to import the user here and let's refresh there oh nothing yet so let's see here user no okay we're not logged in so let's go in and sign in and we're also going to make that page a password protected page so let's sign in and see oh so what we did i forgot this should be redirecting us and it's not and i think i know why here so let's just go back here so let's go to our sign in page and we actually want to pass in user so whenever there is a user change this component this use effect will run so let's just go ahead and refresh that okay log out good okay sign in and let's go to sign in with google now when we sign in it should detect and there it goes perfect so there we go now you can see our name boom there you go now let's log out so if we log out we're still in this account page that's not what we want we actually want this to be protected page so we um so we can't access that unless the user is authenticated and that's an issue because we're not authenticated we can still access that page so let's just close that sign-in page for now and for the um let's just go ahead and create another component and i'm going to call this protected okay dot jsx digest and what i say is rafc to generate our functional component here and we're going to import a couple things we're going to import the navigate okay not use navigate just navigate this time from react router dom and we're also going to import our um user auth okay from context there now let's we need our user so it's const user is equal to our user auth method there okay and basically what we want to check to see okay is i'm going to say if a if there's no user what we want to do is just return return this uh navigate and we're going to the let's go to the home page okay well in there there we go and let's just go and save else we'll just return the children and we need to pass that in up here now let's go ahead and save that and see how it works now one more step i forgot to do here let's go into our app.js and we have to wrap what we want to protect with the protected element there so what i'm going to say here is protected okay there we go and then we can just cut this account there and we'll throw it inside of our protected route so let's go ahead and save that we need to import protected all right let's give it a refresh i don't see any errors now let's try and go to the account page now you should see it just flash on the screen then we should be redirected to the home page or the sign in page there okay it redirects us to the home to the homepage that's what we want right there now um let's see what are we missing here so sign in we can sign in with google let's do the we have the redirect here perfect now that's how we're signing in with a pop-up now let's do the sign in by uh url redirect so let's go over here and real quick just shows you in the documentation down here we can just scroll down and like firebase tells you like i said firebase recommends if you're going to be on a mobile application or anything viewed on smaller devices they recommend signing in with a url redirect otherwise if you're on desktop larger screens the pop-up works fine so this is what we're going to want right there that sign in with redirect and let's go into our auth context here and we've already imported it right there so that's what we're grabbing so let's just grab that and instead i'm just going to comment that out and this is all you need to do to sign in with a redirect or with the with a pop-up was comment that out and that is simply the only change we need to do in order to use our sign in with redirect so let's go over here to our table here as you can see we only have well i just refreshed it we just have one user now i'm going to sign in with a developer account and let's see how this works so sign in here i'm going to sign with google now it should redirect us to google there you go how clean is that smash the like button guys smash like button if you like you're getting some value out of this i'd appreciate that so let's click on this support here and oh it's gonna work there it goes boom it populates with my information from google let's go back over to our authentication table here refresh and we should see a new user boom there we are so that is how we can log in with firebase or google authentication using firebase and a react js project we did a protected route for our accounts tab we're using url redirect with react router dom and we're using the context api here so i hope you liked it guys smash that like button if you feel like you got some value out of this and be sure to subscribe to my channel i'm going to be putting out some more react content just like this here in the near future thanks for watching you guys i'll see you on the next one

Channel: Code Commerce

Views: 46,827

Keywords:

Id: cZAnibwI9u8

Length: 31min 28sec (1888 seconds)

Published: Fri Apr 29 2022