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

[@Supabase]

Check out the full playlist to learn about Postgres Views, Functions, Triggers and RLS: kzbin.info/www/bejne/f4C8d4ZjZ9F5oLc

[@amccullough19]

(nextjs noob here) The whole way through this video I was wondering why you were using a Layout instead of middleware for protecting routes, glad I stayed until the end :D Nice video 👍

[@luuks1609]

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

[@Monstermash355]

Already outdated

[@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 👍

[@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!

[@zwikhd]

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

[@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 👌

[@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! 😆

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

[@chucknorris4803]

You are SOO ZOOMED IN I CANT SEE ANYTHING

[@dziaddy]

supabase/ssr opts out of caching in nextjs so if I want to fetch any data with this package it totally ruins caching. How to handle this?

[@creatorsremose]

Extremely helpful, thank you Supabaggins!

[@JonMeyers]

You're welcome, Sam!

[@jonny555333]

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

[@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?

[@appstuff6565]

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?

[@nicolascalderon9366]

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]

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]

@@emptytank604 exactly!

[@_rkrd]

They really screwed up the documentation on this one. Everyone must be stumbling because of this.

[@heramoti123]

@@emptytank604 thank you for this ❤❤

[@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!

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

[@JeffreyHo565]

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?

[@quangminhtran7592]

I love your humor in the video! 🤣

[@JonMeyers]

Thanks! Glad you enjoyed it! 🙌

[@emptytank604]

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.

[@marcusgamboa6018]

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

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

[@mangakalatino]

hi, i have this message in my middleware Failed to parse cookie string: SyntaxError: Unexpected token 'b', "base64-eyJ"... is not valid JSON The error occurs because the supabase jwt is not a json string, I have already checked on github and I cannot find an explanation.

[@dheerajs2838]

hat is back :)

[@JonMeyers]

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

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

[@pep-r1g]

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

[@Omar_Al_Seddik]

Can you please cover storage with Next.js?

[@prateekjain2013]

@supabase i have exact same setup But facing a issue fom past 1 week I am using supabase auth and supabase db with NExt.js and in my API route I couldn't able to access user using getUser method session is also null when consoled, due to which I am unable to seed the db with user ID please help all possible ways I tried but now couldn't find a way to get out of this

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

[@Marcustoth-u5y]

The github link is not updated based on the code written here.

[@boyo_23]

Can you also make an updated tutorial on RBAC?

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

[@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!)

[@phantomx3710]

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

[@baguingi5589]

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]

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.

[@NilsWestgardh]

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?

[@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! 😆

[@kausikmr]

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

[@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!

[@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!

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

[@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!

[@Tanner-cz4bd]

Docs need to be kept upto date

[@wiesson1546]

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

[@gioelem5957]

Please do the same for SolidJs

[@dongums]

hope show some love for svelte

[@tejassethi9319]

I wish supabase had ttl so i could switch over

[@anstapol]

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 👍

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

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

[@raykay6613]

why you jump so much...

[@malinaeemi8603]

this didn't age well..

[@igorkovacevic2792]

why not?

[@Devine-q2i]

Outdated ! Do not use this

[@pratikkulkarni891]

Wait, is this video outdated already? It was like a month since it has been released. I am going through the docs and they are slightly different which is why I'm a bit confused

[@phantomx3710]

@@pratikkulkarni891 Yes, because `get,set and remove` is deprecated

[@igorkovacevic2792]

@@phantomx3710 Then what else are we suppose to use?