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

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

Рет қаралды 10,426

Күн бұрын

Authentication is essential for modern app development! In this video, Jon Meyers configures Supabase Auth to use cookies, and implements OAuth using GitHub in an Email Client, written with the Next.js App Router.
supabase.com/docs/guides/auth...
The Next.js App Router blurs the lines between Client and Server, therefore, Supabase Auth needs to be configured to use cookies, allowing the user and their session to be shared across the entire Next.js stack - Client Components, Server Components, Server Actions, Route Handlers and Middleware!
In this updated version, Jon refactors the logic for protecting pages to use Middleware, rather than a Layout.
📹 Full Next.js Email Client playlist: • Build an Email Client ...
🧑‍💻 GitHub repo: github.com/dijonmusters/nextj...
00:00 The Right Way to do Auth with the Next.js App Router
00:44 Add Authentication with Next.js Server Actions and Supabase
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:
▶ Simplify complex SQL queries with Views in Postgres: • Simplify complex SQL q...
▶ 3 reasons you should use Postgres Functions and Transactions: • 3 reasons you should u...
▶ Fastest way to build a SaaS with Next.js, Supabase and Stripe: • Fastest way to build a...
👇 Learn more about Supabase 👇
🕸 Website: supabase.com/
🏁 Get started: app.supabase.com/
📄 Docs: supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
🐙 Github: github.com/supabase
💬 Discord: discord.supabase.com/
🐦 Twitter: / supabase
📸 Instagram (follow for memes): / supabasecom
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

Пікірлер: 78

@Supabase Ай бұрын

Check out the full playlist to learn about Postgres Views, Functions, Triggers and RLS: kzfaq.info/get/bejne/f7WJebZel9Kqmok.html

@creatorsremose Ай бұрын

Extremely helpful, thank you Supabaggins!

@JonMeyers Ай бұрын

You're welcome, Sam!

@zwikhd 15 күн бұрын

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

@luuks1609 Ай бұрын

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

@iamstarcode 27 күн бұрын

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 👌

@suzma_a Ай бұрын

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

@mikejohneviota9293 Ай бұрын

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

@codePerfect Ай бұрын

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

@mahdiboughanmi6781 Ай бұрын

Hello can u make a full stack multivendor ecomm with supabase !! supabase is lacking too many resources for beginners honestly !! i subscribed

@appstuff6565 26 күн бұрын

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?

@JeffreyHo565 28 күн бұрын

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?

@yarapolana Ай бұрын

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

@JonMeyers Ай бұрын

Yeah, you would need to add separate checks for the routes you want to be protected. A utility with an array of protected routes could be a good way to solve this 👍

@santiskiffa 17 күн бұрын

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

@quangminhtran7592 Ай бұрын

I love your humor in the video! 🤣

@JonMeyers Ай бұрын

Thanks! Glad you enjoyed it! 🙌

@marcusgamboa6018 21 күн бұрын

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

@emptytank604 17 күн бұрын

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.

@yarapolana Ай бұрын

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

@boyo_23 Ай бұрын

yes and yes

@rtorcato Ай бұрын

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

@boyo_23 Ай бұрын

If I am not mistaken, there was an adapter before. However, they moved to this architecture because more of the popular meta-frameworks are moving towards SSR. Hence, by having a general-purpose SSR package, it will be easier to maintain and replicate on different meta-frameworks.

@JonMeyers Ай бұрын

@@boyo_23 Yeah, we very unfortunately developed this just before the App Router was released and everything Next.js changed! 😆The SSR package is designed to configure Supabase to use cookies in any framework, you just need to specify how to get, set and remove cookies for the specific framework. We are looking at ways to simplify this though!

@boyo_23 Ай бұрын

Can you also make an updated tutorial on RBAC?

@kausikmr Ай бұрын

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

@RegalWK Ай бұрын

I have a question How do you suggest to to do with trpc and trpc context Lets say I have an app where I created protectedRoutes (based on authentication and role of user) Should I still call those supabase methods in server/client components and pass the cookies to this procedures or how it should be done the proper way?

@JonMeyers Ай бұрын

I don't have much experience with trpc, but I imagine if you're using that for fetching data, rather than supabase-js, then you probably need to do some manual plumbing to set cookies and work out what the user should have access to

@Dom-zy1qy Ай бұрын

We can call signInWithOAuth on the client side securely right? You're just doing it on the server for SSR?

@JonMeyers Ай бұрын

Yep, correct!

@williamliu796 Ай бұрын

Hey Jon, great video. I'm using middleware to protect my routes, but one super annoying thing is the supabase types still show that my user might be undefined and I have to handle that everywhere. I'd love some way of telling the supabase client that the user is guaranteed via nextjs middleware on specific routes.

@JonMeyers Ай бұрын

Good suggestion. Might be a bit challenging as the Supabase Client does not know about whether or not it is within a route that is protected by middleware. The types are correct here, but with the current routing logic, the user should always be present. Might be a good use case for using the ! operation. Or setting the variable with `as User` telling typescript that there will definitely be a user present.

@jonny555333 7 күн бұрын

Wouldn't the env variables be exposed to the client if prefixed with "NEXT_PUBLIC"? Is that not a security vulnerability?

@funkdefied1 Ай бұрын

[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.

@JonMeyers Ай бұрын

Yep, that was the reason for the updated version of this video! 😆

@Omar_Al_Seddik 2 күн бұрын

Can you please cover storage with Next.js?

@viniciusbecaleti Ай бұрын

I have a barbershop table and a customer table in my project. A customer is related to a barbershop, and I prefer separate authentications, how would I do this?

@JonMeyers Ай бұрын

You can do your own custom authentication outside the Supabase Client. Just make sure your tables have RLS enabled, and you are enforcing authorization rules server-side

@nicolascalderon9366 27 күн бұрын

why in the middleware didn't you have to exclude the "/auth/callback" route too? Every time the sign-in process starts, an intermediate redirection to that route ("auth/callback") will happen to exchange the code for the session token, and at that point the user is not retrieved yet -> so the middleware is invoked -> user is redirected to login again always

@emptytank604 17 күн бұрын

I had this issue trying to implement the google provider while following the video, so I added the auth route to my excluded routes in my middleware config: export const config = { matcher: ["/((?!_next/static|_next/image|auth|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"]}

@nicolascalderon9366 16 күн бұрын

@@emptytank604 exactly!

@joepetrillo6185 Ай бұрын

Can anyone explain why it’s ok for middleware to make a call to getUser every time? Every single route will have to make a fetch to Supabase in middleware? I thought this was bad practice? Does refreshing the session (getUser) in this case just mean getting a new JWT?

@edgarasben Ай бұрын

I would like to know that too. Maybe JWT is stored locally, and fetch to Supabase only happens when it must refresh.

@JonMeyers Ай бұрын

This example is a catch-all for all routes, but likely you would want to scope this down to just the routes that you want to be protected - require authentication getUser will ensure the user's session is not expired and also validate the JWT

@dheerajs2838 Ай бұрын

hat is back :)

@JonMeyers Ай бұрын

I did a Twitter poll for this and the community has spoken! The hat stays! 😆

@frontend_ko Ай бұрын

you used middleware to refresh expired cookie. but middleware has caching, which has a possibility to miss expired cookie. how can i make middleware check every request? Checking user in Middleware everytime looks inefficient...

@JonMeyers Ай бұрын

Middleware is not cached, it will check on every request 👍 It is inefficient! We are looking at ways to solve this elegantly in supabase-js, but the underlying issue is that Server Components only have read access to cookies, due to the technical limitations of streaming.

@frontend_ko Ай бұрын

@@JonMeyers thanks for nice answer!

@gioelem5957 Ай бұрын

Please do the same for SolidJs

@baguingi5589 20 күн бұрын

Mmm ok, so I'm a little confused, I used the create-next-app -e with-supabase and the starting code has no logic for protecting the app trough the middleware, so I guess he means that the starter code only sets up the app "except" the protection of pages? I thing this should be part of the starter code, as this information is not even on the supabase documentation yet! Otherwise, great video, I can finally correctly secure my pages.

@baguingi5589 20 күн бұрын

I should also add that this BETTER be part of the new docs, looking at my statistics, when using the old supabase-auth-helpers package instead of the new ssr package mixed with the old way of securing pages, I was getting 10-15 auth requests on login ONLY wich is crazy! Thanks to this it gets reduced to 3 auth requests, wich is much more reasonable.

@michaelfonda5409 Ай бұрын

If I build a web3 auth flow how can I submit that to the team for integration?

@JonMeyers Ай бұрын

I don't personally have any experience with web3, but Supabase and the SSR package are open source! So any one can open a PR or discussion 👍

@michaelfonda5409 Ай бұрын

@@JonMeyers sweet, I'll open a discussion first and maybe can find some people who can do the more technical parts of the integration. The auth process itself is quite simple, I use it in all my projects but it's done on the backend through webhooks instead of logging a user in. I've used cookies +JWT before but it wasn't as eligant as I'd like. I'm sure opening a discussion will help!

@boyo_23 Ай бұрын

Will you update the docs as well?

@JonMeyers Ай бұрын

The docs also use Middleware 👍

@boyo_23 Ай бұрын

@@JonMeyers But it does not show how to do route protection through the middleware

@boyo_23 Ай бұрын

I just thought and most likely other found in confusing on how to protect routes through the middleware until this video. (Btw, thanks alot!)

@wiesson1546 Ай бұрын

Have the official examples on the website been adapted? If so, the link please :)

@dongums Ай бұрын

hope show some love for svelte

@antontraceur Ай бұрын

What about oauth handler 😂 There’s no session yet when you get there. Haven’t you just prohibited the access on that route as well?

@JonMeyers Ай бұрын

That is a very good point! Might be a better idea to reverse this logic, and check for the routes that you want to be protected, rather than excluding the ones that should be public 👍

@jonathangamble Ай бұрын

This means you have to make 2 calls on every request to Supabase, even when there is no user. This solution has slowed down all server apps! The SvelteKit version does not do this.

@JonMeyers Ай бұрын

Yep, it is not ideal! We are looking into ways to make this more efficient on the Supabase side, but this is mainly due to the technical limitations of streaming which means Server Components can only have read access to cookies. If you have an expired session by the time you reach the Server Component it will have no way of refreshing it. This issue does not exist in SvelteKit!

@tejassethi9319 Ай бұрын

I wish supabase had ttl so i could switch over

@Bruno_OX Ай бұрын

I see a change in auth/callback to auth/confirm in the docs the real problem the GitHub of the update use the old version, but the docs show the new way of do. Wait for me work about this or someone resolve. haha

@JonMeyers Ай бұрын

You can use either. The auth/confirm version in the docs accounts for an issue users were experiencing when triggering an OTP from a separate device

@julienblanchon6082 Ай бұрын

Please do the Svelte equivalent

@Tanner-cz4bd Ай бұрын

Docs need to be kept upto date

@dkaigorodov Ай бұрын

The Right Way to do Auth with the Next.js: I've just started using Astro instead

@JonMeyers Ай бұрын

That does get around 90% of the config in this video! 😆

@janglad9136 Ай бұрын

4:40 "any logic we add before this return statement is going to be run for any of the child routes of this component". This is not true. Layouts do not rerun if you navigate between routes that are underneath them. If you put this auth check high up it may never rerun unless you do a hard refresh. I know you did end up using middleware at the end of the video but I honestly don't understand why you even show the layout way in the first place. Again, it doesn't rerun for all route changes, doesn't support static rendering and most of all is just not secure at all due to how streaming of RSCs work.

@sicario55 Ай бұрын

The right Way to do Auth starts with docs that don't require the same cognitive load to find the Right Way to do Auth & not having to revert to a video about the The Right Way to do Auth. Your docs? all over the shop, zero version separation from Pages to App router as well as client server & the search functionality is so slow making it unusable.

@NilsWestgardh 9 күн бұрын

The login redirect check at 15:10: if (!user && !request.nextUrl.pathname.startsWith('/login') { return NextResponse.redirect(new URL('/login', request.url)); } is different than the same check in the repo: if (!user) { return NextResponse.redirect(new URL('/login', request.url)); } Why is that?