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

💻 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

[piotrra]

Thanks for the great tutorial Jon (as always).

[electrolyteorb]

You just don't know how useful these are

[filipesommer]

Great guide! two small things:
1. the middleware.ts file works based on being in the same directory as the app/ folder, not necessarily the root of your project.
2. supabase content in general should push users to doing auth checks (incl. redirecting to the login page!) using middleware instead of showing that redirect example in layout.tsx for security reasons in the way nextjs layouts work

[FernandoHernandez-pzim]

way too clear, better than the documentation, thank you so much!

[Maraciuca_RCK]

the real ones, know this was posted yesterday

[matthaigh]

After /auth/callback finishes and I redirect, user is null in the subsequent middleware call

[kvetoslavnovak]

Thank you. Is there any estimations when SSR beta ends and we may use it in production?

[ninjagaskin]

if i want to get user details / auth from a client component do i have to create a separate supabase client?

[flnnx]

Careful here. If you use the Auth inside the root layout, it will force all of your static pages into dynamic.

[MrGuysmo]

Thanks a lot for this because the docs on your nextjs middleware guide is different and i could'nt make it working until now.

[levato]

is it possible to protect API routes/endpoints with Supabase auth? Let's say for example you have an API route that calls openai GPT completion and you don't want everyone to be able to hit that endpoint and cost you money?

[himesh_]

Can we cover more react stuff with supabase?

[BJRNextCode]

Why you alaways don't upload videos on Supabase? I am big fan of you brother. you are such a good teacher

[booi_mangang]

google provider doesn't redirect to the provided url - redirectedUrl. instead, it redirect to home page with the code, since exchangeCodeForSession(code) is in the route.ts of auth/callback ... this doesn't work

[oamarkanji]

Can you show us how to do supabase auth with prisma?

[tw]

But cookie based authentication forces to break SSG of Next.js, because it requires server run on every page render.. You should avoid using it on public pages.

[davidheimfert]

Really nice one !! Can you go further with customs claims to set customs roles ? 🙏🏼

[odogru]

Hey, I have a question. I have deployed an application that does not need any authentication. There is a function inside the code that makes some calculations upon the text that comes from the client by the text input form. Since this function runs on the client side, it exposes the supabase url and the key on console. How can I handle this problem? Thank you in advance.

[janglad]

Sorry but handling auth in layouts in Next is not secure at all and IMO reason for this video to be redone. Send a get request to the "protected" page through something like Postman with an RSC header and you'll be able to see the protected content in there.

[jaradaty]

And this is how to make things more complicated lol. come on..you can create better solution to handle the ss auth...make auto linking between sessions and jwt