zrilman•2y ago

How to force SSL on projects using tRPC?

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?

Stack Overflow

How to enforce SSL on a Node.js app on heroku?

I'm trying to deploy a Node.js app on Heroku using express, and I am struggling to enforce HTTPS on all incoming traffic. I am using the express-sslify library to do this using the code below, whic...

3 Replies

Nick•2y ago

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

zrilmanOP•2y ago

Hey. I'm hosting my project on Heroku

zrilmanOP•2y ago

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);
}

npm

express-sslify

Enforces SSL for node.js express projects. Latest version: 1.2.0, last published: 6 years ago. Start using express-sslify in your project by running npm i express-sslify. There are 42 other projects in the npm registry using express-sslify.

Next.js Adapter | tRPC

tRPC's support for Next.js is far more expansive than just an adapter. This page covers a brief summary of how to set up the adapter, but complete documentation is available here