auth0-spa-js must run on a secure origin.

npm run build gets error :" auth0-spa-js must run on a secure origin. "

2 Replies

Hi @japope. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you're encountering an error related to running auth0-spa-js on a secure origin. This is a common requirement for many authentication libraries, including Auth0, to ensure that sensitive data is transmitted securely. To resolve this issue, you need to ensure that your application is served over HTTPS. Here are some steps you can follow: 1. Local Development with HTTPS: - If you're developing locally, you can set up a local HTTPS server. One way to do this is by using tools like webpack-dev-server with HTTPS enabled or using a package like http-server with SSL certificates. 2. Deploying to a Secure Environment: - When deploying your application, make sure it is served over HTTPS. Most modern hosting services like Vercel, Netlify, and GitHub Pages provide HTTPS by default. 3. Using a Proxy: - If you are using a proxy server, ensure that it is configured to serve your application over HTTPS. Here is an example of how you might configure a local development server with HTTPS using webpack-dev-server:

// webpack.config.js
const path = require('path');
const fs = require('fs');

module.exports = {
  // other configurations...
  devServer: {
    https: {
      key: fs.readFileSync('path/to/your/server.key'),
      cert: fs.readFileSync('path/to/your/server.crt'),
      ca: fs.readFileSync('path/to/your/ca.pem'),
    },
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

// webpack.config.js
const path = require('path');
const fs = require('fs');

module.exports = {
  // other configurations...
  devServer: {
    https: {
      key: fs.readFileSync('path/to/your/server.key'),
      cert: fs.readFileSync('path/to/your/server.crt'),
      ca: fs.readFileSync('path/to/your/ca.pem'),
    },
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

For more detailed configuration, you can refer to the Auth0 documentation (https://auth0.com/docs/quickstart/spa/react#configure-auth0) for setting up Auth0 with a secure origin. If you need further assistance, you can also check the Auth0 documentation (https://auth0.com/docs) for more details on configuring your environment securely. If you encounter any specific issues during deployment, you might find additional insights in the Refine GitHub discussions (https://github.com/refinedev/refine/discussions/5349) or issues (https://github.com/refinedev/refine/issues/4365). I hope this helps! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@465923409973477386> kapa.ai is still learning and improving, please let us know how it did by reacting below