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

Overview#

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.

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.

Frequently Asked Questions#

Why does my Corbado passkey UI component show a 'Bad request' error after deploying to Heroku?#

This error occurs because the Heroku URL has not yet been registered in the Corbado developer panel. Go to Settings > General > URLs in Corbado and set the Application URL to your full Heroku URL and the Relying Party ID to the bare domain with no protocol, port or path.

Do I need to write custom server configuration to deploy a Next.js passkey app on Heroku?#

No. Heroku supports Next.js natively, so no extra server files or build instructions are required. You only need to fork the Corbado Next.js example repository, connect it to Heroku via GitHub and add the Corbado environment variables as Config Vars in Heroku Settings.

What is the difference between the Application URL and the Relying Party ID in Corbado's Heroku setup?#

The Application URL is the full Heroku URL where the Corbado UI component is embedded (for example, https://corbado-test-8bef141a2811.herokuapp.com). The Relying Party ID is the bare domain only (for example, corbado-test-8bef141a2811.herokuapp.com) with no protocol, port or path, and it determines which domain the passkeys are cryptographically bound to.

How do I pass Corbado credentials securely to a Next.js app running on Heroku?#

Add the Corbado project ID and API secret as environment variables using Heroku's Config Vars feature, accessible under the Settings tab of your Heroku project by clicking 'Reveal Config Vars'. This keeps credentials out of source code while making them available to the Next.js runtime.