The Right Way to do Auth with the Next.js App Router - UPDATED
Vložit
- čas přidán 19. 06. 2024
- 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 - Věda a technologie
Check out the full playlist to learn about Postgres Views, Functions, Triggers and RLS: czcams.com/video/IOYFS-2lFjU/video.html
Extremely helpful, thank you Supabaggins!
You're welcome, Sam!
I would love to see how we can build proper role based authorization
Your videos are so solid Jon! Keep up your incredible contribution to the community :D
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 👌
can you in middleware also have information added to custom JWT token, like user's subscription tier? thanks!
is supabase fix that weird spam log in SvelteKit supabase ssr package?
I just uploaded a video today which involves supabase auth and I was like wth changed🤣🤣. Glad it was just that
Hello can u make a full stack multivendor ecomm with supabase !! supabase is lacking too many resources for beginners honestly !! i subscribed
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?
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?
how would you validate routes? some routes are plublic others are not, should we do an util with an array of “includes”|"startsWith"?
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 👍
The github repo has not been updated to include this new way of protecting in middleware right? Would love to take a closer look.
I love your humor in the video! 🤣
Thanks! Glad you enjoyed it! 🙌
Do you create a new client on every request? Or just create it once and use it for all requests?
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.
Does the middleware also run on api routes and auth/callback route? Is the validation needed for those routes?
yes and yes
why doesn't supabase just work on an official nextjs adapter?
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.
@@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!
Can you also make an updated tutorial on RBAC?
can someone help me how to get the rows which are added today based on the created_at
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?
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
We can call signInWithOAuth on the client side securely right? You're just doing it on the server for SSR?
Yep, correct!
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.
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.
Wouldn't the env variables be exposed to the client if prefixed with "NEXT_PUBLIC"? Is that not a security vulnerability?
[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.
Yep, that was the reason for the updated version of this video! 😆
Can you please cover storage with Next.js?
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?
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
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
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)$).*)"]}
@@emptytank604 exactly!
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?
I would like to know that too. Maybe JWT is stored locally, and fetch to Supabase only happens when it must refresh.
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
hat is back :)
I did a Twitter poll for this and the community has spoken! The hat stays! 😆
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...
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.
@@JonMeyers thanks for nice answer!
Please do the same for SolidJs
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.
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.
If I build a web3 auth flow how can I submit that to the team for integration?
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 👍
@@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!
Will you update the docs as well?
The docs also use Middleware 👍
@@JonMeyers But it does not show how to do route protection through the middleware
I just thought and most likely other found in confusing on how to protect routes through the middleware until this video. (Btw, thanks alot!)
Have the official examples on the website been adapted? If so, the link please :)
hope show some love for svelte
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?
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 👍
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.
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!
I wish supabase had ttl so i could switch over
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
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
Please do the Svelte equivalent
Docs need to be kept upto date
The Right Way to do Auth with the Next.js: I've just started using Astro instead
That does get around 90% of the config in this video! 😆
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.
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.
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?