NextJS, Strapi, Auth0 on localhost: How can I configure this to work without ERR_SSL_PROTOCOL_ERROR

Question

I am developing a web site with the frontend using NextJS, the backend is Strapi and I'd like to use Auth0 as the identity provider. I have configured Strapi to use Auth0 and this appears to be working. When I go to http://localhost:1337/api/connect/auth0 I am provided with the Auth0 custom login screen. However, when I pass the credentials, I'm returned an ERR_SSL_PROTOCOL_ERROR

I have tried to use caddy with the command caddy reverse-proxy --from :8080 --to :1337

With that I've updated my server.ts on Strapi to look like this:

export default ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env.int('', 'https://localhost:8080'),
  admin: {
    url: '/',
    serveAdminPanel: false,
    auth: {
      secret: env('ADMIN_JWT_SECRET'),
    }
  },
  app: {
    keys: env.array('APP_KEYS'),
  },
  webhooks: {
    populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false),
  },
});


process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";

I've updated my url's in the NextJS app to point to 8080 and updated the Auth0 callback URL's the properly accept the correct URLs and I'm still getting the ERR_SSL_PROTOCOL_ERROR

Any thoughts?

Answer 1

I usually develop without HTTPS enabled, because then you don't have to worry about SSL issues. When you are done developing, that's when you can switch to HTTPS.

For the development phase I use the following config in my Caddyfile:

http://localhost:8080 {
 reverse_proxy localhost:1337
}

If you want to use HTTPS anyways during development, you can use

localhost:8080 {
 tls internal
 reverse_proxy localhost:1337
}

tls internal will not work in a production environment so when you are deploying, you can use:

example.com {
  reverse_proxy localhost:1137
}

This will let Caddy manage the certificates by itself and you can be on your way :)