Vercel Passkeys: Deploying Passkeys in Next.js App on Vercel

Overview#

Technologies under spotlight:

• Vercel : A cutting-edge cloud provider streamlining deployment of web apps and serverless functions.
• 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. Fork Next.js Passkey Sample Repository#

For Vercel to host our app, we need to provide it with a Git repository that contains our code. Since Vercel 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 Vercel project.

2. Prepare Vercel Deployment#

Now that we have our repository ready, we can prepare our deployment. First, create an account on vercel.com and head to the dashboard. Click on Add New... in the right upper corner and select Project in the dropdown menu.

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.

After clicking on Import, you will be redirected to the project configuration page. Select a name for your project and make sure the framework is set to Next.js.

3. Follow the Corbado Vercel Integration Wizard#

Once you have the Vercel project prepared for deployment, navigate to the Corbado Vercel integration wizard. The aim is to easily connect your Vercel project with Corbado project. By following these integration steps, you will have your Corbado environment variables in your Vercel environment variable configuration. To start the integration process click on Connect Account.

3.1 Select Your Vercel Team and Project#

First, select the Vercel team and project you want to integrate Corbado with. From the dropdown, choose the Vercel team where you want to install Corbado. Then, click Install to confirm and proceed with the setup.

3.2 Create an Account or Login on Corbado Developer Panel#

To integrate Corbado with your Vercel project, you’ll be prompted to create an account on the Corbado developer panel.

If you already have an account, click on Log in to proceed.

3.3 Select Your Vercel Project#

Once you’re logged in, you’ll need to select which Vercel project you want to integrate with Corbado. Choose the Vercel project from the dropdown menu and click Select to confirm your project choice.

3.4 Create or Choose a Corbado Project#

In this step, you can either create a new Corbado project or select an existing one. Enter a name for your new Corbado project (e.g., "nextjs-vercel-deployment") and click Create. And, if you already have a Corbado project, select it from the dropdown and click Select.

3.5 Setup Finished – Corbado Environment Variables Configured#

Once your Corbado project is connected, the necessary environment variables are automatically added to your Vercel project.

In the Vercel dashboard, select your project and navigate to Settings. Under Environment Variables, you’ll see variables CORBADO_API_SECRET and NEXT_PUBLIC_CORBADO_PROJECT_ID already configured for development, preview, and production.

3.6 Trigger Deployment#

Now that the integration is complete, it's time to deploy your project. In your Vercel project dashboard, click the Deploy button to start the deployment process. Vercel will build and deploy your Next.js project with Corbado's authentication integrated.

Once the deployment is complete, you can view and test your live project. The deployment URL (e.g., https://example-passkeys-nextjs.vercel.app) is available under the Domains section. Click the link to test your application live.

4. Configure Corbado project#

We now configure the Corbado project we created. Under Settings > General > URLs, use your own Vercel URL (e.g. https://example-passkeys-nextjs.vercel.app) to set the Application URLand 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://example-passkeys-nextjs.vercel.app)
• Relying Party ID: The domain (no protocol, no port, and no path) where passkeys should be bound to (e.g., example-passkeys-nextjs.vercel.app)

Now, were finished! If you now visit your Vercel 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 Vercel and how easy it is to add passkey-first authentication with Corbado. The technology stack of Vercel 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 management system.

About Corbado

Corbado is the Passkey Intelligence Platform for CIAM teams running consumer authentication at scale. We help you see what IDP logs and generic analytics tools can't: which devices, OS versions, browsers and credential managers support passkeys, why enrollments don't turn into logins, where the WebAuthn flow fails and when an OS / browser update silently breaks login, all without replacing Okta, Auth0, Ping, Cognito or your in-house IDP. Two products: Corbado Observe layers observability for passkeys and any other login method. Corbado Connect adds managed passkeys with analytics built in (alongside your IDP). VicRoads runs passkeys for 5M+ users with Corbado (+80% passkey activation). Talk to a Passkey Expert →

Frequently Asked Questions#

How do I connect Corbado authentication to a Vercel project without manually setting environment variables?#

The Corbado Vercel Integration Wizard at vercel.corbado.com handles this automatically. After selecting your Vercel team, project and a Corbado project, the wizard injects CORBADO_API_SECRET and NEXT_PUBLIC_CORBADO_PROJECT_ID into your Vercel environment variable settings for all environments.

What is the correct format for the Relying Party ID when deploying a passkey app on Vercel?#

The Relying Party ID must be the bare domain with no protocol, no port and no path. For example, if your Vercel URL is https://example-passkeys-nextjs.vercel.app, the Relying Party ID should be set to example-passkeys-nextjs.vercel.app.

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

No. Vercel natively recognizes Next.js projects and deploys them without requiring additional configuration code or instruction files. You only need to fork the Corbado Next.js example repository, import it into Vercel and run the integration wizard to complete setup.

What URLs do I need to configure in the Corbado developer panel after a Vercel deployment?#

You need to set two URLs under Settings, General, URLs in the Corbado developer panel. The Application URL is the full Vercel URL where the UI component is embedded, and the Relying Party ID is the bare domain where passkeys will be bound.