corbado / example-passkeys-nextjs Goto Github PK

View Code? Open in Web Editor NEW

15.0 5.0 5.0 610 KB

Next.js (TypeScript) repository of a sample app that offers passkey authentication.

Home Page: https://www.corbado.com/passkeys/next-js

License: MIT License

JavaScript 7.79% CSS 14.25% TypeScript 48.30% Dockerfile 29.66%

faceid fido2 javascript nextjs passkey passkeys react touchid typescript webauthn

example-passkeys-nextjs's Introduction

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_PROJECT_ID=<YOUR PROJECT ID>
API_SECRET=<YOUR API SECRET>

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

example-passkeys-nextjs's People

Contributors

Stargazers

Watchers

Forkers

nicolaistein janinavanrinsum vincentdelitz sabaalikhani deom-dev

example-passkeys-nextjs's Issues

Sign up flow results in error with Next.js 14

Greetings,

When using Next.js 14 and @corbado/webcomponent, the sign up flow breaks, producing an error.

Expected Behavior

After clicking Sign up, the sign up UI should display without errors.

Current Behavior

In development mode, an Integration error UI is displayed.

Steps to Reproduce

git clone https://github.com/anodale/example-passkeys-nextjs && cd example-passkeys-nextjs
Update .env.* with project ID
git checkout next14 && npm i && npm run dev
Open http://localhost:3000 in browser and click Sign up

Error Log

Start conditional ui
package.js:7146 Webauthn challenge Object
app-index.js:35 Fetched error TypeError: Cannot create property '__NA' on string ''
    at copyNextJsInternalHistoryState (app-router.js:150:19)
    at History.pushState (app-router.js:386:20)
    at Ra.switchPage (package.js:6868:40)
    at eval (package.js:6342:31)
    at eval (package.js:6720:25)
    at Array.forEach (<anonymous>)
    at eval (package.js:6719:23)
    at Ra._withCommit (package.js:6798:40)
    at Ra.commit (package.js:6718:28)
    at Ra.commit (package.js:6671:30)
    at Proxy.SignUp (package.js:8041:52)
    at i.allowUserRegistration.rr.onClick.t.<computed>.t.<computed> (package.js:8169:66)
    at Dt (package.js:2815:29)
    at xt (package.js:2823:31)
    at HTMLSpanElement.n (package.js:5050:41)
window.console.error @ app-index.js:35
app-index.js:35 Conditional ui failed User chose different login

Notes

When replacing "next": "14.1.0" to "next": "^13" in package.json, the expected behavior is observed
Organized deps in package.json
Not tested in production
For those following along with the tutorial (as of 2024.22.01), you should be fine replacing npx create-next-app@latest with npx [email protected] at step 4

Cheers!