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

The Next.js 13 App Router makes it really easy to redirect users on the server, before a route is loaded.

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

🧠 Full course: Cookie-based Auth and the Next.js App...
💻 GitHub repo: https://github.com/dijonmusters/nextj...

👇 Learn more about Supabase 👇

🕸 Website: https://supabase.com/
🏁 Get started: https://app.supabase.com/
📄 Docs: https://supabase.com/docs