Тёмный
No video :(

Verify an email during user registration with Next.js 13! Mailgun and React Server Components! 

Build SaaS with Ethan
Подписаться 7 тыс.
Просмотров 12 тыс.
50% 1

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

 

5 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 77   
@raybenchen
@raybenchen Год назад
What a story telling! This is the definition of “slower is faster” because it is grabbing user’s attention that matters the most: Your pauses and breakers between sections of the content really gives the user the time to think what just learned, what is ahead, and reenergizes user’s curiosity to continue.
@ethan_mick
@ethan_mick Год назад
Thank you! I love this so much. Some people want the pace to be faster, but my editing isn't good enough for quick paced "boom boom boom" of better youtubers. So I tend to move at my pace, lol
@baybay1234
@baybay1234 Год назад
Love your content as always, Thanks Ethan! If I may suggest, have you considered doing a series of videos focused on building different saas projects from scratch? Topics such as multi-tenant architecture, subscription model setups, rate limiter setup with Redis/upstash are extremely helpful to cover. While these topics can be found individually on the internet, but there’s a lack of comprehensive resources that combine them all in one real world saas project. Honestly, I wouldn’t mind paying for such an in-depth video tutorial if exists
@ethan_mick
@ethan_mick Год назад
Hey, thank you, this is great feedback. I really want to get here, I've just been considering the best approach. It's a lot of video to edit. Or I could do a live stream and just post the entire stream. I'd want to do that consistently. Thoughts on what format would work best for you?
@baybay1234
@baybay1234 Год назад
@@ethan_mick I prefer videos around 15 to 20 mins in length. It's easy to digest the info that way, and I recommend breaking down the entire project into smaller segments and putting them into one playlist. I feel like it's a win-win for both the viewers and yourself as a creator because each video will do numbers on its own and you get more views afterwards :) You could still film the video in one go with a live stream, and then film the intro for each segment afterwards. I think that's what Theo is doing, which is really efficient imo
@ethan_mick
@ethan_mick Год назад
@@baybay1234 Thank you for your thoughts! It's really, really helpful; I appreciate it!
@adrianmaj247
@adrianmaj247 7 месяцев назад
Very helpful video, I like that the video is short, concise and to the point, without being too long. Really appreciate your work. Thanks!
@axelbulfon4071
@axelbulfon4071 3 месяца назад
Awesome explanation!!! Thanks so much, my friend. You win a new sub
@yigithancolak628
@yigithancolak628 Год назад
Your contents are so good that makes me question "why this guy is not famous yet ?"
@ethan_mick
@ethan_mick Год назад
Thank you, that is too kind!!
@nasko235679
@nasko235679 5 месяцев назад
I don't know if I'm dumb or what but for the life of me I can't understand vercel's documentation when it comes to credentials validation. Luckily I found a few videos that explained it clearly but the last piece of the puzzle I was missing was the email verification process. This was very helpful indeed, honestly i don't think I've yet seen a video tutorial making next js credentials verification from start to finish so if you decided to make a full "one-stop-shop" type of video it would be extremely helpful for new devs.
@chinzorigyou
@chinzorigyou Год назад
Waiting for next video.😀
@ethan_mick
@ethan_mick Год назад
Thanksssss, gonna get some out from my streams soon!
@fujisan0388
@fujisan0388 Год назад
Hi Ethan, thank you for another excellent video which I will no doubt watch many times to fully grasp everything. I enjoy how the videos are building logically on each other and since the setup changes slightly it forces me to adapt slightly just as in the wild. I assume the next step will be forgotten password? Finally, some feedback on things I think that you are doing right: 1: You talk normally and in a measured way. Many coding RU-vidrs seem to talk incredibly fast and work even faster which I can’t stand as I can only absorb new concepts so quickly. 2). Following on from my previous point, I greatly appreciate the pauses/asides you take to explain a concept and the bigger picture which is easy to forget when learning new things and also gives learners time to rest and reflect before moving onto the next stage. This is again something RU-vidrs often forget unfortunately. 3). The link to your website article is useful. Something about reading as well as watching helps reinforce learning I think. Thank you once again and I eagerly await your next video.
@ethan_mick
@ethan_mick Год назад
Thank you so much @fujisan0388, I appreciate the feedback. I'm always looking to get better and knowing what's working (and what's not!) is helpful. :)
@fujisan0388
@fujisan0388 Год назад
@@ethan_mick I am glad you found my feedback helpful. I have just read your most recent newsletter and I found it very interesting and thank you for it. I especially am interested in your observation that SaaS products are about 80% the same with the common areas being: - Authentication - Teams - Roles and permissions - User Profiles - Admin pages - Settings So far you have been covering authentication and is the plan to cover teams, roles etc working down the list?
@snivels
@snivels Год назад
Your videos are excellent, some of the best on RU-vid by far
@ethan_mick
@ethan_mick Год назад
Thank you so much!
@cemilulay753
@cemilulay753 11 месяцев назад
Very nice tutorial! Alot of tutorial out there for nextauth but none of them includes, verify email and password reset. Please do a video of password reset!
@ethan_mick
@ethan_mick 11 месяцев назад
You got it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vu78olWoV0I.html
@cemilulay753
@cemilulay753 11 месяцев назад
@@ethan_mick 👑
@josepedrodeferreira2655
@josepedrodeferreira2655 10 месяцев назад
love your work dude, you are the person who thaught me the most about nextjs, thank you so much !
@user-sm3rx2uw7r
@user-sm3rx2uw7r Год назад
Great material ! Please show us how to implement reset password too
@ethan_mick
@ethan_mick Год назад
Thank you, I will!
@ziaahmad8738
@ziaahmad8738 Год назад
Thank you.
@ethan_mick
@ethan_mick Год назад
You're welcome!
@speedster784
@speedster784 Год назад
What about a video about stripe integration along with PayPal to deal with subscription and payments essential stuff in Saas
@ethan_mick
@ethan_mick Год назад
For sure, I'll get to that!
@ekchills6948
@ekchills6948 9 месяцев назад
Wow! you've simplified alot of things thanks alot
@blahbleg9950
@blahbleg9950 Год назад
This is very helpful thanks!!! Waiting for the reset password video!!!
@ethan_mick
@ethan_mick Год назад
Coming soon!
@redmatrice4709
@redmatrice4709 Год назад
Great tutorial, i just come across your channel yesterday and liked your content, i saw that you have only 1.31k subscribers (i know it doesn't reflect the quality of your content) i subscribed because i like your content and to support you also, i have only one suggestion if i may, whenever you switch the camera between your screen to your selfie or the other way around there's always a slight delay (maybe just ms) of silence in the beginning and the end which give the impression that we are in a school not in a friendly tutorial (hope you get what i mean), so if i may suggest when editing try to cut those delays if you can and see the results, best luck
@ethan_mick
@ethan_mick Год назад
Thank you for the feedback, and welcome! Yes, my editing is... not the greatest. I'll work on making that better. Probably could use some J & L cuts.... Thanks!
@sanjaybalnad4180
@sanjaybalnad4180 6 месяцев назад
If activation token is used then why not delete it saving some storage, and what about token which are not used but expired? They will take disk space right?
@raduscortescu6512
@raduscortescu6512 8 месяцев назад
Thanks!
@Mr.MaxaaCusub
@Mr.MaxaaCusub Год назад
please make this project to deploy vercel. Great tutorial, thanks Ethan.
@ethan_mick
@ethan_mick Год назад
I can't do a full demo since it'll use my API key, but you should be able to fork the repo and easily deploy to Vercel, does that help? I should add the button...
@mbaochachigozie1785
@mbaochachigozie1785 Год назад
Lol, I cant believe I am yet to subscribe to your channel. I love your content
@ethan_mick
@ethan_mick Год назад
Thank you so much!
@WinstonHsiaoo
@WinstonHsiaoo Год назад
This video was awesome and super helpful, thanks!
@ethan_mick
@ethan_mick Год назад
Glad it was helpful!
@FelipeEscobedoSanguino
@FelipeEscobedoSanguino Год назад
Excellent content and explained very well thank you very much
@ethan_mick
@ethan_mick Год назад
Thank you so much!
@ThienbaoInvest
@ThienbaoInvest 11 месяцев назад
thanks Ethan. love you so much
@ethan_mick
@ethan_mick 11 месяцев назад
Thanks friend :)
@raymondmichael4987
@raymondmichael4987 Год назад
Thanks buddy; So using “action” will limit us to use reach-form-hook and zod? Because those runs on the client.
@ethan_mick
@ethan_mick Год назад
Those can and will still run on the client. The docs have an example of form validation (nextjs.org/docs/app/building-your-application/data-fetching/server-actions#validation), that runs on the client before the form would be submitted. You can do the same thing on the server and return an error.
@limitlessra5559
@limitlessra5559 Год назад
Great tutorial! Thank you for providing amazing content. But I don't know what is wrong with my code. When I click on the link from the email, it sends me to page not found. The code is same as yours. Don't knwo what's wrong... ChatGPT doesn't know either...
@limitlessra5559
@limitlessra5559 Год назад
Found my miskate. Forgot to include api in the link... Now trying to figure out how to show error messages with zod during registration process... Seems like there is no way to do it without ues client...
@ethan_mick
@ethan_mick Год назад
Ah, yeah, gotta make sure the URL itself is correct. As for Form Validation I think you can create a wrapper function that runs ZOD and then passes it to the Server Function. I'll see if I can whip this up (or let me know if you figured it out!)
@gaopeng6573
@gaopeng6573 9 месяцев назад
What a wonderful lecture! Just one question for me, following your code, I could try many times about token that was sent to my email, i also update the activate token as well like you did, is it mean user could use token many times during 24 hrs or they just could use one time? Thank you very much!
@raphauy
@raphauy Год назад
Thank you! I like your content 👌
@ethan_mick
@ethan_mick Год назад
Glad you enjoy it!
@yunyang6267
@yunyang6267 Год назад
After the user clicks the URL in the email and gets to the API route, If I want the user to able to automatically sign in, how should I implement it? Should I make a page for that and direct the user to the page instead of the API?
@ethan_mick
@ethan_mick Год назад
This is... a great question. The API route handles validating the email is valid, but then getting them to automatically login requires some extra effort. There is now API in Next-Auth to just say "Make this session authenticated", nor do I see any easy API to create the JWT and pass it back as a cookie. So if we don't want to drop down another layer I think the best thing is either: 1. Redirect them to the login page 2. Create a new "1 time login token" and return that to the client (like on a new page) and then the client can make the "signIn" request with that token to automatically log them in. This might be worth a full guide to do, it's not as easy as it first seems.
@bennys96
@bennys96 Год назад
Would you recommend using Server Actions in Production?
@ethan_mick
@ethan_mick Год назад
It depends what you mean by "Production". A SaaS you're building by yourself and can handle the bugs as they may appear and downtime/bugs aren't a huge deal? Yes. An enterprise grade application where bugs are unacceptable and can cause customer complaints and loss of revenue? Hell no. I'm still running into bugs with Server Actions and so far they've been slow to fix them. The App Directory (IMO) was stable faster and earlier than these. I'd let them cook a bit longer.
@mohammedghazwanalmilhim7879
Love your content❤ I need help with this: «How to send the user to a page where the user enters a verification code and then he/she is sent back to login if the code is valid. Otherwise, if they have logged in and are not verified and then the verification will show up and they verify themselves, then the login must continue and the user will be sent to e.g. /dashboard.»
@ethan_mick
@ethan_mick Год назад
You can change up this tutorial to implement this. 1. Instead of a random UUID, generate a random short-code. Something easy to type. 2. Instead of handling it in an API route, have the link go to a page that let's the user enter the code. 3. If valid, mark their user as active and redirect to the login page (like the API route). Otherwise, show an error. 4. Post login, redirect to `/dashboard`
@regpin
@regpin Год назад
Great tutorial, thanks Ethan. I am trying to make a Saas currently, will be very helpful for me. May I ask how you set up file upload from a page, it can be a user photo or a pdf document for archiving purposes let's say. I checked AWS documentation but it is very complicated. Can you please make a tutorial for that. Thanks and regards.
@ethan_mick
@ethan_mick Год назад
I'll do what I can!
@saharilarshad1628
@saharilarshad1628 Год назад
const mailgun = new Mailgun(formData) how the line can be pass without any error? where to get formData?
@ethan_mick
@ethan_mick Год назад
Install the `form-data` package. Weird requirement for Mailgun. import formData from 'form-data';
@saharilarshad1628
@saharilarshad1628 Год назад
@@ethan_mick thanks.. its work..
@darawan_omar
@darawan_omar 11 месяцев назад
how we can find your lotus library ?
@ethan_mick
@ethan_mick 11 месяцев назад
Linky: github.com/a-bit-of-saas/lotus-ux There wasn't a huge interest in it, it felt. So while I really like the UI, it's not complete.
@thepatternplayback
@thepatternplayback Год назад
What package are you using to have Prisma auto complete like you do around 6:20?
@ethan_mick
@ethan_mick Год назад
I'm using the standard Prisma Extension: marketplace.visualstudio.com/items?itemName=Prisma.prisma And I have it set to: "editor.formatOnSave": true in my settings.
@achrefaissaoui8338
@achrefaissaoui8338 Год назад
Appreciate the content, Any idea how to do infinite scroll in nextjs app router
@ethan_mick
@ethan_mick Год назад
I'll see what I can do!
@Taki7o7
@Taki7o7 Год назад
the lotus stuff already demotivated me to continue ._.
@ethan_mick
@ethan_mick Год назад
What would you rather see?
@Grishopping
@Grishopping Год назад
discord ??
@ethan_mick
@ethan_mick Год назад
Not yet!! But feel free to contact me any way you want if you have questions :)
@zes7215
@zes7215 Год назад
wrr
@ethan_mick
@ethan_mick Год назад
🧐
Далее
Reflecting on React Server Components
26:33
Просмотров 45 тыс.
Cute kitty gadget 💛💕
00:23
Просмотров 6 млн
User verification email in nextjs
56:04
Просмотров 28 тыс.
React Server Components: A Comprehensive Breakdown
52:42
Set up Google OAuth with Next.js using Next-Auth!
21:00
Pure React vs Next.js | What’s Happening in React?
12:23
Send Emails with Next.js 13 - The Best & Easiest Way
16:10