How to force SSL on projects using tRPC?

Zzrilman

6/3/2023

Hello everyone, I'm working on a project that uses create-t3-app as boilerplate. My project is hosted on heroku. I have an issue with forcing HTTPS connection. Before tRPC, I was able to solve this issue by using express-sslify like it was explained in this post on Stack overflow https://stackoverflow.com/questions/67490760/how-to-enforce-ssl-on-a-node-js-app-on-heroku Is it possible to enforce SSL on projects using tRPC?

Nnlucas

6/4/2023

I would typically handle this at the infrastructure level. DNS and Reverse Proxy, etc So it helps to know how you're hosting the app

Zzrilman

6/5/2023

Hey. I'm hosting my project on Heroku Basically I've tried to use the code from https://www.npmjs.com/package/express-sslify package By adding a middleware to my procedures, but that resulted in ,dns_probe_finished_nxdomain error on production. Then I found this article on tRPC website https://trpc.io/docs/server/adapters/nextjs And I've tried to write a custom handler that uses similar logic from the above-mentioned package. But the same error occurred 😔 Code snippet:

type Environment = "production" | "development" | "other";

// @see https://nextjs.org/docs/api-routes/introduction
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const currentEnv = process.env.NODE_ENV as Environment;

  const host = req?.headers?.["host"] ?? "";
  const forwaredProto = req?.headers?.["x-forwarded-proto"] ?? "";
  const local = req.url ?? "";
  const schema = forwaredProto.indexOf("https") !== -1 ? "https" : "http";
  const www = host.replace(/www\./gi, "");
  const fullUrl = `https://${www}${local}`;
  const removeSlash = (site: string) => site.replace(/\/$/, "");
  console.log("👉  file: [trpc].ts:69  handler  fullUrl:", fullUrl);

  const notLocalHost = !www?.includes("localhost");

  if (notLocalHost) {
    if (schema !== "https") {
      return res.redirect(removeSlash(fullUrl));
    }
    if (/^www\./i.test(host) && schema === "https") {
      return res.redirect(removeSlash(fullUrl));
    }
    if (/\/$/.test(fullUrl) && fullUrl !== `https://${www}/`) {
      return res.redirect(removeSlash(fullUrl));
    }
  }

  // finally pass the request on to the tRPC handler
  return apiHandler(req, res);
}

type Environment = "production" | "development" | "other";

// @see https://nextjs.org/docs/api-routes/introduction
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const currentEnv = process.env.NODE_ENV as Environment;

  const host = req?.headers?.["host"] ?? "";
  const forwaredProto = req?.headers?.["x-forwarded-proto"] ?? "";
  const local = req.url ?? "";
  const schema = forwaredProto.indexOf("https") !== -1 ? "https" : "http";
  const www = host.replace(/www\./gi, "");
  const fullUrl = `https://${www}${local}`;
  const removeSlash = (site: string) => site.replace(/\/$/, "");
  console.log("👉  file: [trpc].ts:69  handler  fullUrl:", fullUrl);

  const notLocalHost = !www?.includes("localhost");

  if (notLocalHost) {
    if (schema !== "https") {
      return res.redirect(removeSlash(fullUrl));
    }
    if (/^www\./i.test(host) && schema === "https") {
      return res.redirect(removeSlash(fullUrl));
    }
    if (/\/$/.test(fullUrl) && fullUrl !== `https://${www}/`) {
      return res.redirect(removeSlash(fullUrl));
    }
  }

  // finally pass the request on to the tRPC handler
  return apiHandler(req, res);
}