Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/corbado/example-passkeys-nextjs
Next.js (TypeScript) repository of a sample app that offers passkey authentication.
https://github.com/corbado/example-passkeys-nextjs
faceid fido2 javascript nextjs passkey passkeys react touchid typescript webauthn
Last synced: about 2 months ago
JSON representation
Next.js (TypeScript) repository of a sample app that offers passkey authentication.
- Host: GitHub
- URL: https://github.com/corbado/example-passkeys-nextjs
- Owner: corbado
- License: mit
- Created: 2023-06-13T12:34:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-21T08:53:44.000Z (3 months ago)
- Last Synced: 2024-10-21T11:46:04.887Z (3 months ago)
- Topics: faceid, fido2, javascript, nextjs, passkey, passkeys, react, touchid, typescript, webauthn
- Language: TypeScript
- Homepage: https://www.corbado.com/passkeys/next-js
- Size: 258 KB
- Stars: 18
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://www.corbado.com/blog/nextjs-passkeys) 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](https://app.corbado.com/signin#register)
## Setup
### Prerequisites
Please follow the steps in [Getting started](https://docs.corbado.com/overview/getting-started) to create and configure
a project in the [Corbado developer panel](https://app.corbado.com/signin#register).
You need to have [Node](https://nodejs.org/en/download) and `npm` installed to run it.
### Configure environment variables
Use the values you obtained in [Prerequisites](#prerequisites) to configure the following variables inside an `.env.local`
file you create in the root folder of this project:
```sh
NEXT_PUBLIC_CORBADO_PROJECT_ID=
CORBADO_API_SECRET=
CORBADO_FRONTEND_API=
CORBADO_BACKEND_API=
```
## Usage
### Run the project locally
Run
```bash
npm i
```
to install all dependencies.
Finally, you can run the project locally with
```bash
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.
```bash
docker-compose up --build
```