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

In this video, Jon Meyers show how to configure Server Components to use cookie-based Auth, making the user's session available before the first SSR render. This means we can implement Protected Routes that are only available to signed in users! 🚀

Additionally, he configures Middleware to automatically refresh expired access tokens, before loading our application routes.

00:00 Introduction
00:19 Why you need Protected Routes
00:41 Adding a page for Unauthenticated users
01:28 Redirect authenticated users to landing page
02:41 Protecting the landing page route from unauthenticated users
03:14 Add personalisation for users with a custom welcome message
03:46 Explanation of session expiration bug
04:37 Configuring Middleware to refresh expired sessions
05:36 Next up: Server-side Mutations with Server Actions

👇 Learn more about Supabase 👇

[streamocu]

auth is sooo important... this series is the best on planet... love you guys ❤

[TeaganAtwater]

@Supabase @JonMeyers Currently NextJS throws the error "DynamicServerError: Dynamic server usage: cookies" when you try to do this unless a) you do it on a page or layout, and b) you include the line "export const dynamic = 'force-dynamic';" in your page/layout file. I'm not entirely clear as to why this is happening, but it's made it much more complicated to call "supabase.auth.getUser()" from within my server-rendered <Navbar />

[rgm]

You are amazing thanks man - was stuck on this weird issue but this video helped 🙏

[toomanyarguments]

This was an amazing 5 minutes. Wonderful explanation from Jon. Please continue to produce amazing content such as this one.

[emenikedaniel]

Love the tutorial! Precise and straight to the point. More videos on subscriptions and functions with supabase will be appreciated

[madhavkummara]

This is such a bad way of implementing protected routes. Doing it this way, you would have to write repetitive code to check the authentication status. Use middleware or context provider instead.

[camilogonzalez]

How would you implement the middleware using the @supabase/ssr package? As far as I can tell, there is no createMiddlewareClient() function in the ssr package

[silkodyssey]

Does anyone know which VS Code theme is being used here?

[loribryant]

What browser you were using just curious

[tomasburian]

Is it possible to immediately redirect the user to a login page once he opens the page? I want to make sure that he is either sent to the /dashboard route if he's logged in, or /login route if he's not.

[basics-school]

is there any video how to reset pass cause i cant redirect to page update-password

[AltcoinAnalysis]

Okay, been following the whole course but how do you access UUID in your code (or otherwise append it to 'todos' in the db). Triggers aren't working for me :(

[davebenjamin]

when i deploy to vercel, my builld fails unless I add `export const dynamic - 'force-dynamic'; I assume this is as a result of the cookies? Would love to see a vid explaining this behaviour...

[jasongallavin]

You shouldn't refresh an expired session. You should only refresh when it's not expired to extend the expirey. You are basically allowing a session to always be valid which is bad security practice

[victor.santos]

Kind of off-topic: but which browser are you using on 01:10?

[AnindoSarker]

I'm getting an error implementing this. Basically in Next.js pages router, I implemented middleware such that for protected routes, I automatically redirect users in the middleware. But this approach means that I need to add the redirect logic to every page where I want to redirect. It seems more repetative code here

[Grahfx]

Why not using the middleware for that ?

[appstuff]

yes please do a google auth sign in and sign out.

[nageldev]

For me, the cookie doesn't do anything. I can log in fine, but if I try to getSession, it just returns null. I can see the cookie in devtools. Really not having much luck with nextjs app routes.

[artu-hnrq]

Yeah... Which fields does a user (authenticated from some social login) has?