Next.js Authentication Firebase - Sign in with Google

what's going on you guys Clint here welcome back to the channel cook Commerce in this video I'm going to show you how we can incorporate next.js13 and Firebase we're gonna be using Google authentication okay so let me give you a quick example this is my uh my demo right here so right now we're on the main page we have an about page so let's go ahead and sign in here we see this quick pop-up now I've already authenticated so now you can see welcome Clint Briley gives me an option to sign out also we have a profile page in which you didn't see before it says welcome client you are now logged in the profile page which is a protected route if we refresh we're gonna have that nice little spinner GIF in there and then we go ahead and sign out so if you see how I built this we're conditionally rendering by the way the profile page and also our login information here so again if you want to see I built this next js13 Firebase Google authentication let's go ahead and get started so here I am in vs code I'm already in the working directory I want to be in just a folder by the name of next Firebase slash auth or Dash auth so what I'm gonna do is open uh my terminal here with control back tick button and let's go ahead and install next.js so I'm going to type MPX create Dash next Dash app then I'm gonna go ahead and put a period there so we know to install this in the current directory okay so we're not going to be using typescript for this uh no linter we are going to be using Tailwind no Source app router yes and then no and this is going to create our next JS application so if you're new to to Tailwind by the way which we're using in here it's pretty easy to get to pick up and um and understand we're going to use it very minimally there's not going to be much styling in here obviously but it's just something we can write really really quickly so while this is creating our new um whoa that was it okay cool so and if you might have known if you watch my channel I'm actually on a PC that I built uh about a year a year and a half ago maybe two years now uh my Mac was giving me some issues so it might be time for a new one so let's go and type npm run Dev what that's going to do is start up my development server yours will be on 3000 my demos running on three thousand so I'm gonna cruise over to 3001. so this is our next js13 application looks just like the next S12 and all the other ones so let's go ahead and first what we want to do I'm going to go into this app directory here and this is we're going to edit all our code we're just going to stay inside this app directory so let's go into this page.js and this is what you see right here all this stuff in here now I'm going to delete everything within the main tag so select that div let's delete that entiretive in there okay and let's delete all this here we'll leave the p24 but we're going to change that to P4 and what that's referring to is the padding so tail one goes by multiples of four so P4 is just like saying padding one ram so and we'll just have an H1 in here H2 and we'll just say uh home page something like that okay so now we should see our home page there we have it now what I want to do uh first off let's go ahead and create our routes so this is how we're going to create routes and xjs 13. so what we're going to do we're going to create a folder and whatever we name this folder is going to be the name of our route so we're going to create an about page so what we do is name the folder about and then here we just name this JS file page.jsx or JS either one our AFC is going to get our functional component and this is going to be called about page just like that we'll give this just a little class name P4 for a little bit of padding so let's just go to the about page and there you have it we have an about page so let's do the same thing for our profile page again inside our app directory so I'm going to create a new file here but instead of a little shortcut what I'm going to say is profile slash page.jsx and what that's going to do is just create the same thing that we just did so rafce and we'll call this the profile page and again I'm just going to give this a little bit of class name a little padding so profile just make sure that works there we have it cool profile about and home page so next let's go ahead and create a a nav bar somewhere that way we can kind of easily navigate throughout our app okay so again this is going inside the app directory here we'll say components slash nav navbar.jsx refs is going to generate our functional component now um in here what we're going to do let's go ahead and import this into our layout so this is how next js13 works it kind of puts everything through our layout folder or file rather okay so everything that nexjs is just loading this layout page and then everything passes through this layout page so we're going to put our nav bar here at the top there you go so mine Auto imported if yours didn't make sure you import navbar from your components folder wherever you put it now you can see our navbar here at the top so for our navbar we're going to do we're gonna do a few things let's just go ahead and develop kind of like the layout of it so it's just a flex real easy pretty it's going to be pretty minimal okay so inside here we'll say give this uh let's do this first so we're going to have an unordered list and then we're going to have a list item in here and then we're actually going to use a link okay so and this is the next JS um component here whoops there we have it and we're just going to say home and we'll just say slash okay so this is we have to import this we're getting an error we'll say We'll import link from next slash link and we actually need to put this in um there we go okay so um and we're using a link this is a lot easier we don't have to use uh if we use eight ref then anchor tag it would reload the page and we don't want that so this is how we navigate through our page without a bunch of reloads so what we want to do here let's just go ahead and I'm going to give it just a little bit of styling just to make it easy before we because we're going to copy this down I'm going to say P2 then cursor pointer and I'm going to give a little what's the class name let's see H20 with full missing border bottom two give it a little line of their Flex items Center and then we'll say justify B tween and we'll give just a little bit of padding we'll say P2 okay so there you have it looks pretty good now for this unordered list here I'm going to say Flex because we're going to have a couple um things in here so we'll say class name we'll say flex and then that's good that's it for now so for this list item I'm just going to copy that down a couple times whoops PC now PC so we'll have an about page here and then we'll have our profile page and this route is going to be slash profile and this one's going to be slash about okay so let's go ahead and make sure everything works yeah we go to the about page and then the profile page as well so looks pretty good right there so all right so next what we want to do is we're going to have our login and sign up up there as well so we're going to put this on our list just below this one so we'll say unorder list and we're say dot Flex just to go ahead and save a little bit of time then inside here we're going to have a list item and then we're going to have a we'll have a login and let's go ahead and give this a little bit of class name we'll say uh P2 cursor pointer so that way when you hover see it log in there there we go cool now let's go ahead and copy this down now we're not using anchor tag or uh or a link tag or anything like that and that's because we are using um for our authentication for logging into Google we're using a sign in with a pop-up instead of redirecting to an actual we're not going to have a sign up page or a login page we're gonna have a little pop-up okay and Google the the Firebase is going to handle handle all that for us so we don't have to configure all of it it's going to be pretty easy so now that we have this set up um let's go ahead and use so we're going to use context API is something that react offers us to basically manage date throughout our application it's pretty lightweight and easy to use compared to like something like Redux so let's go ahead and get that running right now so we're going to put this again inside of our app folder create a new file and we'll just say um context slash auth context.js you can call it whatever you want so creating a folder named context in their auth context and inside here it's pretty easy we're going to import a few things so we're going to need to use context oh there you go nice little shortcut we're gonna need the create context we're also going to be using use State and then the use effect as well okay so let's give us some lines here we're going to need we're going to say const we're going to say um we need to import the we need to use a create context first okay so what we're going to say is const auth context you can call it again whatever you want is create context just like that next whoa there we go next we'll export const auth context provider okay we'll do we'll pass through children in here looks like that and then we're going to return and what we're going to turn is this auth context dot provider so we'll say return auth contacts Dot provider just like that we actually need to wrap this all right I'm gonna cut that there we go there we go perfect and inside here um we'll just take in the children and that kind of looks funny so let's just give it a little some spacing there we go and then excuse me down here we'll export const we'll say user auth not gonna take anything just an arrow function and we'll say return use context off context okay there we have it now the last step for this is basically we're done setting up auth context or our context API there's one more step we need to do and that is inside our layout um close this down our about page is in our layout here there we go so what we need to do inside of our layout page we need to import this okay and this is how we're gonna do it we'll say import auth context Provider from dot slash context auth context now we're getting an error here you're importing component that needs use effect it only works in a client component so by default all um next yes components or server components so it's saying basically we need to Define this as a client side component so we'll just say use client at the top now next.js knows to render this as a client component so we imported the auth context provider now we need to wrap our application with this provider so we're going to do this inside of our body we'll say auth context provider just like that and then we'll just move that down a little bit go ahead and save there you have it so we have our navbar our children basically any component or or page that we want to have access to this state or or functions whatever we put in there needs to be wrapped within this auth context provider kind of like a layer and everything inside there has access to it so um so that's kind of how that works so let's we'll just close the layout for now I believe we're done we don't need to to mess with it anymore now if we were to put inside here a uh we'll say const user set user equal to use state and I'm just going to put my name just like that now we actually have to pass this through okay value we'll just say that name user now let's go into our navbar for example and we can actually pull this in and and use it so well at the top here we'll say import user auth just like that from our context file and then inside here we'll say const user equal to user auth whoops that's not right oh let's just start over equal to user auth just like that okay let's go ahead and save now we have access to this because anything in here um we can put anything here we would State we can put functions in here and that's what we're about to do so now we have we pass this through as a user to our auth context provider we've wrapped our application in the layout.js now we can use anything that we have wrapped which again this nav bar is within this auth context provider so we now have access to it so if we console.log user we should see what we put in there which is my name so let's just look at the console if we did it right yep refresh there you can see it there it is so this is this is a way to manage State throughout your application um which is fair Fairly um easy easy to do okay so we can go and delete that console log so next what we want to do is let's go into our auth context.js and let's start to find some functions to um let's go ahead and set up let's go go and set up Firebase right so we're going to be able to log in with uh with Google here so we'll go to firebase.google.com okay go ahead and click on get started you will have to be authenticated with Google it's a free account so don't worry about that let's create a new one your two projects away okay so I'm going to call this um next Js off YouTube something like that or auth project okay cool um we're going to disable the Google analytics we don't need any of that for this project go ahead and click Start and this is going to create our project in Firebase oh Firebase offers a lot of different tools and services the one that we're using in this video of course is Authentication I know there's a bunch of different authentication routes you can go we also they have databases they have like firestore they also have a real-time database so what we did is just create our project right so within our project we have to go ahead and set up excuse me like services that we want to use within Firebase so let's click on this web they have iOS Android or this is a web app and we can call this anything we'll say auth just like that kind of auth project or YouTube whatever create our project and what this is going to do is spit out some code for us so first thing we need to do is install Firebase let's just copy that we'll stop our server npmi npm install Firebase if you're using yarn to be yarn add Firebase and while that's installing let's go ahead and grab this code here and you guys this code here these values key value pairs are unique to your account so I'm going to put this on GitHub of course um oh it always does that I'm going to throw these on GitHub so feel free to um make sure we created everything there wasn't any errors there we go so feel free to um download and clone this repo again this um I'm going to remove all these key value pairs because they're unique they're they're secrets you don't want to share these to anybody so make sure you get your owns free so still there'll probably be some people saying it doesn't work because these key value pairs aren't there but either way let's go ahead and go into our app folder here again voice is a firebase.js and we're going to put this we're going to put all of this paste it in here and um that's what we need to do so this is our main Firebase information for our configuration and then if we want to add on any extras as you can see here it says to add sdks or Firebase products that you want to use visit this right here so um cool so we can do that so next we'll go ahead and let's scroll back up build authentication again if you saw that authentication firestore database real-time database lots of cool stuff in here so authentication and click get started so there's all different ways we can authenticate users we can use the email password your phone Google which is what we're doing this video Facebook play games Game Center not sure what some of these are but uh GitHub sign with GitHub Yahoo so lots of cool things we'll go ahead and click on Google here and we need to enable this and just click a support email just the one I'm using I don't get emails to this so please don't email me again some of you probably will I don't check this I just use it for random accounts like this all right so now we have our our project created we need to import whatever Services Firebase Services we may be using just like it tells us to do so we'll click on go to docs right there um let's see build we're looking at Authentication web click click get started we should have it there we go so we need to import get off okay so let's go ahead and copy that and we'll paste that right there there we go now we need to export this um we'll use this here we need to import this here or reference it there but we actually need to export this since we put it in a separate file okay so um that's all we need to do we can go ahead and close that now and we're done with our Firebase we're done with our firebase.js file here we can go ahead and close that again make sure you get your own key value pairs you guys it's not going to work if you just clone this and use you can clone it and then sign up for Firebase and that'll work but don't use mine all right so inside of our auth context here um this is where we're going to have our functions we're going to go and import a few of them and these are all um I'm just going to follow along the demo here if you want to go in and look at all these here they have a sign in with pop-up sign in with redirect we're gonna need a few of their functions that they offer so let's go ahead and say um say I'm not cons we need to import and some of the things we're going to be importing we're going to say sign in see there you go all these sign in with pop-up is what we want we also want the sign out we're going to want the on off State changed and then also a Google auth provider there we go then we're importing that from Firebase slash auth there we go and then also I forgot this report right here inside oh sorry not our layout inside of our Firebase dot JS we exported this auth we need to import that inside uh this auth here we need to import that inside here so we'll just say import auth from wherever our Firebase file is okay so there we have it you guys so next let's go ahead and use some of these functions so we're going to be using the Google sign in function so let's come down here and actually go below our state there we're going to leave this state but instead of client let's just change this your name whatever you put in there just set it to null for now okay we're actually going to leave it no we don't need to change it again so we'll say const um Google sign in is what I'm going to call my Google sign in function okay and then what we're going to say in here we'll say const provider is equal to new Google auth provider just like that and then we'll say sign in with pop-up and that's going to take an off and also this provider here okay and then while we're at it let's go ahead and do our sign out function so we'll say cons I'm going to call it log out so our sign out functions the what the Firebase is calling it so we'll say sign out and we need to pass in off there we go and now we need a way to manage uh who's logged in whether we when we navigate throughout our application okay so we're going to do this with use effects we'll say use effect okay and then we're going to say we're going to say const unsubscribe unsubscribe just like that and we'll say on off State changed and we're going to take in the off there off and the current user Call It Whatever You Like and we'll set our user to the current user just like that and then we need to return and messed up there unsubscribe there we go and we get rid of that there cool and then instead of a dependency array or an empty array well we'll just say I'm going to change this run it whenever the user is updated so let's go ahead and save that now um just like we passed in our state for our user we also need to pass in any other functions methods that you declare in here so um our Google sign in being one of them um there we go our log out log out and then then that's it okay so there we have it let's go ahead and start up our development server again Dev now um similarly to importing like we did for the state for the user let's go back into our into our nav bar here and um what we want to do is import these functions as well or declare these functions so with our user there we're also going to have a Google sign in then also our sign out so we'll say Google sign in and sorry log out I think is what we called it log out so again once we pass functions through our auth context provider or whatever you named your provider and and your contacts you can actually just pull it in there and have access to these throughout your application you just have to make sure you import it from these two lines so handle sign in so we're going to call this function we'll say const handle sign in just like that and we'll this is going to be an asynchronous function here so we'll say async and what we're going to say is try we're going to use a try catch I believe that's what they use in their documents here and their documentation I believe it's the try catch so we'll say try we want to await Google sign in and then we'll say catch the error and we'll just console.log there okay let's go ahead and save that there perfect now um let's go ahead and we need a way to run this function so we'll add an on click down here we'll say on click handle side in and you know what let's go ahead and just we'll do the same thing to this one since signing up since we're signing in with a Google account signing in and signing up is actually just going to be the same so kind of easier for us so let's go ahead and save that now if we go back here our users hopefully if we log in if we haven't done anything wrong um let's see what happens so I'm going to click log in you see this pop-up here choose an account so this is my Google account here let's see what happened and let's go in here getting some errors there encoding and there you have it so this is I'm now authenticated okay and we have access to all my Google information inside of my Firebase projects it's pretty cool so let's take care of this error I saw this the other day I think we just need to install can't resolve encoding I'm going to type npmi encoding that should take care of that all right sorry about that and then let's go ahead and start development server back up hopefully that takes care of that now that we're authenticated but you can't tell all you see is the same thing so let's go ahead and do a few things here so on our nav bar I just noticed that says login and login you guys probably saw that um so what we're going to say in here is um is that running refresh there we go so for for our for our navbar if we're logged in we want to display some different information other than log in or sign up and also this profile page here this route we only want to show this if we're authenticated okay so um and and before we do that let's go and hook up our sign up our sign out function here as well so we can just take care of that so under here we'll say cons to handle sign out just like that and this is going to be in asynchronous function so we'll say async and again we're doing the try catch so we'll say try and we'll say await log out that's what we have and then catch air and console.log you're getting blown up on texting here um there we have our handle sign out and um so we need a sign out button right so if we're authenticated for signed in then we want to say something like welcome client welcome name and then also a sign out if we're not authenticated we're going to leave that as is so let's go ahead and say um down here right under Above This unordered um this UL here for the flex what we're going to say if is we'll open up our curly brackets here and we'll say if there's no user okay if there's no user then we're going to render out something else we're going to render out something else so if no user is true then we want to render out this here I'm just going to cut that yep paste it in there if we don't have a user then we're going to say log in and sign up and if uh if false then what we're going to display we'll have a div here and then inside here and as you can see we're actually authenticated so we don't see anything here because it's empty div we'll say welcome um welcome Clan or name and then we'll have a P tag that says sign out okay and on click we can with handle sign out yeah it'll sign out so let's go ahead and let me give this a class name cursor pointer that was bugging me there we go so we clicked that and now we're signed out we can refresh and we'll sign in now I just typed my name in here Clint but we're going to actually grab this from our profile so we'll refresh we see that and I know we have that little refresh page was kind of annoying we're going to take care of that as well so but this is hard-coded in here how do we access what's our how do we access our name from Google okay and we're going to do that right now so let's just go ahead and I'm going to console.log right here the user okay so this is all the information we're getting back from from Google so if we look at this we have access token display name that's my name we have email address are we verified yes a photo URL which by the way here let's go and copy this and this is that little square with like the initial in there or if you actually have a photo I don't know if you can see that gosh it's small let's sign in I don't know why that's so small but yeah there it is um that was crazy so um yeah lots of information in here so and here we have a unique user ID if uh you want to store like user specific data inside like a database or something like that so let's go and drop that down so how do we grab the name so we have the user so we need the name which they call it display name so instead of Hardcore the name what we can say is user Dot whoops display name is what it should be display name and that's actually going to be my entire name so if you want to cut that just make it like first name or you can do the email.email and just show the email address whatever so that's cool so there we have it that looks pretty good there now um if we refresh you can actually see that it blinks some content right there it flashes some content and we don't want that that's kind of a poor user experience it doesn't really look that great so we're going to manage that with some state so let's come up here and we're going to make a new uh you stay here at the top we'll say const um loading and we'll say set loading just like that equal to use State and by default we're going to set this to True okay and so um and what we're going to say down here let's create a function here we just type in right over there what are we saying you state not defined we'll say use State there we go um all right so instead of this console.log we can wrap a use effect in here okay so I'm going to say use effect and then inside here what we're going to say is const we're going to say check authentication something like this asynchronous function async and then what we're going to say is a weight new promise okay that resolve and then what we want to do is you know let's look at this and we'll say set timeout set timeout to resolve and we can just set a time I'm going to say 50 milliseconds and then what we'll say is set loading to false then we want to run this check authentication and we'll run that every time there's a change in the user let's go ahead and save um use effect use effects not defined use effects we'll bring that in let's go ahead and Save so free refresh here let's go down here we actually need to add this to our code down here so pretty easy what we're going to say in here um we can just say if we'll add it in here so let's say if loading is true display null else we'll check if there's no user so let's go ahead and save that so there you have it we don't we're not flashing the the login and sign up anymore which is kind of a poor experience so looks pretty good so now for our profile route here our profile link we only want to show our profile link if we're authenticated for not authenticated so we go and sign out we don't want to show that okay and before we do that let's go to our um let's go to our profile page here okay and on our profile page um on a profile page we'll say I set a profile page let's go ahead and say um we'll say welcome or let's say you know what we'll say You must be let's say logged into view this page is a protected route okay so how do we know if we're logged in we're going to do something similar to the navbar just like we did the nav bar we come over here and we'll just take this right here so let's copy this and we'll import that and then again just like we did we need to import this from import and we're going to grab the user user these are off just like that and outside of multiple code let's say what am I doing here oh whoops import user auth that's all right react oh the const there we go maybe I need a drink so again we need to add this used client at the top here I'm supposed to use I'm glad with one hand use client there we go and we're going to do the same thing with our loading State here so let's just go back to our our nav bar and I'm going to copy that there that use effect and we'll put this up here there we go we'll put that right in there and we don't need to change any of this code we'll leave it all the same and um of course we need import use effect use effect there we go and then inside here we're going to show basically if we need an installer const loading set loading equal to you stay and then by default is that true so if you damn it so if we're not if we're not logged in okay so if we're not logged in we want to see you must be logged in to view this page to protect the route else we want to say something like welcome username you're on the profile page this is a protected route so what we're going to say in here okay we'll say if um if user is true or say something else something else if the user is true we'll say we'll say welcome we can say user.display name you are logged into the profile page a protected route else will say You must be logged in always copy this or cut it rather and we'll paste it in there okay so let's save that see if we have any errors you must be logged in to this page it's protected route let's log in welcome Clint you are logged in the profile page it's protected route if we log back out it changes that looks pretty good there now um one more thing let's log in I want to show you this so if we refresh this you see this flash of content um you must be logged in again poor user experience we could make it no but this would be a good opportunity to since it takes up a large real estate portion of the page we can actually add in a a loader okay so we added our loading State and we're going to add in a gif but real quick what we're going to say here is um if we'll say we'll give it a space if loading is true we'll show something else we'll show something else here of its user so inside here we can just say we'll give a P tag something like that let's go ahead and save so there that's a little bit better we say loading but if you want to use something like a um a gif like an actual loader we can go and add that in as well so I'm going to create a new component okay I'm just going to call this um we'll call it spinner loader whatever spinner.jsx or AFC East and be our functional component now I'm going to pull over this spinner that I'm going to be using okay and it's just a gif so feel free to grab that that was it right there feel free to grab it from my GitHub or if you can just use the text loading either way is fine so what we're going to say here is import image from next Dash image sorry slash image slash image and then what we're going to hear I'm going to say import loader and this is going to be our spinner here from spinner dot GIF just like that and now we're going to add that in here so this div here we're going to have the next JS image tag or sorry sort how long do I said that source a loader and we'll give it alt of uh loading something like that okay and then we'll give this a class name we're going to say width full H screen and then we'll say Flex items Flex items Center and justify Center okay so let's go ahead and save that and do we import that let's go back to our page here and we need to import our um our spinner here so we'll just say import and our our page here is going to be the spinner page so we'll say import spinner from exact components from components slash spinner okay now let's just use our spinner here instead of this loading we'll just add our spinner it's like that so let's go ahead and save oh there you go cool so if we refresh instead of the loading we have that little spinner there so feel free if you want to change the sizing of this anything like that feel free to do so but this is kind of more or less how we can how we can add things in there so pretty cool now next let's go ahead and let's go ahead and log out and one more thing we still have this profile page so you must be logged in to view this page so why would we even display this link here in our nav bar so let's go to rnf bar here okay and we'll just scroll down to our profile page and just like we did with uh with everything else with our with our user status like we did with our loading what we'll say is if there's no there's no user let's be null else we'll render something else out on the screen and we'll just render this out on the screen so we can just move that up one we'll go ahead and Save so right now refresh that gets rid of the errors so if we refresh we're on our home page we're on our about page let's go to our profile page loading you must be logged in to view this page it's a protected route and again we can't see it and there's different ways you can do this you can add in a redirect or whatever this is just the way I set it up so let's go ahead and log in it logs Us in with Google welcome Clint Riley which is pulling our um pulling in our name from our Firebase Google authentication and there you have it let's go ahead and log out so there you have it guys next js13 Firebase sign in with Google hope you got some value out of the project if you did Smash the like button appreciate that thanks for watching and I'll see you on the next one

Channel: Code Commerce

Views: 20,762

Keywords: react, nextjs, web developer, programming, coding, web dev, firebase, sign in with google, google authentication, tailwind, css, html, javascript

Id: S_sV6bYWKXQ

Length: 36min 54sec (2214 seconds)

Published: Mon Jul 03 2023