Heroku Passkeys: Deploying Passkeys in Next.js Applications Hosted 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.

TutorialRoadmap:

1. Create Corbado project‍

2. Fork Next.js passkey sample repository

3. Deploy Heroku instance

4. Configure Corbado project

5. Conclusion

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

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.

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 you’re 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 it’s 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 web component will not work correctly yet ("Bad request"). To change that, we need to configure our Corbado project in the next step.

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, the Redirect 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 web component is embedded (e.g., https://corbado-test-8bef141a2811.herokuapp.com)
• Redirect URL: The URL our app should redirect to after successful authentication, and which gets sent a short-term session cookie (e.g., https://corbado-test-8bef141a2811.herokuapp.com/profile)
• 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, we’re finished! If you now visit your Heroku URL, you should see the working Corbado web component and be able to authenticate with passkeys.

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

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.

‍