Heroku Passkeys: Deploying Passkeys in Next.js Apps on Heroku

Technologies under spotlight:

• Heroku : A cutting-edge cloud provider streamlining deployment of web apps.
• Next.js: A premier web development framework, tailored for crafting high-performance React-based applications, enriched with server-side rendering.
• Corbado: The go-to platform for all-inclusive authentication, putting passkeys at the forefront.

Tutorial Roadmap:

1. Create Corbado project

To run our example app, we need the credentials of a Corbado project. Follow steps 1-3 of our Getting started guide to create a Corbado account and retrieve the necessary credentials for your Corbado project (project ID and API secret).

2. Fork Next.js passkey sample repository

For Heroku to host our app, we need to provide it with a git repository that contains our code. Since Heroku can host Next.js applications without needing additional code or instructions, we can just fork the Corbado Next.js example repository and use it as source code for our Heroku project.

3. Deploy Heroku instance

Now that we have our repository ready, we can prepare our deployment. First, create an account on heroku.com and head to the dashboard. Click on New and select Create new app in the dropdown menu.

Come up with a name, select your region and click "Create app".

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

Afterwards, switch to the "Settings" tab and click "Reveal Config Vars".

Then, add your project ID and API secret from step 1 to your project's environment variables as shown here:

Once youre ready, switch back to the Deploy tab and click "Deploy Branch". It can take a while until deployment is finished - you will be notified when its done.

Click on the white space/page to visit your newly created app. It should look like this:

The Heroku URL is not yet enabled for our Corbado project, so the UI component will not work correctly yet ("Bad request"). To change that, we need to configure our Corbado project 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 Heroku URL (e.g. https://corbado-test-8bef141a2811.herokuapp.com) to set the Application URL as 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 UI component is embedded (e.g., https://corbado-test-8bef141a2811.herokuapp.com)
• Redirect URL: Only needed for previous versions of our components, so you can ignore this one.
• Relying Party ID: The domain (no protocol, no port, and no path) where passkeys should be bound to (e.g., corbado-test-8bef141a2811.herokuapp.com)

Now, were finished! If you now visit your Heroku URL, you should see the working Corbado UI component 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 Next.js app on Heroku and how easy it is to add passkey-first authentication with Corbado. The technology stack of Heroku hosting together with Next.js 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 Corbado session management and plug in a backend provider to save and load user data.