Redirecting unauthenticated users with Protected Routes in the Next.js 13 App Directory

I'm going to show you how to implement protected routes so these are special routes or URLs within our application that can only be visited by people who are currently signed in or any other condition you want to set now these require Super Bass auth to be configured to use cookies so make sure you click that link above if you don't know why that is but otherwise let's get into it here I have a server component that is fetching to-do's from Super Bass we're then pretty printing those to-do's out to the page and that looks something like this the problem is if we sign out then we see this weird empty state where it's just an empty array with no explanation to the user as to what they need to do next so if the user is not authenticated let's redirect them to an unauthenticated page and so we can do that by creating a new route under the app directory for unauthenticated Slash page.tsx and in here we just want to export a default function for unauthenticated and we're just going to return a paragraph that says please sign in to C to do now you might be thinking why aren't we showing them a login page and that's because our layout is already rendering this logging component on every single page so if we go back to the browser and we manually navigate to slash unauthenticated we'll see our sign up sign in and sign out buttons above this message that says please sign in to see to Do's so this is pretty clear we need to sign in now if we are signed in we probably shouldn't see this message anymore we should probably be redirected back to our list of to-do's and so in our unauthenticated page we want to create a new Super Bass client by calling the create server component client this one comes in from our auth helpers next.js package and this requires us to import the cookies function from next slash headers and we can pass that along to our create server component client function and now we can get our users session by awaiting a call to superbass.auth dot get session and because we're awaiting a promise here we need to make this an a sync function and then this session will either be a session from Super Bass if the user is signed in or it will be null if they're not so if we have a session then it means that we're no longer unauthenticated so in that case we want to redirect which is a function that comes in from next slash navigation and the page we want to redirect to is the landing page and then if we haven't been redirected here then we'll actually display our component so if we save this and go back to the browser we can see please sign in to see to do's and then if we click sign in we get redirected back to the landing page which displays our to-do's so let's do the reverse of that on our landing page and if the user is not authenticated then let's redirect them to the unauthenticated page so we can just copy this logic here and move it to our landing page so after we've created our Super Bass client and we need to bring in that redirect function from next slash navigation and now we want to reverse this logic so if we don't have a session we want to redirect to the unauthenticated page and so now if we save this go back to to the browser and refresh we see our signed in state and if we sign out we get redirected to our unauthenticated route which tells us to sign in to see how to do's and then we sign in and we get redirected back to our landing page where we can see out to Do's so since we know at this point that we definitely have a session that means that we have a user so we could add a little welcome message to say hello and then print out the session users email now if we had used one of the social logins to sign our user in like maybe GitHub using oauth we might have something more personal for this welcome message than just an email so if that's an example you want us to put together let us know in the comments but for now hopefully this little bit of personalization makes them feel like a valued user of our application and again if we sign out we get out unauthenticated message awesome so our authentication and redirection logic is working as expected but there's actually a bug when our users session expires so our user has left this tab open and they've gone off to do their to-do's and they've come back a couple of hours later and they refresh their to-do list but what's this please sign in they were signed in so what's happened here well over in our server component we're using this create server component client function and we're passing it this cookies function from next.js now this cookies function provides read access to cookies but we can't actually set a new cookie value and so when we call superbase.auth.getsession this session we get back from Super Bass is based on this old cookie which has expired and so this causes our redirect logic to trigger and we end up on this unauthenticated route but thankfully there's an easy fix to this called middleware so middleware is a special function that runs immediately before our route is loaded so we can create a new file in the root most part of our directory called middleware.ts and then in here we can export a function called middleware which takes in a request we then create a response by calling nextresponse.next and then we create a Super Bass client by calling the create middleware client function and this takes that request and response object and then when we call superbase.orth.get session if our session has expired then it will get refreshed and since our middleware client has the ability to set cookies on this response it will then be available over in our server component so the cookies that are used to create our server component client will contain that new refreshed session which is then what we get back here when we call superbase.auth.getsession which means we will have a session so we'll ignore this redirection and then we'll go off to Super Bass to get our to-do's and so now if we sign in we'll see our welcome message and our to-do's and if that session is expired it will be gracefully refreshed in the background rather than causing our user to be signed out sounds like it's time to add some to-do's to our list and for that we're going to need server-side mutations I recommend you check out this video right here where we look at using server actions to add new to-do's for our signed in user but until next time keep building cool stuff

Channel: Supabase

Views: 32,506

Keywords:

Id: ywvXGW6P4Gs

Length: 5min 50sec (350 seconds)

Published: Thu Jun 22 2023