GithubHelp home page GithubHelp logo

corbado / example-passkeys-nextjs Goto Github PK

View Code? Open in Web Editor NEW
17.0 5.0 5.0 613 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 People

Contributors

corbadoman avatar lukaskratzel avatar naetraga avatar nicolaistein avatar vincentdelitz avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

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

  1. git clone https://github.com/anodale/example-passkeys-nextjs && cd example-passkeys-nextjs
  2. Update .env.* with project ID
  3. git checkout next14 && npm i && npm run dev
  4. 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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.