Supabase and NextJS 14: Auth and Server Actions

Подписаться 4,4 тыс.

Просмотров 8 тыс.

50% 1

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.
Starter Code: jollycod.ing/supatodo-repo
Supabase NextJS Setup: supabase.com/docs/guides/auth...
Supabase oAuth Setup: supabase.com/docs/guides/auth...
-------------------------------------------------------------------
🐦 Twitter (X): jollycod.ing/x
🤓 Personal Site: jollycod.ing/me
💻 GitHub: jollycod.ing/git
JollyUI: jollycod.ing/ui
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

Опубликовано:

2 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 43

@motngay1niemvui 2 месяца назад

finally no bullshjt supabase tutorial, thank you bro

@user-je8nu5er7c 2 месяца назад

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

@ajlimler 2 месяца назад

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.

@dan.stacy1 Месяц назад

Amazing video. This was so helpful! Thank you so much.

@daviddrughi3337 Месяц назад

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

@simonottati 13 дней назад

this video is insane. thanks

@edgarapariciobaeza8296 2 месяца назад

Thanks a lot for this video. Help me a lot!

@kateegorova7092 2 месяца назад

Super helpful 💪🏻🎉

@XITAXB3AT 19 дней назад

you are great! love your work and your video

@pratikmohanty8664 2 месяца назад

Very Helpful, Thank You

@eliuddyn Месяц назад

Amazing 🔥🔥

@anassabidar101 2 месяца назад

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!

@yarapolana Месяц назад

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

@JollyCoding Месяц назад

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!

@yarapolana Месяц назад

@@JollyCoding Please do, the community needs it.

@davidlintin 26 дней назад

Next JS are changing the way cache works in the next release btw. They listened to users. 😮

@withoktaves 26 дней назад

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

@blink11101 Месяц назад

bro, this is a quality tutorial. thanks!

@JollyCoding Месяц назад

Glad it was helpful!

@MentoricGrowth 29 дней назад

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~

@mistersir3185 21 день назад

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?

@roylaw2866 Месяц назад

good stuff!

@matt-d-webb Месяц назад

Great tutorial! Note: The use of the word "essentially" (84 times) was perhaps a little overused 🙂

@ranavaibhav1 2 месяца назад

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.

@flanderstruck3751 11 дней назад

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

@ndricimidrizi 2 месяца назад

Thank you for this great video!

@hoixthegreat8359 9 дней назад

thanks so much! please do a tutorial on supabase's new-ish anonymous sign-ins feature :)

@prashlovessamosa 2 месяца назад

Great

@samuelhorn1 20 дней назад

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?

@simonedwards7101 27 дней назад

When you run build your code doesn't it show all the pages to be dynamic?

@digitalsahara6670 Месяц назад

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?

@JollyCoding Месяц назад

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".

@digitalsahara6670 Месяц назад

@@JollyCoding ohh, I see got you now! thank you so much for such a great tutorial and quick response.

@Innesb 23 дня назад

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.

@davidlintin 27 дней назад

Why didn’t RU-vid recommend this despite having notifications on “all”