Very very helpful video to introduce the usage of SupaBase. Thank you so much, i hope to see more videos like this, showcasing different available tech stacks by making a simple app like todos.
Thank you so, so much. As someone who is new to the frontend side, this was extremely helpful. It answered so many questions (page protection for example). If you have a Patreon or something where I could buy you a coffee, let me know.
This is the best straight to the point supabase nextjs tutorial, I only have one question is how can we customize the sign up page to get more information about the user! also manage user permissions and roles like pro and free members of a certain app. Thank you for your efforts!
Great tutorial! One concern, at 17:00, you add revalidatePath when a user logs in. Won't this clear cache for all app users every time a login occurs, since you're clearing the root layout and all its children?
A lot of people share similar thoughts on some of the NextJs stuff. I think Remix has stuck a lot closer to pure React that people find it an easier concept to grasp. Maybe I should do a tutorial on Remix one day!
@@davidlintin the only thing missing is fixing the turbopack, after years different computers, haven't managed to get a basic app (even without any calls) to be faster than 5s in development mode, production works fine (luckily).
I watched multiple video for supabase auth with nextjs and none of them tell that if you are using confirm email feature of supabase you will receive '429 too many requests error' as confirm email can send only 3 emails per day. As soon as I disabled that feature, my auth starts working. Thank you so much. I was stuck for 4 days.
thankyooooooooooouuuuuuuuuuuuuuuuuuu soo muchhhhhhhhhhhhhh i was having an problem like i couldnt get my data to display everytime i deleted or added it, but while watching this video, i got to know about revalidatePath and it solved it like thankssss a lottttttttttttt~
Hello. I see you are checking for user getUser at every action/routes. Is that efficient? Would it be better to have that single function in Middleware? Also, would you be able to give an example of how to hand dashboards for different roles.. i.e. parents, teachers, principal. Thanks for this great video.
Great video but what he's doing there is definitely a bad practice. Needless code duplication and it's prone to huge security gaps. Forgetting to add such validation on every protected page can be very easy
@@flanderstruck3751 "... what he's doing there is definitely a bad practice" actually, it's a good practice. You can read more why here: security-nextjs-server-components-actions blog from nextjs team "Forgetting to add such validation on every protected page can be very easy" -- I agree it's easy, but validation at page layer should be the last resource. As the first resource of validation should be at middleware layer. Here it is why: th-cam.com/video/kbCzZzXTjuw/w-d-xo.htmlsi=IgIX7_0ZrpRcWxP- @arnavaibhav1 Also, note that Supabase has unlimited queries as of now and using their auth APIs more than often should not be a concern.
Great tutorial! There’s still one thing I can’t really wrap my head around when building something like this. Imagine instead of todos, this app was for adding recipes, functionality would be about the same, except there would also be a route “/recipes” where everybody, logged in or not, could see all recipes added by logged in users. My problem when trying something like that is that the server component you have for the header uses cookies to check if a user is logged in or not, hence forcing also the public “/recipes” route to be SSR, where I want that part of the app to be SSG. How would you solve that? Making the header a client component using the client file instead, and having it flash the log in/log out part on refresh?
Hi there, great tutrial so far, love the explanations I had a questions around the 21:50 where you are signing up, I a getting a { status: 429, code: 'over_email_send_rate_limit'} error from supabase, I didnt change the code, just downloaded the repo and was following along, are you aware of why this could be?
This is related to the confirm email step I mentioned at around 5:00 , Supabase limits email confirmations that it can send, as you are supposed to link your own email provider. If you are just testing, toggle off "Confirm Email".
Supabase now has a very low email limit for sending verification emails. You can disable the requirement for verification emails in Supabase account settings (but be sure to enable it for production). A better solution is to specify your own SMTP server in Supabase settings. There are many SMTP service providers, but SMTP2GO provides 1000 email sends per month for free.
Great tutorial. But l am having problems logging in .It's saying error signing up and could not authenticate a user.The email is not being verified, and is saying waiting for verification, but l didn't receive the verification email. What can be the problem. Maybe l am putting the wrong email and password
Not gonna lie, this was actually harder than I imagined it would be. It's just so much to process, and there are so many syntaxes that were unfamiliar to me, maybe it all has to do with typescript?
Hope you can help, I've made it the 21min mark before getting an error on searchParams.message. Error: Route "/login" used `searchParams.message`. `searchParams` should be awaited before using its properties. I've tried making the Login function async and awaiting searchParams but the error persists. Any sugestions?
Now this! This is a TOP TIER tutorial.. Following along and applying this to a client's project. So far, so good. 👍🏻
Really good tutorial. Covers exactly the part I needed.
Thank you Jolly. Many parts of Supabase & NextJS Auth for me is clearerer than ever.
Maybe I need to watch this video onece more tomorrow.
Very very helpful video to introduce the usage of SupaBase. Thank you so much, i hope to see more videos like this, showcasing different available tech stacks by making a simple app like todos.
Why not handle all redirections from the middleware instead of importing the same code of user data from supabase to verify !user?
its nice to have someone creating a small projects. keep it up. looking forward to see more small projects using nextjs
finally no bullshjt supabase tutorial, thank you bro
Thank you so, so much. As someone who is new to the frontend side, this was extremely helpful. It answered so many questions (page protection for example). If you have a Patreon or something where I could buy you a coffee, let me know.
This is the best straight to the point supabase nextjs tutorial, I only have one question is how can we customize the sign up page to get more information about the user! also manage user permissions and roles like pro and free members of a certain app. Thank you for your efforts!
Great video! Really helpful! Can't wait for more Next and Supabase projects :)
bro I love you, God bless you, as you explain and show this is just something
this is absolutely AMAZING ! thank you so much! just amazing !
Great tutorial! One concern, at 17:00, you add revalidatePath when a user logs in. Won't this clear cache for all app users every time a login occurs, since you're clearing the root layout and all its children?
revalidatePath thing made me rethink using NextJS again, I really like Remix.
A lot of people share similar thoughts on some of the NextJs stuff. I think Remix has stuck a lot closer to pure React that people find it an easier concept to grasp.
Maybe I should do a tutorial on Remix one day!
@@JollyCoding Please do, the community needs it.
Next JS are changing the way cache works in the next release btw. They listened to users. 😮
@@davidlintin the only thing missing is fixing the turbopack, after years different computers, haven't managed to get a basic app (even without any calls) to be faster than 5s in development mode, production works fine (luckily).
I watched multiple video for supabase auth with nextjs and none of them tell that if you are using confirm email feature of supabase you will receive '429 too many requests error' as confirm email can send only 3 emails per day. As soon as I disabled that feature, my auth starts working. Thank you so much. I was stuck for 4 days.
thankyooooooooooouuuuuuuuuuuuuuuuuuu soo muchhhhhhhhhhhhhh i was having an problem like i couldnt get my data to display everytime i deleted or added it, but while watching this video, i got to know about revalidatePath and it solved it like thankssss a lottttttttttttt~
Hello. I see you are checking for user getUser at every action/routes. Is that efficient? Would it be better to have that single function in Middleware?
Also, would you be able to give an example of how to hand dashboards for different roles.. i.e. parents, teachers, principal.
Thanks for this great video.
Great video but what he's doing there is definitely a bad practice. Needless code duplication and it's prone to huge security gaps. Forgetting to add such validation on every protected page can be very easy
@@flanderstruck3751
"... what he's doing there is definitely a bad practice" actually, it's a good practice. You can read more why here: security-nextjs-server-components-actions blog from nextjs team
"Forgetting to add such validation on every protected page can be very easy" -- I agree it's easy, but validation at page layer should be the last resource. As the first resource of validation should be at middleware layer. Here it is why: th-cam.com/video/kbCzZzXTjuw/w-d-xo.htmlsi=IgIX7_0ZrpRcWxP-
@arnavaibhav1 Also, note that Supabase has unlimited queries as of now and using their auth APIs more than often should not be a concern.
Amazing video. This was so helpful! Thank you so much.
Super helpful 💪🏻🎉
bro, this is a quality tutorial. thanks!
Glad it was helpful!
awesome! helped!
you are great! love your work and your video
this video is insane. thanks
Thanks a lot for this video. Help me a lot!
Do you know how to solve this error in NextJS15?
Unhandled Runtime Error
Error: invariant expected layout router to be mounted
Amazing 🔥🔥
Great tutorial!
There’s still one thing I can’t really wrap my head around when building something like this. Imagine instead of todos, this app was for adding recipes, functionality would be about the same, except there would also be a route “/recipes” where everybody, logged in or not, could see all recipes added by logged in users.
My problem when trying something like that is that the server component you have for the header uses cookies to check if a user is logged in or not, hence forcing also the public “/recipes” route to be SSR, where I want that part of the app to be SSG.
How would you solve that? Making the header a client component using the client file instead, and having it flash the log in/log out part on refresh?
Hi there, great tutrial so far, love the explanations I had a questions around the 21:50 where you are signing up, I a getting a { status: 429,
code: 'over_email_send_rate_limit'} error from supabase, I didnt change the code, just downloaded the repo and was following along, are you aware of why this could be?
This is related to the confirm email step I mentioned at around 5:00 , Supabase limits email confirmations that it can send, as you are supposed to link your own email provider. If you are just testing, toggle off "Confirm Email".
@@JollyCoding ohh, I see got you now! thank you so much for such a great tutorial and quick response.
Supabase now has a very low email limit for sending verification emails. You can disable the requirement for verification emails in Supabase account settings (but be sure to enable it for production). A better solution is to specify your own SMTP server in Supabase settings. There are many SMTP service providers, but SMTP2GO provides 1000 email sends per month for free.
When you run build your code doesn't it show all the pages to be dynamic?
Very Helpful, Thank You
Thank you for this great video!
Great tutorial.
But l am having problems logging in .It's saying error signing up and could not authenticate a user.The email is not being verified, and is saying waiting for verification, but l didn't receive the verification email.
What can be the problem.
Maybe l am putting the wrong email and password
you need to put the emails that are part of the organization (or just put the email with which supabase is linked to)
Great video! Any recommendations for a custom SMTP?
It would have been nice to see how you protect routes at the middleware level
Can u make a video explaining how to add role based access control?
That OAuth with PKCE flow documentation doesn't exists anymore? Or is it me?
I thought I was insane bc I couldn't find it
Great
Not gonna lie, this was actually harder than I imagined it would be. It's just so much to process, and there are so many syntaxes that were unfamiliar to me, maybe it all has to do with typescript?
thanks so much! please do a tutorial on supabase's new-ish anonymous sign-ins feature :)
I dont get it, why he doesnt use client compoents?
good stuff!
Cool! What's the font VS Code?
JetBrains Mono!
can we do it with shadcn as UI front end?
This is using shadcn!
Great tutorial!
Note: The use of the word "essentially" (84 times) was perhaps a little overused 🙂
Why didn’t TH-cam recommend this despite having notifications on “all”
Hope you can help, I've made it the 21min mark before getting an error on searchParams.message.
Error: Route "/login" used `searchParams.message`. `searchParams` should be awaited before using its properties.
I've tried making the Login function async and awaiting searchParams but the error persists.
Any sugestions?
Prisma integration would've been optimal.