Supabase and NextJS 14: Auth and Server Actions

Supabase is an awesome, open-source alternative to Firebase. Using it you can handle databases, auth and storage as well. Lets look at how we can do this on the Server Side, using NextJS, Email Login, oAuth Login (Github, Google etc). After, we will look at some of the React 19 / NextJS Features to handle forms, useFormStatus and useOptimistic to make out site a great user experience.

-------------------------------------------------------------------

Chapters:
00:00:00 Intro
00:01:07 Supabase Dashboard
00:08:29 Supabase Setup (Step 1)
00:12:55 Email Login/Signup (Step 2)
00:28:38 Add OAuth Providers (Step 3)
00:42:29 Create and Read (Step 4)
00:52:23 Update and Delete (Step 5)
00:59:52 useFormStatus (Step 6)
01:02:52 useOptimistic (Step 7)
01:16:49 Checkbox form action (Step 8)
01:18:47 Outro

[ead]

Now this! This is a TOP TIER tutorial.. Following along and applying this to a client's project. So far, so good. 👍🏻

[jrmayol]

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 Jolly. Many parts of Supabase & NextJS Auth for me is clearerer than ever.
Maybe I need to watch this video onece more tomorrow.

[devlearnllm]

Really good tutorial. Covers exactly the part I needed.

[MarloweRamirez-eq]

its nice to have someone creating a small projects. keep it up. looking forward to see more small projects using nextjs

[ajlimler]

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.

[yarapolana]

revalidatePath thing made me rethink using NextJS again, I really like Remix.

[motngayniemvui]

finally no bullshjt supabase tutorial, thank you bro

[andrewmcburney]

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?

[ГлебБуцкий-зс]

bro I love you, God bless you, as you explain and show this is just something

[muhammadusmanakram]

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.

[txmw]

Great video! Really helpful! Can't wait for more Next and Supabase projects :)

[ranavaibhav]

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.

[anassabidar]

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!

[daviddrughi]

this is absolutely AMAZING ! thank you so much! just amazing !

[yacinebenzi]

Why not handle all redirections from the middleware instead of importing the same code of user data from supabase to verify !user?

[adampage]

Great video! Any recommendations for a custom SMTP?

[samuelhorn]

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?

[blink]

bro, this is a quality tutorial. thanks!

[MentoricGrowth]

soo 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