> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hanko.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Troubleshoot

> A guide to help you with common issues faced when working with Hanko.

<AccordionGroup>
  <Accordion title="CORS error">
    Console

    <Frame>
      <img src="https://mintcdn.com/hanko/2iB49Inz8wUnw70r/images/troubleshoot/cors.png?fit=max&auto=format&n=2iB49Inz8wUnw70r&q=85&s=6e5b6de86f867a1f7aa8ab071c8e8ff0" style={{ borderRadius: "0.5rem" }} width="1438" height="212" data-path="images/troubleshoot/cors.png" />
    </Frame>

    Hanko Auth Component

    <Frame>
      <img src="https://mintcdn.com/hanko/2iB49Inz8wUnw70r/images/troubleshoot/technical-error.png?fit=max&auto=format&n=2iB49Inz8wUnw70r&q=85&s=f35b064afae6ec54d3de3ded8ce7ae06" style={{ borderRadius: "0.5rem" }} width="866" height="332" data-path="images/troubleshoot/technical-error.png" />
    </Frame>

    CORS errors usually happen when your app URL isn’t correctly set up in Hanko Cloud. If you’re developing locally, make sure to add something like `http://localhost:3000`. For production, use your live URL. Follow this [guide](/setup-hanko-cloud) for a smooth Hanko Cloud setup.

    Also, double-check that your app’s API URL is correct — even a missing or extra character when copying it from the Hanko Console can trigger a CORS error.
  </Accordion>

  <Accordion title="404 (Not Found)">
    Console

    <Frame>
      <img src="https://mintcdn.com/hanko/2iB49Inz8wUnw70r/images/troubleshoot/404-error.png?fit=max&auto=format&n=2iB49Inz8wUnw70r&q=85&s=783d41353237218693a835e19d9c730c" style={{ borderRadius: "0.5rem" }} width="1462" height="152" data-path="images/troubleshoot/404-error.png" />
    </Frame>

    Hanko Auth Component

    <Frame>
      <img src="https://mintcdn.com/hanko/2iB49Inz8wUnw70r/images/troubleshoot/technical-error.png?fit=max&auto=format&n=2iB49Inz8wUnw70r&q=85&s=f35b064afae6ec54d3de3ded8ce7ae06" style={{ borderRadius: "0.5rem" }} width="866" height="332" data-path="images/troubleshoot/technical-error.png" />
    </Frame>

    This error typically arises when the `API URL` has been incorrectly configured. Depending on your framework, you may need to prefix your URLs with PUBLIC, NEXT\_PUBLIC, or another specific prefix. This prefixing ensures that these environment variables are exposed to the browser and can be accessed by your frontend.

    Here are some of the examples

    ```sh .env theme={null}
    Next.js
    NEXT_PUBLIC_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io

    Nuxt
    NUXT_PUBLIC_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io

    SvelteKit
    PUBLIC_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io

    React
    REACT_APP_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io
    ```
  </Accordion>

  <Accordion title="'r' is read-only error when deploying a CRA">
    <Frame>
      <img src="https://mintcdn.com/hanko/2iB49Inz8wUnw70r/images/troubleshoot/r-readonly.png?fit=max&auto=format&n=2iB49Inz8wUnw70r&q=85&s=44a4f488e53ad3ae79559d9a37cfad77" style={{ borderRadius: "0.5rem" }} width="687" height="651" data-path="images/troubleshoot/r-readonly.png" />
    </Frame>

    You might get `"r" is read-only` error after you deploy a CRA (Create React App). To fix it you'll need to add `@babel/core`  as a dependency in your project. You can do this by running the following command:

    ```sh theme={null}
    npm install @babel/core
    ```
  </Accordion>

  <Accordion title="My issue is not listed here">
    Feel free to open a [GitHub Issue](https://github.com/teamhanko/hanko/issues) or join our [Discord Community](https://www.hanko.io/community). We're here to help!
  </Accordion>
</AccordionGroup>