Okta Signin-Widget 'Refused to frame 'https://dev-4913768.okta.com/' ' Error, ReactJS

I am using the Okta Sign-in widget with a React front-end that Im building. Everything renders properly on the page that I’m using. When I try to sign-in I get an error in the console that says this: ‘[Report Only] Refused to frame ‘https://dev-4913768.okta.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’”.’ Has anyone gotten an error like this? How can I fix it.

Here is my login page where im rendering the sign-in widget

const Login = (config:any) => {
  const { oktaAuth, authState } = useOktaAuth();
  const onSuccess = (tokens:any) => {
    oktaAuth.handleLoginRedirect(tokens);
  };

  const onError = (err:any) => {
    console.log('Sign in error:', err);
  };

  if (!authState) {
    return <div>Loading ... </div>;
  }

  return authState.isAuthenticated ?
    <Redirect to={{ pathname: '/' }}/> :
    <OktaSignInWidget config={config} onSuccess={onSuccess} onError={onError}/>;
};

I’ve seen this error recently. However, it was just a warning and didn’t cause my authentication with the Sign-In Widget to fail.

I saw it while updating an example to use the latest Okta React and Sign-In Widget. Fix Okta Sign-In Widget by mraible · Pull Request #2 · bradtraversy/react_otka_auth · GitHub

You might also check out our React + Sign-In Widget Quickstart.

On my end it didn’t say if it was a warning or not. But it does stop the Authentication process from going through. It doesn’t go any further than what’s shown in the image below