Sendgrid works locally with Nextjs but not when I host it on Vercel - next.js

Question

I get this to work locally, but get a Response Error: Unauthorized on Vercel.
I've created a Single Sender Verification on Sendgrid which is verified.
I've tried creating a new API key on Sendgrid but it still dosen't work.
I'm out of options.
This is my code in the api route:
import type { NextApiRequest, NextApiResponse } from "next";
const sgMail = require("#sendgrid/mail");
type EmailData = {
to: string;
from: string;
subject: string;
text: string;
html: string;
};
type DataResponse = {
data?: any;
success: boolean;
error?: string;
};
const emailAddress = process.env.SENDGRID_EMAIL as string;
const emailAddressTo = process.env.SENDGRID_EMAIL_TO as string;
sgMail.setApiKey(process.env.SENDGRID_API_KEY as string);
export default async function _(req: NextApiRequest, res: NextApiResponse<DataResponse>) {
if (req.method !== "POST") {
res.status(400).json({ success: false, error: "Invalid request" });
return;
}
const data = JSON.parse(req.body);
const { name, email, phone = "", message = "" } = data;
console.log("sgMail", sgMail);
console.log("--------------");
console.log("process.env.SENDGRID_API_KEY", process.env.SENDGRID_API_KEY);
console.log("--------------");
console.log("SENDGRID_EMAIL", process.env.SENDGRID_EMAIL);
console.log("--------------");
console.log("SENDGRID_EMAIL_TO", process.env.SENDGRID_EMAIL_TO);
console.log("--------------");
const text = `
Name: ${name} \r\n
Email: ${email} \r\n
Phone: ${phone} \r\n
message: ${message} \r\n
`;
let emailData: EmailData = {
to: emailAddressTo,
from: emailAddress,
subject: "Form submission",
text: text,
html: `<div>${text.replace(/\r\n/g, "<br>")}</div>`,
};
try {
await sgMail.send(emailData);
} catch (error) {
console.log(error);
res.status(400).json({ success: false, error: "Error while sending email" });
return;
}
res.status(200).json({ success: true, data: {} });
}
This is the log from the server with the error messages:
sgMail MailService {
client: Client {
auth: 'Bearer HIDDEN BUT ITS THERE',
impersonateSubuser: '',
defaultHeaders: {
Accept: 'application/json',
'Content-Type': 'application/json',
'User-Agent': 'sendgrid/7.7.0;nodejs'
},
defaultRequest: {
baseUrl: 'https://api.sendgrid.com/',
url: '',
method: 'GET',
headers: {},
maxContentLength: Infinity,
maxBodyLength: Infinity
}
},
substitutionWrappers: [ '{{', '}}' ],
secretRules: [],
MailService: [class MailService]
}
--------------
process.env.SENDGRID_API_KEY HIDDEN BUT ITS THERE
--------------
SENDGRID_EMAIL HIDDEN BUT ITS THERE
--------------
SENDGRID_EMAIL_TO: HIDDEN BUT ITS THERE
--------------
ResponseError: Unauthorized
at node_modules/#sendgrid/client/src/classes/client.js:146:29
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
code: 401,
response: {
headers: {
server: 'nginx',
date: 'Sun, 19 Feb 2023 20:57:56 GMT',
'content-type': 'application/json',
'content-length': '97',
connection: 'close',
'access-control-allow-origin': 'https://sendgrid.api-docs.io',
'access-control-allow-methods': 'POST',
'access-control-allow-headers': 'Authorization, Content-Type, On-behalf-of, x-sg-elas-acl',
'access-control-max-age': '600',
'x-no-cors-reason': 'https://sendgrid.com/docs/Classroom/Basics/API/cors.html',
'strict-transport-security': 'max-age=600; includeSubDomains'
},
body: { errors: [Array] }
}
}

Answer 1

Vercel deployments use dynamic IP addresses due to the dynamic nature of the platform and in Sendgrid their IP Access management was on, which meant that all requests from Vercel were blocked..
SOLUTION:
You can disable IP Access Management to reopen account access to any IP address and no longer maintain a list of allowed addresses.
From the Settings > IP Access Management page, click Disable Allow List.
A dialog will open asking you to confirm the decision. Click Disable.