The Right Way to do Auth with the Next.js App Router - UPDATED

In this updated version, Jon refactors the logic for protecting pages to use Middleware, rather than a Layout.

03:52 Implement Protected Routes by Redirecting Unauthenticated Users
04:25 Using a Layout to protect a collection of routes
06:16 Use the @supabase/ssr package to configure cookie-based auth
09:07 Configure Proof Key for Code Exchange (PKCE) route
11:26 Use Middleware to refresh expired sessions
13:58 Move Protected Route logic to Middleware
15:42 Use the `with-supabase` template to skip this whole configuration

💻 Videos to watch next:

👇 Learn more about Supabase 👇

📱 Connect with Us:

ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.

Build in a weekend, scale to millions.

#Supabase #AppDevelopment #RealtimeApps #DeveloperTools

[luuks]

I would love to see how we can build proper role based authorization

[zwikhd]

Your videos are so solid Jon! Keep up your incredible contribution to the community :D

[creatorsremose]

Extremely helpful, thank you Supabaggins!

[iamstarcode]

Nice, I have always imagine there could be a new way Auth will be handled in the Supabase and NextJs, there's now a slight change compared to when using the -e with-supabse of create-next-app in the utils middleware, let me go and edit my previous project accordingly, Thanks John 👌

[yarapolana]

how would you validate routes? some routes are plublic others are not, should we do an util with an array of “includes”|"startsWith"?

[suzma_a]

can you in middleware also have information added to custom JWT token, like user's subscription tier? thanks!

[mikejohneviota]

is supabase fix that weird spam log in SvelteKit supabase ssr package?

[rtorcato]

why doesn't supabase just work on an official nextjs adapter?

[codePerfect]

I just uploaded a video today which involves supabase auth and I was like wth changed🤣🤣. Glad it was just that

[JeffreyHo]

The docs show the middleware refreshing the token and storing it, but wouldn't it also be possible to include the if (!user) redirect to /login inside the middleware as well to do both?

[kausikmr]

can someone help me how to get the rows which are added today based on the created_at

[emptytank]

Is there a way to do "Remember me" checkboxes with supabase auth? I haven't seen any docs or instructions on how to do this properly.

[santiskiffa]

The github repo has not been updated to include this new way of protecting in middleware right? Would love to take a closer look.

[appstuff]

Hey thanks for this. I have literally set up everything using auth helpers with cookies, from signup form to middleware to callback.

Im using the NextJS approuter with basic email and pass signup offered by supabase atm.

Do you plan to do a simple migration video on that as well?

[boyo_]

Can you also make an updated tutorial on RBAC?

[yarapolana]

Does the middleware also run on api routes and auth/callback route? Is the validation needed for those routes?

[phantomx]

Can I still use this or do I need to change to 'getAll()' and 'setAll()'?

[pep-rg]

why db postgress and not supabase, it is confusing becuase is calling db from vercel so which db is this from
?

[funkdefied]

[EDIT 13:45 - This was addressed]

Very nice, but my understanding is that putting auth in Layouts is insecure. You need to use Middleware to keep is secure.

[marcusgamboa]

Do you create a new client on every request? Or just create it once and use it for all requests?