--- url: 'https://www.corbado.com/blog/cloudflare-passkeys' title: 'Cloudflare Passkeys: Deploying a React Passkey App on Cloudflare Pages' description: 'This tutorial shows how to deploy a passkey React app on Cloudflare Pages. Cloudflare is used for hosting, React for web development and Corbado for passkeys.' lang: 'en' author: 'Nicolai' date: '2023-11-17T00:00:00.000Z' lastModified: '2026-03-25T09:59:43.675Z' keywords: 'cloudflare' category: 'Passkeys Implementation' --- # Cloudflare Passkeys: Deploying a React Passkey App on Cloudflare Pages > Note: The example in this post is deprecated. If you’d like to see the original code, > just contact us and we’ll share it with you. ## Overview **Technologies under spotlight:** - **Cloudflare** : Cloudflare is known for its content delivery network and Internet security services like DDoS mitigation, but also offers web application hosting services through Cloudflare Pages. - **React:** A popular web development framework, known for its component-based architecture and efficient virtual DOM rendering. - **Corbado:** A convenient tool for passkey-first authentication. ## 1. Create Corbado Project Head over to the Corbado developer panel and create an account. To run our example app, we need the credentials of a Corbado project. Follow steps 1-2 of our [Getting started guide](https://docs.corbado.com/overview/getting-started) to create a Corbado account and retrieve your Corbado Project ID. ## 2. Fork React Passkey Sample Repository For Cloudflare to host our app, we need to provide it with a git repository that contains our code. Since Cloudflare can host [React](https://www.corbado.com/blog/react-passkeys) applications without needing additional code or instructions, we can just fork the [Cobado React example repository](https://github.com/corbado/example-passkeys-react) and use it as source code for our Cloudflare project. Of course, you can also create an entirely new [React](https://www.corbado.com/blog/react-passkeys) app and use it. ![create fork of repository](https://www.corbado.com/website-assets/655772795355b21a89eb7a2a_create_fork_1f0a9a9eac.jpg) ## 3. Deploy Cloudflare Pages Instance Now that we have our repository ready, we can prepare our deployment. First, create an account on [dash.cloudflare.com](https://dash.cloudflare.com). ![cloudflare login page](https://www.corbado.com/website-assets/6557731c4d6a6238844d5b2d_cloudflare_login_a7fa76c0f8.jpg) Then, head over to the Workers & Pages" area. Switch to Pages and click on Connect to Git". ![cloudflare dashboard workers & pages](https://www.corbado.com/website-assets/65577376517b2f902300733b_pages_overview_7004da55ca.jpg) Now is the time to plug in the repository we created a step earlier. Add your GitHub account and import your fork of the Corbado [React](https://www.corbado.com/blog/react-passkeys) example. ![cloudflare dashboard select repository](https://www.corbado.com/website-assets/655773c5f132a1eb9847b108_select_repo_2c17dd6dbc.jpg) Select your fork repository and click on Begin setup. You will land on the build configuration page. Select a name for your project and make sure the framework is set to Create React App. All other settings can be left on their default values. ![cloudflare dashboard set up build](https://www.corbado.com/website-assets/6557744954e77355896efbce_configure_build_19a8082c12.jpg) Now scroll down and add your Corbado Project ID from step 1 to your projects environment variables as shown here: ![cloudflare dashboard configure environment variables](https://www.corbado.com/website-assets/655774d18af28506093caf59_configure_env_variables_946afa92aa.jpg) Once youre ready, hit Save and Deploy. It can take a while until deployment is finished- you will be notified when its done. ![cloudflare dashboard build and deployment settings](https://www.corbado.com/website-assets/655775272ccdc2a1103bea14_build_settings_62d7d5296b.jpg) Click on Continue to project to visit your newly created app. It should look like this: ![Corbado webcomponent](https://www.corbado.com/website-assets/65577c168e8b9779aab5b59f_bad_request_154178608c.jpg) The Cloudflare URL is not yet enabled for our Corbado project, so the web component will not work correctly yet. To change that, we need to configure our Corbado project in the Corbado developer panel in the next step. ## 4. Configure Corbado project We now configure the project we created in [step 1](#create-corbado-project). Under [Settings > General > URLs](https://app.corbado.com/app/settings/general/urls), use your own Cloudflare Pages URL (e.g. [https://example-passkeys-react.pages.dev](https://example-passkeys-react.pages.dev)) to set the Application URL, the Redirect URLs well as the [Relying Party](https://www.corbado.com/glossary/relying-party) ID which are all explained below (only replace the domain, the paths should stay the same): ![Corbado developer panel urls settings](https://www.corbado.com/website-assets/6557772789b0ab475e17f438_url_settings_099562ab96.jpg) - Application URL: The URL where the web component is embedded (e.g., [https://example-passkeys-react.pages.dev](https://example-passkeys-react.pages.dev)) - Redirect URL: The URL our app should redirect to after successful authentication, and which gets sent a short-term session cookie (e.g., [https://example-passkeys-react.pages.dev/profile](https://example-passkeys-react.pages.dev/profile) in our case since the Corbado React example expects the user to be sent to the profile page after authentication) - [Relying Party](https://www.corbado.com/glossary/relying-party) ID: The domain (no protocol, no port, and no path) where passkeys should be bound to (e.g., example-passkeys-react.pages.dev) Now, were finished! If you now visit your Cloudflare Pages URL, you should see the working Corbado webcomponent and be able to authenticate with passkeys. ![Corbado webcomponent](https://www.corbado.com/website-assets/6557755e050efb125f643470_webcomponent_f53116de36.jpg) After successful authentication, you will be redirected to the profile page. ![passkey profile page](https://www.corbado.com/website-assets/655777d3b541907482966c77_profile_page_7fb3696cd1.jpg) ## 5. Conclusion In this tutorial, we showed how fast you can deploy a React app on Cloudflare Pages and how easy it is to add passkey-first authentication with Corbado. The technology stack of Cloudflare Pages hosting together with React as framework of and Corbado as passkey-first authentication provider is ideal for the development of high performance web apps with an integrated user system. As a next step one could make use of more advanced [Corbado session management](https://docs.corbado.com/sessions/overview) scenarios. ## Frequently Asked Questions ### Why does the Corbado web component show a bad request error right after deploying to Cloudflare Pages? The Cloudflare Pages URL is not automatically authorized in the Corbado developer panel. You must manually configure the Application URL, Redirect URL and [Relying Party](https://www.corbado.com/glossary/relying-party) ID under Settings > General > URLs in the Corbado panel before passkey authentication will function on the deployed domain. ### What build settings should I use when deploying a React passkey app on Cloudflare Pages? Select "Create React App" as the framework preset in the Cloudflare Pages build configuration. All other build settings can stay at their default values, but you must add your Corbado Project ID as an environment variable before saving and deploying. ### What is the correct format for the Relying Party ID when using Cloudflare Pages as my deployment host? The Relying Party ID must be the bare domain of your Cloudflare Pages URL, for example "example-passkeys-react.pages.dev", with no protocol, port or path included. This format is required to correctly bind passkeys to your specific deployment domain.