Next-Auth email verification ?
Unanswered
Pacific herring posted this in #help-forum
Pacific herringOP
Do anyone got a tutorial about how setup email verification (at sign-up with credentials) ? I dont know why isnt working :
And there is my resend code :
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
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 :
Btw Im using Postgres and Prisma
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, getUserByEmailBtw 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 :
But every tutorial are using the name
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 :
But its weird because I follow a tutorial and everything work perfectly for him, and he got the name of the table
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, getUserByEmailBut its weird because I follow a tutorial and everything work perfectly for him, and he got the name of the table
VerificationToken instead of VerificationRequestUse 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
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 boringPacific 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 ?
@Pacific herring 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
NextJS is pushing forward the notion of Server Actions.
Since all your server components run in the server anyways, you can do all the work you would do in a api route, directly in your component
Since all your server components run in the server anyways, you can do all the work you would do in a api route, directly in your component
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.
@Clown NextJS is pushing forward the notion of Server Actions.
Since all your server components run in the server anyways, you can do all the work you would do in a api route, directly in your component
Pacific herringOP
Yeah but if I have a react native app, I have to remake all the api route twice ?
Yeah