No video :(

Custom Sign-in Emails in NextAuth Using Resend

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

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

50% 1

This video will look at customizing the sign-in email in NextAuth using the Resend and React email package.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahra...
👉🏼 Project source code (checkout `email-provider` branch)
🔗 github.com/Ham...
👉🏼 Work with me
🔗 www.hamedbahra...
Chapters
0:00 Intro
3:00 Using SMTP
5:25 Customizing the sign-in email
7:00 Using HTTP
13:00 Using Resend
15:30 Adding React Email
17:40 Calling the custom provider
21:30 Testing the sign-in flow
22:54 Recap

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

15 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@rhh1090 5 месяцев назад

Dude, I love your approach/style. This was extremely helpful for me. Thank you!...from a happy new subscriber 🙂

@hamedbahram 5 месяцев назад

Thanks for the sub, and welcome to the channel! I'm glad to hear that.

@KamalSingh-zo1ol 3 месяца назад

What if we wanted to modify verification token method? Like I want it to be 6 number code and confirm it by inputting it in UI.

@hamedbahram 3 месяца назад

You can accomplish that by creating a custom flow using the credentials provider.

@abhilashm5236 10 месяцев назад

I am following all your videos , it’s very informative ❤️. Can you also make one video about micro front ends with next 13

@hamedbahram 10 месяцев назад

Glad to hear that! I'll keep that in mind for future videos.

@mathiasriissorensen6994 9 месяцев назад

I'm curious if this is for version five, as I started to get this error: Type error: Route "app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route. "authOptions" is not a valid Route export field.

@hamedbahram 9 месяцев назад

This is still using NextAuth v4. However the problem is exporting the `authOptions` from your `route.js` file. To solve this error extract the `authOptions` object into a separate file.

@biLLie_wiLLie 10 месяцев назад

Can you explain to me please - do nextAuth and Clerk do the same job? What is better?

@hamedbahram 10 месяцев назад

NextAuth is a self hosted authentication service while Clerk is a hosted or managed service. While both are pretty straight forward to use, Clerk comes with prebuilt components you can drop in your app.

@raphauy 10 месяцев назад

Very helpful, thank you!!!

@hamedbahram 10 месяцев назад

Glad it was helpful!

@hafeezullah9706 10 месяцев назад

Hi, I have top bar, menu, body and footer. All sections are in database, what will be best approach to call them using API? Hope you understand, please provide some reference regarding

@hamedbahram 10 месяцев назад

You can use server components in the App router and fetch data directly inside your component.

@hafeezullah9706 10 месяцев назад

How do I use sever component inside other server component. i.e category, categoryProduct. I want to load one after other, also want to use Suspense to show loader. please tell me how can i do it.

@hamedbahram 10 месяцев назад

Just like any other component in React you can compose server components.

@tedreams 10 месяцев назад

Nice thanks so much❤

@hamedbahram 10 месяцев назад

My pleasure!

@ahnafabir4157 10 месяцев назад

Thanks

@hamedbahram 10 месяцев назад

Anytime!

@inmosh 8 месяцев назад

As far as i know there is no simple way to change user's email after sign up. Maybe I'm wrong about that?

@hamedbahram 8 месяцев назад

It is possible to update the user record and change the email if using the email/credentials provider. Though it won't work if using social logins.

@samparhizkar5221 7 месяцев назад

Thanks for the great video. How do we go about joining multiple accounts/providers on the same profile (i.e. similar to how it's done in reddit or epic games where I can sign in both from my Google and Apple accounts)

@hamedbahram 7 месяцев назад

Good question 🤔 I'd have to test this, not sure if next-auth automatically links accounts if using the same email on both accounts.

@utech3657 10 месяцев назад

Hello that you for this video this was very help. But can someone please tell me why email provider not working with smtp method in next 13. Tested it on next 12 working fine but with next 13 ive got an 500 server error with the default signin email. Anyone please do let me know if you encounter this issue.

@hamedbahram 10 месяцев назад

I've had the email provider working in NextJs 13. You can clone my code and swap the custom provider with the built-in email provider and it should work. When calling the `signIn` method you need to pass the "email" as the provider Id like `signIn("email", {email})`

@utech3657 10 месяцев назад

@@hamedbahram ok will try and let you know thank you

@utech3657 10 месяцев назад

Hello ive clone your project still same error. I using Prisma client instead of mongo and install node mailer . Still cant use the default signin email. Internal 500 error

@hamedbahram 10 месяцев назад

@@utech3657 Not sure where the error is from, I'd have to look at your implementation. From a high level, you need to use the `PrimsaAdapter` in your NextAuth config.

@utech3657 10 месяцев назад

@@hamedbahram yes i have use prismaAdapter generate a database. I will go with next 12 as debuging this in next 13 is a headache. It should be simple but still dont know why i can post the default sigin email.

@ayushgogna9732 8 месяцев назад

do you know why am i getting this error Type '{ id: string; type: "email"; sendVerificationRequest({ identifier: email, url }: { identifier: any; url: any; }): Promise; }' is not assignable to type 'Provider'. Types of property 'type' are incompatible. Type '"email"' is not assignable to type '"oauth" | "credentials"'.

@hamedbahram 8 месяцев назад

Pass the `NextAuthOptions` type from `next-auth` to your authOptions type. See more here → authjs.dev/guides/providers/email-http

@uxander 6 месяцев назад

EmailProvider({ async sendVerificationRequest({ identifier: email, url }) { await sendVerificationRequest({ identifier: email, url }); }, }), This solved the type error for me

@ArmooredHD 5 месяцев назад

@@hamedbahram Actually passing that type is what pops the error, the type email doesnt exist, only OAuth or Credentials are available. the docs don't help aswell sounds outdated