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
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.
@@ewwitsantonio yes. You could put a redirect("/login") without any conditionals in the layout and the RSC payload would still include the protected page when sending a GET request. Jolly Coding recently did a video explaining it a bit more in depth, but it could also be helpful to read up on how RSC are rendered and sent to the client (something I should do too tbh lol, definitely don't fully understand it yet either).
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?
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.
@@JonMeyers might be missing something but if you're calling cookies in a route (or through a function that that route uses) it can not be statically generated at all right? So you'd only be able to SSG public pages with this approach.
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.
I am not an expert but looking at it from a high level, you need to make all the calls to supabase from a middleware or server component, and just call those from your client.
@@pablorodriguez196 Thank you for the response, this function requires the input that comes from the client therefore it can not be a server component, but as you said, middleware might be the solution
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
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
supabase.auth.onAuthStateChange not triggering when i do login using server action and login the user at the server then redirect user to protected page. i listen auth change in my main layout (client component). public & protected page using the same layout (client component)
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
Why 2?
Agreed since the middleware kicks in before anything else on nextjs, Nice one
the real ones, know this was posted yesterday
Literally thought the same just know. Already saw this stuff. Also read the tutorial for it already
We were running an experiment. You passed the test!
You just don't know how useful these are
How many people use github to login? No one except developers basically. I don't know why tutorials often go for the least relevant example.
Thanks for the great tutorial Jon (as always).
Thank you. Is there any estimations when SSR beta ends and we may use it in production?
After /auth/callback finishes and I redirect, user is null in the subsequent middleware call
way too clear, better than the documentation, thank you so much!
Can we cover more react stuff with supabase?
Why you alaways don't upload videos on Supabase? I am big fan of you brother. you are such a good teacher
Thanks! Glad you’re enjoying the videos! 🙌
Careful here. If you use the Auth inside the root layout, it will force all of your static pages into dynamic.
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.
thats crazy
Are you positive that is the case, even in this example at 12:40 where middleware is used?
I'd like to here the @supabase response too :)
@@ewwitsantonio yes. You could put a redirect("/login") without any conditionals in the layout and the RSC payload would still include the protected page when sending a GET request. Jolly Coding recently did a video explaining it a bit more in depth, but it could also be helpful to read up on how RSC are rendered and sent to the client (something I should do too tbh lol, definitely don't fully understand it yet either).
If you use middleware auth check then you are safe and the layout auth check is redundant in this video
@@dawidwraga correct, middleware for protecting pages is the way to go.
Really nice one !! Can you go further with customs claims to set customs roles ? 🙏🏼
That would be a great video! Will add it to the list! 🙌
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?
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.
yes apart from the big security flaw in doing it like this, this is indeed another reason to use middleware for protecting pages.
Yeah, for SSG, or public pages in general, the user does not exist and build time so there are no cookies 👍
@@JonMeyers might be missing something but if you're calling cookies in a route (or through a function that that route uses) it can not be statically generated at all right? So you'd only be able to SSG public pages with this approach.
Can you show us how to do supabase auth with prisma?
if i want to get user details / auth from a client component do i have to create a separate supabase client?
Thanks a lot for this because the docs on your nextjs middleware guide is different and i could'nt make it working until now.
Agreed! The docs are out of date. I spent hours trying to get auth setup. This video saved me.
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.
I am not an expert but looking at it from a high level, you need to make all the calls to supabase from a middleware or server component, and just call those from your client.
@@pablorodriguez196 Thank you for the response, this function requires the input that comes from the client therefore it can not be a server component, but as you said, middleware might be the solution
@@odogru77 How about create a server action and call that action inside your function?
Fantástico! Y como se hace?
Why is it reuploaded??
It was a test! You passed!
why reupload?
It was an experiment. You passed the test! 💯
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
bruhh, now deprecated
This guy's so annoying and despicable.
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
supabase.auth.onAuthStateChange not triggering when i do login using server action and login the user at the server then redirect user to protected page. i listen auth change in my main layout (client component). public & protected page using the same layout (client component)