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

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.

Tutorial Roadmap:

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.