Content Security Policy issue when using auth0 with heroku-CodePudding

I'm trying to get auth0 to work with heroku, but having some difficulties.

I can get it to work locally without issues, but it just wouldn't work with Heroku

My setup: React app which is being server from express as a static resource

Code for auth0 provider:

const providerConfig = {
    domain: process.env.AUTH0_DOMAIN,
    clientId: process.env.AUTH0_CLIENT_ID,
    redirectUri: window.location.origin,
};

ReactDOM.render(
    <Auth0Provider {...providerConfig}>
        <BrowserRouter history={history}>
            <App />
        </BrowserRouter>
    </Auth0Provider>,
    document.getElementById("root")
);

The error I get when I try to login:

Refused to connect to 'https://small-dust-7659.eu.auth0.com/oauth/token' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Any help is much appreciated, thanks!

CodePudding user response：

Auth0 needs to know about your origin, so it can allow cross-origin (CORS) requests to be made from your site on Heroku.

There's a detailed description on how to set this up here.

Basically on your applications page you can set up your origins and URLs.

CodePudding user response：

The issue was to do with helmet configuration..

I added the auth0 domain to connectSrc and it solved the issue

    helmet({
    contentSecurityPolicy: {
        directives: {
            defaultSrc: ["'self'"],
            objectSrc: ["'none'"],
            scriptSrc: ["'self'", "unpkg.com", "polyfill.io"],
            styleSrc: ["'self'", "https: 'unsafe-inline'"],
            ----> connectSrc: ["'self'", "xxxxxx.eu.auth0.com"],
            upgradeInsecureRequests: [],
        },
    },
});