I get failed to send mail error 500
Answered
Rhinelander posted this in #help-forum
RhinelanderOP
I am using nodemailer to send data from the form. In my /app/api/sendEmail/route.js is this code
import { NextResponse } from "next/server"
import nodemailer from "nodemailer"
export async function POST(request) {
try {
const { name, email, phone, message } = await request.json()
const transporter = nodemailer.createTransport({
service: "zoho",
host: "smtp.zoho.in",
port: 465,
secure: true,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
password: process.env.NEXT_PUBLIC_AUTH_PASSWORD,
},
})
const mailOption = {
from: process.env.NEXT_PUBLIC_AUTH_EMAIL,
to: process.env.NEXT_PUBLIC_EMAIL_RECIVER,
subject: "Wonderland support",
html: `
<h3>Helllo there</h3>
<li>Name: ${name}</li>
<li>Email: ${email}</li>
<li>Phone: ${phone}</li>
<li>Message: ${message}</li>
`,
}
await transporter.sendMail(mailOption)
return NextResponse.json(
{ message: "Email Send Successfully" },
{ status: 200 }
)
} catch (error) {
return NextResponse.json(
{ message: "Failed to send mail" },
{ status: 500 }
)
}
}Answered by Rhinelander
const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
pass: process.env.NEXT_PUBLIC_GOOGLE_APP_KEY,
},
})
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
pass: process.env.NEXT_PUBLIC_GOOGLE_APP_KEY,
},
})
22 Replies
RhinelanderOP
I call that in my form component like that
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [phone, setPhone] = useState("")
const [message, setMessage] = useState("")
const sendMail = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
try {
const response = await fetch("/api/sendEmail", {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
name,
email,
phone,
message,
}),
})
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`)
}
console.log(await response.json())
} catch (error) {
console.error("Error sending email:", error)
}
} to my inputs i added name="phone"
value={phone}
onChange={(e) => {
setPhone(e.target.value)
}} This is phone example it same for other just diffrent nameI would appreciate any help
@Rhinelander I am using nodemailer to send data from the form. In my /app/api/sendEmail/route.js is this code import { NextResponse } from "next/server"
import nodemailer from "nodemailer"
export async function POST(request) {
try {
const { name, email, phone, message } = await request.json()
const transporter = nodemailer.createTransport({
service: "zoho",
host: "smtp.zoho.in",
port: 465,
secure: true,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
password: process.env.NEXT_PUBLIC_AUTH_PASSWORD,
},
})
const mailOption = {
from: process.env.NEXT_PUBLIC_AUTH_EMAIL,
to: process.env.NEXT_PUBLIC_EMAIL_RECIVER,
subject: "Wonderland support",
html: `
<h3>Helllo there</h3>
<li>Name: ${name}</li>
<li>Email: ${email}</li>
<li>Phone: ${phone}</li>
<li>Message: ${message}</li>
`,
}
await transporter.sendMail(mailOption)
return NextResponse.json(
{ message: "Email Send Successfully" },
{ status: 200 }
)
} catch (error) {
return NextResponse.json(
{ message: "Failed to send mail" },
{ status: 500 }
)
}
}
try logging the error here and see what it is
} catch (error) {
console.log(error)
return NextResponse.json(
{ message: "Failed to send mail" },
{ status: 500 }
)
}RhinelanderOP
Apparently Username and Password not accepted. Even though that I copy pasted them in to google and logged in with no problem... I was just reading similar issues and found out that I should have less secure login enabled... but I can't turn it on as it is disabled (depreciated option)
@Rhinelander Apparently Username and Password not accepted. Even though that I copy pasted them in to google and logged in with no problem... I was just reading similar issues and found out that I should have less secure login enabled... but I can't turn it on as it is disabled (depreciated option)
oh can't help much there, I haven't use zoho for a while but btw, consider put your secret in non-NEXT_PUBLIC env
RhinelanderOP
I get this
oh you changed to google
create a app password in your google account
RhinelanderOP
const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
pass: process.env.NEXT_PUBLIC_GOOGLE_APP_KEY,
},
})
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
pass: process.env.NEXT_PUBLIC_GOOGLE_APP_KEY,
},
})
Answer
RhinelanderOP
Thank you. It works!
Any idea what would the best way to style my mail be?
This part
@Rhinelander const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 587,
secure: false,
auth: {
user: process.env.NEXT_PUBLIC_AUTH_EMAIL,
pass: process.env.NEXT_PUBLIC_GOOGLE_APP_KEY,
},
})
consider change the env to
AUTH_EMAIL and GOOGLE_APP_KEY because it will get bundled to client side javascript if its start with NEXT_PUBLIC prefixRhinelanderOP
but then i get error
@Rhinelander but then i get error
what error?
@Ray what error?
RhinelanderOP
I got it before but not now i must made mistake back then... maybe misspelled
RhinelanderOP
Thank you a lot btw!
np