Cloudflare Passkeys: Deploying a React Passkey App on Cloudflare Pages

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.

Tutorial Roadmap:

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 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 applications without needing additional code or instructions, we can just fork the Cobado React example repository and use it as source code for our Cloudflare project.

Of course, you can also create an entirely new React app and use it.

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.

Then, head over to the Workers & Pages" area. Switch to Pages and click on Connect to Git".

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 example.

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.

Now scroll down and add your Corbado Project ID from step 1 to your projects environment variables as shown here:

Once youre ready, hit Save and Deploy. It can take a while until deployment is finished- you will be notified when its done.

Click on Continue to project to visit your newly created app. It should look like this:

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. Under Settings > General > URLs, use your own Cloudflare Pages URL (e.g. https://example-passkeys-react.pages.dev) to set the Application URL, the Redirect URLs well as the Relying Party ID which are all explained below (only replace the domain, the paths should stay the same):

• Application URL: The URL where the web component is embedded (e.g., 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 in our case since the Corbado React example expects the user to be sent to the profile page after authentication)
• 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.

After successful authentication, you will be redirected to the profile page.

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 scenarios.