Build a React Data Dashboard App | NextJS, Typescript, MUI - 2.Authentication with NextAuth JS

well what's up coders and welcome to this next video in the data dashboard Series in this we'll be setting up authentication for our app and we want certain sections of the site to be restricted by authentication so unless you are authenticated you won't be able to view these parts of the site we also want the information that is to be shown on the site so things like username email Avatar so things like that profile image we want to be able to be seen we also want to make sure that we have a login form a login page we want to make sure that our header is set up to be able to show different states of being logged in and logged out so if you're enjoying the series so far make sure to subscribe below and keep informed of when we're going to be launching our next video but without further Ado let's get building [Music] so this is where we last left off we add our header page here our side menu and our dashboard page now a lot of the work that we're going to be doing today will be based on the header and rearranging this to work with our authentication to start with we want to make sure that we've got authentication set up and then we can start rearranging the rest of the layout components let's go ahead and install next auth onto the app and get started so next off is my preferred way of doing authentication on nexjs and it's really simple to get started we'll start with Google authentication to get going so if we go down here and it says npm install next door which we can do let's open up our terminal so for the rest of the series we're going to be using yarn from now on as our package manager you can use npm still if you want but I'll be using yarn so yarn add next off and we'll add next auth to the project and then we'll simply run the server now we'll just put yarn Dev that's all still working fine cool so you can see here it gives you an idea of what you need to do these are the three main things you need to set up so you need to set up the auth server which you can do in the pages API folder which we'll do in a moment then you need to wrap your app in a session provider we will do that momentarily and then you add in your sign in and sign out components and methods so let's start here let's add our auth server so if we take this URL path and we go into the code and we'll go here and we'll go to API and we'll click new file now we've already got these two parts already so pages in API so what we'll do is We'll add an auth folder and a next or file as well don't worry about this this is just this is just the convention for next auth so let's add it as a TS file ordinarily if uh you're using JS you can just copy and paste this and delete what you need but as uh I'll be using a typescript you might want to use what I'm using instead so I'll explain to you what this is so we're importing an auth options here so we're creating an object which essentially is creating auth options and we're we've got the Google provider and these are my custom authorization parameters so this is what I want it to do and it's typed for next auth options the reason I'm saying that is if you go to the documentation it's slightly different it's there's no types here um and you kind of have to figure everything out yourself if you're doing this on typescript but I've already done it for you so you can just essentially take my return types and use it there for for you now for this to work you can see that it's using process.env it says we need to use our environment file with a Google ID and a Google secret now this won't make much sense right now but if you have experience with EMV files you know that this is a node process to go and grab these valuables these variables so let's go grab those right now if we go to the root of the folder we can see I've already got a example EnV file and it's got a Google ID and our Google secret and this is just an example file you do need to include this into your folder into your project and then we also want a DOT EMV file now the dot EMV file is never going to be committed to your GitHub it's or wherever you're putting this up this is a very personal document that has very sensitive information these things here will help potential hackers get access to your Google Cloud information and run up really high bills or cause all kinds of Mayhem it gives them a lot of access to your server credentials and your secrets that basically authorize your app to do certain things with other services so you want to minimize contact as much as possible for anyone outside of the project with this information where you want this information really is either on your local system for testing purposes or you want this on your server for the server variables for them to handle it so at no point is it just Loosely out there to the public that's what you want to avoid so the way I would do it is I would go here and I would make sure that your dot EMV file is ignored I would add that in here as well now you can add it as a local file if you want but I usually add it as an EMV because we are going to be using best practices we are going to rename this to local the reason being is in the future you could rename this to uh Dev or QA depending on the server you want this to be on or production so being local usually means development so we'll go and refactor that so now that is emv.local so now this is hidden from GitHub you can't commit this up you can't put these secrets up but these secrets here Google ID and Google secret will show you how to go get them now you essentially need to go to your Google Cloud console to get these so let's go there now and go get them so if you go to your Google Cloud console you'll see that you have this credentials file on the left and I'll leave the link for this in the description so you can get to it easily I know it can be a bit confusing getting to this page through Google oddly enough so to create a new one you'd simply click create credentials oauth client ID web application and then you put in these details here which I'll show you what they are and essentially those details will be this localhost 3000 and localhost 3000 API off callback Google and what this will do is this will create all the correct Uris for the Google authorization and this will work on your Local Host so we know that that's created but if you haven't created that create that but here you should have your client ID and your client secret and you need to grab these two and take it over to your EnV file so in your EMV file add your ID and add your secret and then you should be good to go so now that we have that all set up and we have our Google provider that has its client ID and its client secret added we need to make sure that the type to Strings then this should all be connected up so the next thing we want to do is we want to go to our app folder so if we go to pages and app we essentially want to wrap this in a session provider for next off so let's do that now uh so now we've got the session component wrapping our component uh component and we've made sure to keep our styles.global.css for now we can probably delete that let's just have a quick look at our Global styles styles Global Styles yeah it's currently adding um some default styling I will leave this for now we'll sort this out in the styling update now that the session provider is added we know that next door is hugging the app so that if we want to pass authorization information amongst the pages or the other components we now have access to it because the component component is now wrapped and has access to the session information of when someone is authorized and logged in and there's all kinds of cool things we can do with this which we'll show you in the header shortly one of the main ones is being able to access certain pages so let's go and create a login component now so we've currently got the components so now originally we had the components within the pages folder but I'm going to delete that now I've got another components folder here in the source folder which is where we want to move it to but normally you can copy and paste that move it in there or just drag and drop it because I'm using Windows and WSL it has all kinds of permission issues so I just don't bother I copy and paste blessed of I who use the Mac OS or Linux and I don't really have these issues so we now have our login folder here so we'll delete this login folder and we will open this one now we've got my header and the sub menu or the side menu we need to create a new component so we'll create the login component in here we need to add a index file as well as the root um so let's just go to the header let's just make sure this points to the right file export So within our login component we're going to add our login component with our sign in and sign up sessions so in here you can see that we've got the login component and we've got the sign in and sign out methodology and all we're doing is we're adding a button to sign in or sign out with it simply saying Who We Are by email if we're signed in and if we're not signed in it just says not signed in and it's dependent on the session which we get from next off which is up here so you can see that we're requesting you session from next door and you can use this on every page to do UI that is based on authentication so you can simply have a Boolean using session to say do I show something or do or not based on if someone is authenticated so with all this setup let's go take a look so if you refresh the page so we've got an issue with the header and let's go to the index file here and see what it's complaining about so we moved the components folder cool so once we've made sure that these have got the right paths now that should work again so let's go check it out uh one one thing we forgot to add is the login component there we go so immediately we can see that it says we're not signed in so it's already got a current state assigned to us uh it already knows that we haven't signed in at all so what we'll do is we'll open up here we'll go to and now that you see that we get an auth button so we click sign in with Google and we will just click we'll click curious bytes so now like that it tells us which email address we're signed in with and it gives us all our state but we can do more than that we can actually grab all the information from the account and I'll show you how so if we go to the login component you can see that here we've actually got the user's email but we have more access to more stuff we could also say signed in as let's say session dot user dot name go check it out refresh signed in as curious byte we'll just change that to welcome refresh that welcome curious bye so now we've got the name we can also get the image so let's do that now but let's actually use an mui component so the mui component that I want to use is the avatar so Avatar is really simple we literally could just copy and paste that so and we'll take this as the name just do that in fact and then for this what we'll do is we'll put image we just need to make sure we import this from mui so just to be clear before this is all done you can see this is getting this from mui material um make sure that you've got mui material installed already next auth installed and emotion styled and emotion react installed as well I know we did this in the first video but just double check that that is installed still and also for good measure make sure you have mui icons material installed as well because we will be using that uh in the rest of the videos so with all these installed again if you remember we went to the mui home page and we installed it from here but just make sure you've got that and the icons as well if not I'll prompt you again when we get to the icon stage but let's refresh and have a look and there you go you can see now that we've got the Avatar showing we've we've set the Avatar to use the name as well which is coming up as C the image however is not so let's find out what's going on the expected type comes from property alt which is declared here on type okay let's deconstruct this a bit const Avatar URL equals so apparently just restarting the app just sorted that out which is very weird the point being we've got the logo and the Avatar working we've got it working with the same information that we had before which is brilliant um but now we have a sign in and a sign out State now we can do a lot with this um first being we can sort out the header so if we sign out we now get this date and what we'll do is we'll take some of this information we'll take the Avatar at least we'll go to the header add this in here take that go back up here and there we go so we now should have the avatar so if we see this do we see a blank one so nobody's signed in so we've got this set up and then when you sign in there we go we can now see our Avatar there but we want to take this one step further and we're going to add in a proper header just as a template for now so if we go to mui we're going to install the app bar component and what we're simply going to do is just take all of this and get this functionality so we'll have the logo here the menus with some buttons and a user profile with a menu so let's now add that to the header so I'll go down here oh just I'll just hinge this to header and we want to grab these from up here bring this down here const header there you go that's all set up we can grab that for now but otherwise we can delete that all right what's it complaining about nothing all right where's the Avatar so Avatar source is here so we want to change that we also want to change this to user dot oops we want to change that to session dot user dot name so that should bring in the Avatar name and if it can't get the profile image or if there is no profile image it'll just show the name here um we'll set that a string as we haven't deconstructed it so that should satisfy typescript now let's go take a look if you refresh that we have Avatar defined multiple times okay interesting aha yes cool right that's how she puts it all the way down here refresh that and there we go so now we have somewhat of a normal header and we also have some pages and in fact we can actually link these up so we can get the log out uh working so if we go to logout so these are our settings so essentially just map out settings here and put them here which isn't essentially what we want what we want to do is we want to have a specific menu items doing certain things so we're actually going to get rid of this map so it's currently we don't need a key anymore and what we want here is we want to see So based on the session if the session is true we want to say log out and if the session is false we'll say login so let's just double check that that is correct whoops forgot to maybe use a string cool right refresh that so let's click on here so it's saying log out and that is correct what we actually want this to do is sign out so I'm hoping that imported that from next off it did and what is this saying so now we want a similar option here so based off what happened so we'll say session sign out or sign in so what we're saying is if the session just make sure we add this in and that should work we'll get rid of the brackets here should be fine without it um now this is just for testing purposes we're going to take all this logic out anyway um because we probably want to do a bit more with this later on but let's go check it out so refresh this and it says log out so let's click log out just refresh this before we do that so we'll click log out so let's sign out and sign in refresh that so let's sign out and that signed us out so we are no longer signed in and then we sign in again and boom there we go so we can try this with other accounts as well all right so let's sign out again and sign in let's try with a different email address and that works now because this email address doesn't have a user profile it simply comes up with its initials which is handled by material UI so click that and click log out again so you can see here when we hover over it says open settings that's not quite correct we want it to say open profile settings or something like that so let's go back here it says open settings and we'll just click open profile settings there we go so we've got the dashboard showing here um which is fine for now we've got the dashboard showing here but we don't actually want to show the dashboard until the user logs in let's go to the index here and we'll just remove the login for now because we don't need it there we'll import the session ID again so we'll say the dashboard only shows if you're logged in and the side menu as well so we want both of these to load only if um that the user session is so so if the user is logged in then show these otherwise do not now we just need to wrap these in a fragment because there's two elements cool so if user is logged in show the side menu in the dashboard if not do not show those so refresh that uh brilliant and we probably want a message here as well so we want to say um login or something like that so if we go to the login page uh we'll actually re-add it back because what we're going to do is go to the login page and we're going to change this now we're just going to require this to sign in and sign out so we'll add we'll just change this to say please log in and we will use an mui button to do this and put that from mui and we'll just install we'll just import the button we don't need to import all of mui and we'll choose the variant and the Vari we're going to choose is contained so we'll choose the contained variant and we'll have the color set to primary actually we'll have it set to success brilliant right so let's go refresh that and take a look so you can see here please sign in so we'll click sign in and then we'll log in and now we have access to the dashboard and all of that information um we can get rid of this so we do not need that anymore um we'll change this to a button as well and we'll change that to error so you'll see it now says sign out sign in brilliant so we've got the basics of this setup um will probably actually move this to within the header so it says signed in as user email we'll do that we'll go to header do typography so that's mui's version of a paragraph element refresh that cool so probably just put this in its own box here and there you go we can see that it's got it just needs a little padding 10 refresh and then we've just added a little spacing we'll probably reduce that a bit uh we use the SX property to add some custom styling properties uh we'll just do that and refresh I'm fairly happy with that as a good starting point and I think that means that our app is in a much better place now I know that the next video that we're doing is a styling video I just have to get rid of this padding uh it's killing me is really annoying uh so look at that um this is the default styling that came with it we're just going to get rid of that now so let's go back I believe that's in the global styling so we go to Styles I think it's in home perhaps yeah there we go get rid of that refresh and there we go I think that's much nicer we can get these all linked up as well going forward I think is a good starting point this is decent so that's been authentication on our next JS app essentially set up a header we've set up our login page we've set up our dashboard to be dynamic based on the user session whether they're logged in or not we've set up next author we've set up Google authentication and we've started to use material UI and introduce some other elements that will be using far more later down the road but with this foundation in place this leaves us in a really good place to start working on the rest of the app now it's very Bare Bones right now but we're about to add some styling and all the core setup and Foundation we need for the styling in the next video so if you're interested in that make sure to subscribe to stay tuned for when that video is and also follow me on the hashton on Twitter to follow the progress as well so stay tuned for the next video leave a comment below if you found that useful or if you just have any questions but my name's Harry and I'll catch you in the next one

Channel: Curious Byte

Views: 13,054

Keywords: react admin dashboard, react tutorial, react, next auth, nextauth.js tutorial, nextauth js, next auth google, nextjs 13, nextjs tutorial, data dashboard, typescript, material ui, material ui react, material ui react tutorial, authentication, data dashboard react

Id: g95MmAczBUg

Length: 27min 42sec (1662 seconds)

Published: Fri Mar 17 2023