To integrate Ory authentication into a static website, you have a couple of main options depending on your requirements for user experience and customization: ### 1. Use Ory Account Experience (Hosted UI) Ory provides a built-in, hosted user interface called the [Account Experience](https://www.ory.sh/docs/account-experience/) that handles all authentication flows (login, registration, etc.). You can simply link to these flows from your static site. This is the fastest way to add authentication without building your own UI. Steps: - Set up an Ory project in the Ory Console. - Configure your allowed return URLs and domains in the Ory Console. - Add "Sign In" and "Sign Up" buttons to your static site that link to the Ory Account Experience endpoints (e.g.,

/ui/login

and

/ui/registration

on your Ory project domain). - After authentication, users are redirected back to your static site. This approach requires minimal backend logic and works well for static sites. ### 2. Use Ory Elements for a Custom UI If you want a custom authentication UI that matches your static site's design, you can use [Ory Elements](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements), a React component library. This requires your static site to use React or a compatible framework. Steps: - Install Ory Elements in your project. - Use the provided components to build login, registration, and account pages. - Connect these components to your Ory project using the Ory SDK. ### 3. Federated Credential Management (FedCM) For a modern, privacy-preserving federated login experience, you can use [FedCM](https://www.ory.sh/docs/kratos/social-signin/fedcm). This allows users to sign in with their identity provider via a browser prompt. You need to: - Set up a custom domain for your Ory project. - Enable CORS for your static site domain. - Integrate the FedCM script and handle the authentication flow as described in the Ory documentation. ### Cookie and Domain Considerations Ory uses HTTP cookies for session management. For authentication to work seamlessly, your static site and the Ory endpoints must be on the same root domain or you must use a custom domain setup as described in the [frontend integration guide](https://www.ory.sh/docs/migrate-to-ory#integrate-frontend). This ensures cookies are shared correctly between your static site and Ory. --- Summary: - For most static sites, linking to the Ory Account Experience is the simplest and most robust approach. - For a custom UI, use Ory Elements with React. - For federated login, consider FedCM. - Ensure your domain and cookie setup allows session sharing. For more details and step-by-step guides, see the [frontend integration documentation](https://www.ory.sh/docs/migrate-to-ory#integrate-frontend) and the ["protect a page with login" guides](https://www.ory.sh/docs/getting-started/overview) for your preferred stack.