How to retrieve session in Nextjs and NextAuth Application | useSession() | getServerSession()

all right welcome to this tutorial uh it will be like a continuation of the last tutorial I made um I where I compared making authentication for next 13 and next page router so I will be showing you how to get session or how to retrieve session in next 13. so you you you should already know that the next 13 that's the app router by default pages are server components so for you to be able to get session in a server component and get it inclined component you have to use different methods that is provided by um next off and that is what we'll be doing here also something that um I think you should know in case it's not obvious already is that you for you to make a a component or a page to be a client you need to explicitly say it so this is a project I'm working on um sorry it's a bit bulky so it might be a little too long well I also want to point out something that you need to know so let's go to the page this is the roots directory and sort of yeah I don't get rid of this so that I will demonstrate what I want to show you so for you to be able to make this components now which is by default the server component you need to convert it to a client component now for you to do that you just need to add the use client string at the top here as soon as you add it this way it's converted to a client's component you just need to know that and we'll be using it as time goes on but we will not be converting this to a client component so let's clear that off and save that so if you are coming from my previous tutorial you'll notice that here we have a bit of difference in the way I am rendering this page this is the API off page where the configurations are supposed to be but you notice that here instead of having the bunch of configurations I don't have a reference to the configuration here so if I click on this it brings me to the configuration page let me drop it this side and bring this down a little bit so if you are coming from that tutorial all you really need to do for you to be able to get everything right here is to extract the configurations that was in this next of method and move it to a new file so I moved mine to a different file on that configuration so you can choose to put yours anywhere and lay down the configurations this way the way I laid it down here forget about the extra data that I've added here this is for a personal project that I'm working on so I've worked on a few things and added a few more configuration than what you already have but basically just extract what is here and drop it here and put a reference a variable here so that you'll be able to use it in other places in the previous tutorial we had to leave it here because we're not using it in any other place but now we need to use these configurations in other places if you do not do it this way then that means you have to literally write all these configurations again every time and we know we don't have time for that yeah we have big projects to build now that we are here um let me just log in uh the server is already running I'll just um quickly log in here so uh yeah push this in now I I want you to pay attention to a big part of this project that I'm working on it's a personal project so uh what I need you to focus on is on the configurations that we are going to be doing for you to be able to get the for you to get the session so um as it is now we are already logged in and this is setting up I am hoping that this project will be out very soon and everybody will have a share of it so now that we are here let's um we can just move to the dashboard uh like I said this separated I'm working on and hopefully it should be out soon um all right so now we are logged in let me move to to the home page there's nothing on the home page so that I don't overwhelm you with uh unnecessary details but the basic thing is that we are logged in now all right so the first one we want to do is how to log in sorry is how to get your session from a server component or a a server page so we just moved to this root directory this root page this is the page on the on the root directory here if you close off every other thing you notice that it's on the same level with every other thing on the roots directory um inside of the source page sorry inside of the source directory all right so close this off and close this close this yeah all these are closed now all right so you see it's at the root directory of the um of the app to close up now you shouldn't see it's all right so just pointing that out so that you understand where I am and where you can use to check out your own so what I need to do now for me to be able to get the session if you notice we logged in and yeah clearly there's somebody logged in according to oil huffy and that's a very plenty and the name is [Music] all right so we go back to our code now uh maybe I should um make a little Zoom here so that be sure you've seen it and we need to get server session not get session if you if you go back to um next um next auth it gives us the method that is we should use on the server side and this is it you can read this read up on get server session here um for you to be able to get this session the right way and not run into problems or running to um errors you'll notice that you can use it for the API routes here and um you can use it for the page routes yeah sorry here's the page route here so let's just go back to our project and all we need to do is the first thing is to get and the server session from here so we'll go back to our project we want to import I want to import it from next off slash next so guess our session from get sorry from next off slash next and then once you get that done the next thing is to come inside of the components the component function and you can just do cons section so you have some way to store it I say equal to get we are using server session and open close bracket like this now if you leave this like this without entering any details you won't be able to get the right results so let's log um session to the console and see what we get let's save it remember that this is um this is our component so we won't be getting the results of this console log here in the browser it wouldn't show up so let's inspect and see what we get here so notice that there's nothing here it's just bunch of errors that we're getting from the project because this is server component so let's go back here and check inside of our console so check inside of our console we'll see everything um that we need to know about the the session we are logging out and this this like a whole bunch of gibberish and I don't think we need this so let's clear our console here and then what we want to do now is to get this odd options so we named it out options if you check here alt option so we just want to import this so off options um it's automatically important for us on top of here so you see other options you are getting it from the configuration folder which I have down here of course I have a bunch of Errors there this is typescript and I have I must have done a few things wrongly there so I need to make that setup but that notwithstanding we we are setting everything up and so now let's check again um this other session and see what we get so uh so let me let me save this page yeah and let's wait and see what we get this time around so we now what we need to let's clear here let's do it clear and then let me refresh the pitch up here and see what happens so we refresh the page so let's come back here so what do we get uh all right just to be sure that everything works fine all right so um something you need to know for Server getting the server session is um it's always an asynchronous call so please make sure you put in the awits um they are with uh keyword here so I will be able to get the right results so this time around let's check again let's save and it's compiling let's see what gives us and boom we get the results we are looking for and that is it this is the user this is the name of the logged in user this is the email and we have the image and the ID and now if you go back to here of course like we say we can't see anything here in the console but look at the logged in user here from the profile you see it's exactly the same user in Jocko PE and then the email Library plenty and that is all you really need to get your session from the server like any server components of your choice so the next thing now is how to get um our session from a client component so um let's say a place where you decide to do the use client how do you get um how do you get your session so for us to demonstrate this let's create let's create um let's create a folder and call it test folder something like that test food huh and inside of it let's create a page so the page you you should already know that um the the way the way to create routes in the next 13 is to create folders and every page is named page.csx or page.jsx so what it means is if you hit any folder or if next year sits any folder whatever is the page inside of that fold that becomes the roots uh um The Roots page to be rendered so for here we'll do an RFC like this and we can actually name this anything we could just name it tests and it's cool um we can get rid of this so recall that this should be a client component but first of all let's navigate to this page on on our websites here so slash let's do a test and see that everything is working fine so beautiful so have the test word here clear up this and let's go back to our code we want to convert this to a client component if you don't convert it to your client's component and you try to get the session in the client way you'll get an error so for us to do that let's do the use clients and then here for us to get the session from a client component we will now use um the use session keyword if you go to the next sorry next Auto configure sorry documentation and go to the client API and part of it you'll see that there is the use session which is meant for the client side not the server side so the first thing we need to do is just to import this from here so let's import new session from next auth slash react notice that this is different from the get server session which is getting from next not from react so keep that in mind so that you don't run into an error and so here we want to do const and there's a bunch of things that you session gives us so we want to destructure it so we have the first one is data and that is where the session is actually situated and the second one is status so that tells us um what status we are are we login or are still unauthenticated so you session and make sure that this is a function and that is what you really need so if you lock this to the console and put in session and status you should get all the details that you need to render a component so so let's head back to the browser because this will show on the browser since it is a client component so and of course it's already showing and here remember we are showing the session and then we are showing the status so if you check the session and there is something inside and we open it there's the aspiring date but we're interested in the user to make sure it corresponds with what we have here so the user dot email is a very plenty and user.name is Jocko PE and come to this place and you see exactly the same thing so when you get down to the settings you should see it authenticated so it means that once you sign out it shouldn't be authenticated right so let's sign out after I was signing out um let's see so we're signed out here now and this is the home page right so let's go back to our browser notice that here is no here is no because this page is supposed to return the server um the server session right just make sure that we're on the same page so what we can do here is um page sorry server let's use server session to make sure we are all on the same page session or sped up correctly all right so This Server session save it and her so we have server session now here because we are logged out now how about for the um the Clans page here let's go back to our website here Android slash test and watch what we have here now now the session is no and the status is unauthenticated so that clearly shows that this is working and that is how you get your session in next 13 that is the app router it is that simple so just a quick run through um for what what we did the first thing if you're coming from my last tutorial which I will I'll make sure I add in the description and somewhere around the video here is make sure you extract all the authentication configurations yeah I'll put it in a separate page now like I pointed out this is a personal project that I'm working on so I have a bunch of configurations here that you do not really need and this is typescript error just overlooked that keep what you already have in your own configuration or in my format configuration if you've been using that project put it in a separate file and I I put my own in the configurations file if I could locate that yes or dot TS configuration like this now export it do not forget to export and as soon as you export it that means you'll have it available in every part of the project so move fast into our server component which is the root page um that we are using two things you need to make sure you do here the first thing is to make sure that this is asynchronous because you'll be you'll be um you'll be doing some asynchronous call here and then you put a weight here so that I don't get a bunch of error like um I got when I was creating mine then you move next to the client's component here make sure that you have used clients on top of here if not you get an error because you can't be doing a client's operation in a server component then you make sure you import the use session here after importing your session you can now use it here see how I destructured it here you can destructure and there's a bunch of other data you can destructure out of here but this is what's the most common and most important to us so make sure you destructure this and then you can now show it and then let's go back and test what we've done again you can click here and um let's log in again clear here and it's it's logging in like I said don't pay attention to a bunch of the things I'm I'm doing here because it's a personal project right just pay attention to the results of what we are doing and now that we are here we can just let's go back to the home page and then come back to our projects as soon as we come back to our project you notice that we already have the server session showing us what we have here right now let's go to the class component which is a test file and so we move to tests hit enter and watch the console drop everything that we have and that is the session and our status and that is it that is all for this tutorial I hope you you found it very beneficial I'll be making more videos and more often um I'll try to make it on a weekly basis so that you get to benefit everything I I have been learning everything I've been working on I I've been working on big projects and complex projects so I want to share as much knowledge as possible so please do subscribe uh share this video to everyone who you think this might be helpful and I really appreciate so you next week

Channel: Njoku Samson Ebere

Views: 722

Keywords: next, nextauth, auth, authentication, email, demo, tutorial, tutorials, javascript, nextjs

Id: fPkg-x8Lelg

Length: 19min 24sec (1164 seconds)

Published: Fri Sep 15 2023