Heroku Passkeys: Deploying Passkeys in Next.js Applications Hosted on Heroku

Heroku Passkeys: Deploying Passkeys in Next.js Applications Hosted on Heroku

In this tutorial, we dive deep into the efficient deployment of a Next.js application on Heroku, emphasizing passkey authentication. We harness the capabilities of Heroku, take advantage of Next.js for robust web development, and leverage Corbado's authentication to optimize our passkeys setup.

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

2. Fork Next.js passkey sample repository

3. Deploy Heroku instance

4. Configure Corbado project

5. Conclusion

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.

Forking the Corbado Next.js example

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.

Heroku dashboard

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

Create new Heroku project

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.

Heroku project overview

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

Heroku project settings

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

Heroku environment variables

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.

Heroku deploy branch

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

Corbado webcomponent

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.

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, 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):

Corbado developerpanel settings
  • 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.

Corbado webcomponent

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

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

Enjoyed this read?

Stay up to date with the latest news, strategies and insights about passkeys sent straight to your inbox!