Next Auth using Server Side rendered auth w/ redirect

now in this video we're going to be looking at something we didn't check out in the last video around next off and that is how would you handle server-side authentication such as like redirecting without actually hitting the client side uh initially in order to maybe to redirect the login page so what we're going to do is i'm going to go ahead and pull up the code that we had yesterday and then we are basically going to transform this page right here which is currently a client-side rendered page so if i refresh right here i run yarndev and i refresh the page you'll see that even if i'm not signed in the page renders now that's fine for client-side application but what if you wanted this to basically never show this page and just redirect from it if you're not actually signed in one of the things we can do is we can change our use session to a get session so let me go ahead and do that right now so we do get session here and then instead of doing this inside of here what we're going to end up doing is we're going to come down here and with next of course you can do the async function for get server side props so we can say get server side props and then we are basically going to be using uh so context generally gets passed in here which it actually has a request that you can grab out of it and we're just going to be basically do the same thing that we did before up top except for we're going to go ahead and await this and we're going to say get session and then we're going to pass in that request there and then of course we're just going to need to return back the props so i'm going to say return props and then we're going to return back that session and of course that comes in uh here as session so we can actually just pass it in there and if we see this we're we're good we're everything's working as it was before if i sign in sign in with github it'll be redirected we'll have that session information in there and so if we like console.log this out we can say you know let's see what the session is right now and so if i refresh this page you'll see that down here i have my name my email my avatar as well as the access token and any expiration for that token all right that's awesome so how would we handle redirecting in this case well one of the nice things that next gives you is we can do a if there isn't a session so if like for some reason i'm not logged in we can just basically return back a redirect so we'll say redirect here and then basically we want to do a destination so where are we redirecting to now one of the things that we know is that there is a api auth endpoint that we need to hit so basically this right here api off sign in to redirect to and then we just want to make sure that this is not a permanent redirect because it's actually just going to be a regular redirect so hit save here we'll see that everything's working i can go ahead and refresh this page but if i sign out and i try to go to that page it instantly redirects me to the sign in so now we have blocked the user from seeing the content of this page unless they're truly signed in and we have like a server side rendered off so that's basically it for this video let me know if you have any questions leave them down below subscribe for more and we'll see you in the next video thanks for watching

Channel: nearbycoder

Views: 353

Rating: 5 out of 5

Keywords: React, Next, NextJS, Auth, Javascript, Development, Programming, Web Dev

Id: TLkJA11-aFU

Length: 3min 30sec (210 seconds)

Published: Tue Jun 22 2021