Add Passkeys SDK UI Recipe and Page

[ollie-stytch]

MFA Screen:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
stytch-nextjs-integration	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 2, 2023 3:14pm

[chris-stytch]

I got stuck in a few different places, I'll try to detail each flow.

Existing user "[email protected]"

[email protected] is an existing user within the Stytch Demo Project, I performed email OTP and then dropped into this pane:

Clicking the button there resulted in this error request-id-test-e1d66627-a6ab-4620-b5f9-e0217d354f01:

New user "[email protected]"

Figuring that the existing user state might be wonky (I previously had WebAuthn registrations), I tried a new user. When going through that flow I was able to register the Passkey, but after registering, clicking Continue dropped me back on to the "Register Passkey" button pane:

Trying to register again resulted in this duplicate Passkeys error (from Apple):

I see the Passkey on my User object, so potentially that is the expected state? i.e. there is no error, the flow just ends there? If so I'd just suggest adding some more copy to the Profile page or a second button "Authenticate Passkey" to make it more clear that after you register, you are done with the flow and can now authenticate with that registered Passkey.

[ollie-stytch]

@chris-stytch
To address point 2 I added a success view at the end of the flow:

As for the existing user problem what I think happened is the following:

1. [email protected] links an email on stytchdemo.com
2. [email protected] registers a webauthn reg tied to stytchdemo.com
3. [email protected] goes to login to localhost:3000 and logs in with otp
4. [email protected] is prompted to step up because some registrations do exist for the user, although no registrations exist on this domain for this user.
5. Error when trying to authenticate since no webauthn reg exists on this domain.

Unfortunately I don't know what we can do about this right now. In the future we may be able to make MFA consider domain but as of now this is the state of things.

[chris-stytch]

Gotcha, I figured it might be a thorny user state issue. In fairness, my default email has been put through the wringer in this demo project.