> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-fix-docs-5525.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Describes how to configure Cross-Origin Resource Sharing (CORS) for an Auth0-registered application using the Auth0 Dashboard.

# Configure Cross-Origin Resource Sharing

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

<Card title="Before you start">
  * For security purposes, your application's origin URL must be listed as an approved URL. If you have not already added it to the **Allowed Callback URLs** for your application, you will need to add it to the list of **Allowed Origins (CORS)**.
  * Ensure that **Allowed Web Origins** in your application's **Settings** view is set to the domain making the request. The URLs can contain wildcards for subdomains, but cannot contain relative paths after the domain URL. To learn more, read [Placeholders for Subdomains](/docs/get-started/applications/wildcards-for-subdomains).
  * If you don't enable [Custom Domains](/docs/customize/custom-domains), you will need to create a verification page that uses Auth0.js as the fallback for the cross-origin authentication.
</Card>

Cross-origin resource sharing (CORS) is a mechanism that allows an application to load data (resource) from a domain (origin) that is different from the one that it's hosted on. A CORS policy is an explicit exception to the same-origin policy common to web applications.

For example, if you wanted your application (app.mydomain.com) to fetch a font from Google (fonts.google.com) in the background using Ajax, you would need to configure CORS.

## Configure cross-origin authentication

1. Go to [Dashboard > Applications > Applications](https://manage.auth0.com/#/applications) and click the name of the application to view.
2. Under **Cross-Origin Authentication**, toggle on **Allow Cross-Origin Authentication**.
3. Locate **Allowed Origins (CORS)**, and enter your application's origin URL. To learn more about Origins, read [Origin on Mozilla MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin).
4. Click **Save Changes**.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  If you do not need to use CORS for your application, ensure that **Allow Cross-Origin Authentication** is toggled off.
</Callout>

## Create cross-origin verification page

There are some cases when third-party cookies will not be available. Certain browser versions do not support third-party cookies and, if they do, they may be disabled in a user's settings.

For [browsers that are supported](#browser-testing-support), you can use the `crossOriginVerification` method from the [Auth0.js SDK](/docs/libraries/auth0js) in your application on a dedicated page to handle cases when third-party cookies are disabled.

For browsers that are not supported, such as Chrome, Opera, and Safari, cross-origin authentication will not work when third-party cookies are disabled unless you enable [Custom Domains](/docs/customize/custom-domains).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  **Safari's** configuration is labeled as "Prevent cross-site tracking" and uses [Intelligent Tracking Prevention](https://webkit.org/blog/7675/intelligent-tracking-prevention/). Unfortunately, this also prevents third-party cookies from being useful in authentication scenarios. Here's an example of how it affects [token renewal in Safari](https://support.auth0.com/center/s/article/troubleshoot-auth0-token-renewal-issues-in-safari-with-itp-enabled).
</Callout>

1. Create a page in your application that instantiates `WebAuth` from [Auth0.js](/docs/libraries/auth0js). Call `crossOriginVerification` immediately. The name of the page is up to you.

export const codeExample = `   <!-- callback-cross-auth.html -->

<head>
  <script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
  <script type="text/javascript">
    var auth0Client = new auth0.WebAuth({
      clientID: '{yourClientId}',
      domain: '{yourDomain}'
    });
    auth0Client.crossOriginVerification();
  </script>
</head>
`;

<AuthCodeBlock children={codeExample} language="text" />

When third party cookies are not available, Auth0.js renders an iframe to call a different cross-origin verification flow.
2\. Go to [Dashboard > Applications > Applications](https://manage.auth0.com/#/applications), and select the application to view.
3\. Under **Cross-Origin Authentication**, add the URL of the callback page you created to the **Cross-Origin Verification Fallback URL** field.

<Warning>
  For production environments, verify that the URL for the page does not point to `localhost`. The page must be in the same domain where the embedded login form is hosted and must have an `https` scheme.
</Warning>

4. Click **Save Changes**.

For more details, view the [cross-origin authentication sample on GitHub](https://github.com/auth0/lock/blob/master/support/callback-cross-auth.html).

## Error codes and descriptions

<Warning>
  Error descriptions are intended to be human-readable. They are subject to change at any time and should not be parsed by any code.
</Warning>

When Auth0.js (or Lock) is used for embedded login, it calls the `/co/authenticate` endpoint, which has the following errors:

| Status | Code                          | Description                                                                                                                                                                      |
| ------ | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `400`  | `invalid_request`             | Invalid request body. All and only of client\_id, credential\_type, username, otp, realm are required.                                                                           |
| `400`  | `unsupported_credential_type` | Unknown credential type parameter.                                                                                                                                               |
| `400`  | `invalid_request`             | Unknown realm non-existent-connection.                                                                                                                                           |
| `401`  | `unauthorized_client`         | Cross origin login not allowed.                                                                                                                                                  |
| `401`  | `password_leaked`             | This login attempt has been blocked because the password you're using was previously disclosed through a data breach (not in this application).                                  |
| `403`  | `access_denied`               | Wrong email or password.                                                                                                                                                         |
| `403`  | `access_denied`               | Authentication error                                                                                                                                                             |
| `403`  | `blocked_user`                | Blocked user                                                                                                                                                                     |
| `429`  | `too_many_attempts`           | Your account has been blocked after multiple consecutive login attempts. We've sent you a notification via your preferred contact method with instructions on how to unblock it. |
| `429`  | `too_many_attempts`           | We have detected suspicious login behavior and further attempts will be blocked. Please contact the administrator.                                                               |

In addition, you can also get a generic `403` error without an `error` or `error_description` property. The response body would just include something similar to the following:

`Origin https://test.app is not allowed.`

## Browser testing support

The following browsers can use cross-origin authentication when third-party cookies are disabled:

* Microsoft Internet Explorer

<Card title="Samesite cookie attributes">
  Previously, the [`samesite` cookie attribute](/docs/manage-users/cookies/samesite-cookie-attribute-changes) options were `true`, `false`, `strict` or `lax`. If you didn't set the attribute manually, Auth0 would use the default value of `false`.

  Effective February 2020, Google Chrome v80 changed the way it handles cookies, and Auth0 implemented the following changes accordingly:

  * Cookies without the `samesite` attribute set will be set to `lax`.
  * Cookies with `sameSite=none` must be secured, otherwise they cannot be saved in the browser's cookie jar.

  The goal of these changes are to improve security and help mitigate cross-site resource forgery (CSRF) attacks.
</Card>

## Learn more

* [Embedded Login](/docs/authenticate/login/embedded-login)
* [Cross-Origin Authentication](/docs/authenticate/login/cross-origin-authentication)
* [Application Settings](/docs/get-started/applications/application-settings)
* [SameSite Cookie Attribute Changes](/docs/manage-users/cookies/samesite-cookie-attribute-changes)