Next.js Discord

Discord Forum

Next-Auth email verification ?

Unanswered
Pacific herring posted this in #help-forum
Open in Discord
Pacific herringOP
Do anyone got a tutorial about how setup email verification (at sign-up with credentials) ? I dont know why isnt working :
providers: [
                ...previous code
        EmailProvider({
            from: process.env.EMAIL_FROM,
            sendVerificationRequest,
        
        })
    ],

And there is my resend code :
export const sendVerificationRequest = async (
  params: SendVerificationRequestParams,
) => {
  let { identifier: email, url, provider: { from } } = params;
  try {
    const resend = new Resend( process.env.RESEND_API_KEY! );
    await resend.emails.send({
      from: from,
      to: email,
      subject: 'Login Link to your Account',
      html: '<p>Click the magic link below to sign in to your account:</p>\
             <p><a href="' + url + '"><b>Sign in</b></a></p>',
    });
    console.log('Email sent to ' + email + ' with the magic link: ' + url)
  } catch (error) {
    console.log({ error });
  }
};

32 Replies

The email provider is meant to provide a one-time sign in using a magic link. The process of setting that up is done using nodemailer:
https://next-auth.js.org/providers/email

I dont really know of a tutorial but you could probably find a blog online if you searched.

For reference you could try checking this out and then customizing the code so that it works with resend instead: https://next-auth.js.org/providers/email#customizing-emails
@Clown The email provider is meant to provide a one-time sign in using a magic link. The process of setting that up is done using nodemailer: https://next-auth.js.org/providers/email I dont really know of a tutorial but you could probably find a blog online if you searched. For reference you could try checking this out and then customizing the code so that it works with resend instead: https://next-auth.js.org/providers/email#customizing-emails
Pacific herringOP
Ive seen this page, but when I signup a user, not token is generated and no email is sent. I also have an error :
https://next-auth.js.org/errors#missing_adapter_methods_error Required adapter methods were missing: createVerificationToken, useVerificationToken, getUserByEmail MissingAdapterMethods [MissingAdapterMethodsError]: Required adapter methods were missing: createVerificationToken, useVerificationToken, getUserByEmail

Btw Im using Postgres and Prisma
The only way to make thing work is by make my own call to send email with resend, and generate my own token with uuid, etc... But I guess its better to use the default setup from NextAuth
Pacific herringOP
There is something weird, the doc fro Prisma adapter say to create a table like this :
model VerificationRequest { id String @id @default(cuid()) identifier String token String @unique expires DateTime createdAt DateTime @default(now()) updatedAt DateTime @updatedAt @@unique([identifier, token]) }

But every tutorial are using the name VerificationToken instead. Right now, Ive go some weird use with login, like if I got the wrong email/password Im having this page :
Same with the route/api/auth/new-verification :
{"message":"There is a problem with the server configuration. Check the server logs for more information."}
What do the server logs say?
This is the logs of your dev server itself
@Clown This is the logs of your dev server itself
Pacific herringOP
Well I guess this :
https://next-auth.js.org/errors#missing_adapter_methods_error Required adapter methods were missing: createVerificationToken, useVerificationToken, getUserByEmail MissingAdapterMethods [MissingAdapterMethodsError]: Required adapter methods were missing: createVerificationToken, useVerificationToken, getUserByEmail

But its weird because I follow a tutorial and everything work perfectly for him, and he got the name of the table VerificationToken instead of VerificationRequest
Use verification token then
model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}
Also make sure your prisma adapter is setup
@Clown model VerificationToken { identifier String token String @unique expires DateTime @@unique([identifier, token]) }
Pacific herringOP
My prisma is already setup yep. But do I have to generate the email verification myself ? Like how people does for just sending a email verification when u signup with email && password ?
BEcause right now Im following a tutorial where I have to make my own token, but I dont wanna make something wrong so if there is a builtin functionality for that it could be more stable and easy for me
@Clown Also this: https://authjs.dev/guides/providers/email-http
Instead of following the tutorial follow the link i sent first.

This one
@Clown Instead of following the tutorial follow the link i sent first. This one
Pacific herringOP
But its for magic link right ? Not verify an email ?
Well yes, email provider is for magic links
IIRC
@Clown Well yes, email provider is for magic links
Pacific herringOP
Ohh only magic links okay, but how can I make a verification email than ?
Honestly im not that experienced in NextAuth, however If you want Credentials Login(email/password) then you'll need to handle the email verification yourself
@Clown https://github.com/nextauthjs/next-auth/discussions/3478#discussioncomment-1933721
Pacific herringOP
yes I gonna follow this, thx again and sry for my dummy question ahah
Nah its fine
@Clown Nah its fine
Pacific herringOP
Btw I kinda lost with all the notion of server side and client side. Because I need to use React Query for all my state in the app, but some tutorial make update in db with server action, others with api routes, etc... Which one should I use. Api route seems more clean for me but use fetch every time is kinda boring
Pacific herringOP
I plan to dev after a react native app, so maybe use API route is better no ? Because server action arent accessible from public right ?
So thats something to look into
@Pacific herring I plan to dev after a react native app, so maybe use API route is better no ? Because server action arent accessible from public right ?
I'm not sure about their public accessibility. I dont use them much personally since most of projects are more frontend related or older than server actions.
I saw something about being able to call them using the POST action.
Yeah