Next.js (TypeScript) Passkey Example App

This is a sample implementation of the Corbado React package and Corbado Node SDK being integrated into a web application built with Next.js.

Please see the full blog post to understand the detailed steps needed to integrate passkeys into Next.js apps.

File structure

• app/auth/page.tsx: the file where the React Auth component is used
• app/profile/page.tsx: displays user information if the user has successfully authenticated (rendered on the server)
• app/user-data/route.ts: api route that checks the users authentication state using the Corbado Node SDK
• app/page.tsx: client rendered page that accesses data from the above mentioned route
• .env.local: add relevant environment variables that you can obtain from Corbado developer panel

Setup

Prerequisites

Please follow the steps in Getting started to create and configure a project in the Corbado developer panel.

You need to have Node and npm installed to run it.

Configure environment variables

Use the values you obtained in Prerequisites to configure the following variables inside an .env.local file you create in the root folder of this project:

NEXT_PUBLIC_CORBADO_PROJECT_ID=<YOUR PROJECT ID>
CORBADO_API_SECRET=<YOUR API SECRET>
CORBADO_FRONTEND_API=<YOUR FRONTEND API>
CORBADO_BACKEND_API=<YOUR BACKEND API>

Usage

Run the project locally

Run

npm i

to install all dependencies.

Finally, you can run the project locally with

npm run dev

Run the project in a docker container

You can also run the project in a docker container using the provided docker-compose.yml file.

docker-compose up --build