<@U04UQ68083H> how do I test my own custom UI loca...
# ory-copilot
b
@chilly-king-10285 how do I test my own custom UI locally (localhost) against Ory Cloud?
b
A message from kapa.ai
To test your own custom UI locally (on localhost) against Ory Cloud (Ory Network), you should use the Ory Tunnel. The Ory Tunnel mirrors Ory APIs on your local machine, allowing your custom UI and Ory's APIs to share the same domain (e.g., localhost). This is essential for session cookies and CORS to work correctly during development. Steps: 1. Install the Ory CLI If you haven't already, install the Ory CLI by following the [installation guide](https://www.ory.sh/docs/guides/cli/installation). 2. Start your local application Run your custom UI on localhost, for example at
<http://localhost:3000>
. 3. Start the Ory Tunnel In a new terminal, run the Ory Tunnel, pointing it to your local app and your Ory project:
Copy code
ory tunnel --dev --project <project-id-or-slug> <http://localhost:3000>
This will start the tunnel on port 4000 by default. The
--dev
flag disables some security checks for easier local development. Now, Ory APIs are available at
<http://localhost:4000>
and your app at `http://localhost:3000`&lt;br> [Ory Tunnel documentation](https://www.ory.sh/docs/cli/ory-tunnel#ory-tunnel) [Local development guide](https://www.ory.sh/docs/getting-started/local-development#local-development) 4. Configure your SDK or API calls In your custom UI, configure the Ory SDK or any direct API calls to use
<http://localhost:4000>
as the Ory API base URL, not the remote Ory Cloud URL. Example (Node.js):
Copy code
js    import { Configuration, FrontendApi } from "@ory/client-fetch"     const ory = new FrontendApi(      new Configuration({        basePath: "<http://localhost:4000>",      }),    )
[SDK configuration example](https://www.ory.sh/docs/identities/get-started/setup) 5. Test your flows Open your app at
<http://localhost:3000>
and interact with your custom UI. All authentication and identity flows will be proxied through the tunnel, using your Ory Cloud project. Notes: - Always use
localhost
consistently (not
127.0.0.1
) to avoid cookie issues. - The Ory Tunnel is for development only. For production, configure a custom domain in your Ory project. - If you encounter CORS issues, the tunnel resolves them by mirroring Ory APIs on the same domain as your app. For more details, see the [Bring-your-own-UI integration basics](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#debug) and [Configure Ory to use your UI](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui#development) guides.