feat: Passkey support #13127

merlindru · 2024-01-09T17:17:54Z

What does this PR do?

Fixes #13342
Fixes CAL-2984

This PR adds passkey support for logging in through Hanko Passkeys.

Type of change

New feature (non-breaking change which adds functionality)
This change requires a documentation update (probably)

How should this be tested?

Go to cloud.hanko.io and create a "Passkey API" project
- Then create a new API key
  set it to HANKO_PASSKEYS_API_KEY="<api key>"
  (quotes important)
- Copy the tenant ID to NEXT_PUBLIC_HANKO_PASSKEYS_TENANT_ID=<tenant id>
Log in as normal (with password/google/...)
Go to settings > passkeys > create a new passkey
Log out
Go to login > sign in with a passkey

Mandatory Tasks

Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

next-auth-options.ts

Please review this file, there are substantial changes that might be unsafe. I am not sure if the file in it's current form is okay:

This PR changes the very important authorize function. I'm not sure if we want to keep it like this, but the authorize function itself does a lot of checks, only some relevant to credentials.

Instead of duplicating it, I added a second parameter, unsafe, intended to only be used from server code like in the PasskeyProvider. Using it is very explicit, you have to pass undefined as a first parameter, so it's clear that you shouldn't be using this functionality unless you're sure what you're doing:

// Example usage of authorize function
const sessionData = authorize(undefined, { unsafe: { userId: 123 }})

When unsafe is used, all the checks dependent on credentials are not being run anymore.

I am not sure how safe this is, or if a larger refactor is needed that properly separates checks dependent on credentials from all other checks. (That would certainly be cleaner, though)

Checklist

I haven't checked if my PR needs changes to the documentation
I haven't added tests that prove my fix is effective or that my feature works

Adds passkey button to login page:

Adds "Passkeys" settings section to sidebar:

Adds passkeys settings page

Empty:

Is the icon alright here? it looks somewhat more chunky than the "link" icon used e.g. for event types and api keys
On the other hand, it's the same icon we're using for passkeys everywhere (including the login page "Sign in with a passkey" button

Clicking on the "add" button and "sign in with a passkey" buttons opens a browser dialog. This looks different for every browser, phone, etc.

For example:

With passkeys added:

The name is set by the Hanko Passkeys API (our backend). We'll improve the name soon so it's not just a semi-random string and more user friendly
If the passkey was used, the description says e.g. "Created 3 days ago • Last used 5 minutes ago"

Dropdown stolen straight from API settings page:

…ider

This refactors the very important `authorize` function. I'm not sure if we want to keep it like this, but the authorize function itself does a lot of checks, only some relevant to `credentials`. Instead of duplicating it, I added a second parameter, `unsafe`, intended to only be used from server code like in the PasskeyProvider. When `unsafe` is used, all the checks dependent on `credentials` are not being run anymore. However, I am not sure how safe this is, or if a larger refactor is needed that properly separates checks dependent on `credentials` from all other checks.

vercel · 2024-01-09T17:18:00Z

Someone is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

CLAassistant · 2024-01-09T17:18:01Z

All committers have signed the CLA.

github-actions · 2024-01-09T17:18:06Z

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link.

PeerRich

hell yeah passkeys babyyyy

excited for this, will review

merlindru · 2024-01-10T12:12:07Z

apps/web/pages/settings/security/passkeys.tsx

+      }).then((res) => res.json()),
+    onSuccess: props.onRemoved,
+    onError: (e: any) => {
+      showToast(e.message || t("something_went_wrong"), "error");


Could also replace with

onError: (e: unknown) => { showToast(typeof e === "object" && e != null && "message" in e && typeof e.message === "string" ? e.message : t("something_went_wrong"), "error");

to get rid of eslint warning

merlindru · 2024-01-10T12:13:47Z

packages/features/settings/layouts/SettingsLayout.tsx

@@ -55,6 +55,7 @@ const tabs: VerticalTabItemProps[] = [
      { name: "password", href: "/settings/security/password" },
      { name: "impersonation", href: "/settings/security/impersonation" },
      { name: "2fa_auth", href: "/settings/security/two-factor-auth" },
+      { name: "passkeys", href: "/settings/security/passkeys" },


This still makes it appear above SSO. Is this position fine?

If we want it to be the last entry in the list, will have to add it below

positioning is fine

merlindru · 2024-01-10T12:14:53Z

apps/web/components/auth/PasskeyIcon.tsx

Could also move this to an .svg file if preferred

this is fine, however, ideally you move this into calcom/components/icon

PeerRich · 2024-01-18T17:13:19Z

with this PR, can people also make an entire new account with passkeys? or just existing users?

PeerRich · 2024-01-18T17:26:49Z

added HANKO_PASSKEYS_API_KEY and NEXT_PUBLIC_HANKO_PASSKEYS_TENANT_ID to vercel

github-actions · 2024-01-23T05:50:07Z

Hey there, there is a merge conflict, can you take a look?

github-actions · 2024-02-07T00:15:21Z

This PR is being marked as stale due to inactivity.

github-actions · 2024-03-02T00:15:26Z

This PR is being marked as stale due to inactivity.

keithwillcode · 2024-03-05T13:17:24Z

Moving to 4.0 based on current priorities.

keithwillcode · 2024-03-05T13:17:57Z

Converted to draft until the conflicts can be resolved.

github-actions · 2024-03-21T00:17:06Z

This PR is being marked as stale due to inactivity.

alishaz-polymath · 2024-04-06T13:00:28Z

Thank you for the PR 🙏
However, upon further investigation, if we roll out we are likely to go with nextauth passkeys implementation for now: https://authjs.dev/reference/core/providers/passkey#resources

This PR touches too many core auth files and we are not feeling 100% comfortable merging something that can potentially affect all users auth negatively

zomars · 2024-04-24T19:59:55Z

We had a call between Felix and @merlindru from the Hanko team and @keithwillcode and myself. We're expecting a new PR with a much simpler approach in the upcoming weeks.

merlindru added 9 commits January 8, 2024 19:36

web: Add @github/webauthn-json and @teamhanko/passkeys-next-auth-prov…

bd6bad2

…ider

yarn.lock update (added @teamhanko/passkeys-next-auth-provider)

9cf643b

features/auth: add @teamhanko/passkeys-next-auth-provider

0462861

web: next.config.json to transpile @teamhanko/passkeys-next-auth-prov…

5c3794e

…ider

Add env vars

2a2d6d9

Add PASSKEY_LOGIN_ENABLED env var to turbo.json and .env.example

5dbb06f

Passkey settings page

bb47ac9

Add "Sign in with a passkey" button to login page

c1b025d

github-actions bot added the ❗️ .env changes contains changes to env variables label Jan 9, 2024

merlindru changed the title ~~Passkey support~~ feat: Passkey support Jan 9, 2024

PeerRich reviewed Jan 9, 2024

View reviewed changes

Merge branch 'main' into hanko-passkeys

e330b44

keithwillcode added Medium priority Created by Linear-GitHub Sync authentication area: authentication, auth, google sign in, password, SAML, password reset, can't log in labels Jan 10, 2024

merlindru commented Jan 10, 2024

View reviewed changes

Update .env.example

4e8717e

keithwillcode added this to the v3.9 milestone Jan 10, 2024

keithwillcode added the community Created by Linear-GitHub Sync label Jan 11, 2024

keithwillcode mentioned this pull request Jan 20, 2024

[CAL-2984] Add Passkey support #13342

Open

github-actions bot added the 🚨 merge conflict This PR has a merge conflict that has to be addressed label Jan 23, 2024

github-actions bot added the Stale label Feb 7, 2024

keithwillcode requested a review from a team February 13, 2024 05:21

PeerRich removed the Stale label Feb 13, 2024

keithwillcode added foundation and removed authentication area: authentication, auth, google sign in, password, SAML, password reset, can't log in labels Feb 16, 2024

github-actions bot added the Stale label Mar 2, 2024

keithwillcode modified the milestones: v3.9, v4.0 Mar 5, 2024

keithwillcode marked this pull request as draft March 5, 2024 13:17

github-actions bot removed the Stale label Mar 6, 2024

github-actions bot added Stale and removed Stale labels Mar 21, 2024

alishaz-polymath closed this Apr 6, 2024

dosubot bot modified the milestones: v4.0, v4.1 Apr 15, 2024

merlindru mentioned this pull request Apr 25, 2024

feat: Hanko passkeys support #14741

Open

1 task

dosubot bot added this to the v4.2 milestone May 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Passkey support #13127

feat: Passkey support #13127

merlindru commented Jan 9, 2024 •

edited by keithwillcode

vercel bot commented Jan 9, 2024

CLAassistant commented Jan 9, 2024 •

edited

github-actions bot commented Jan 9, 2024 •

edited

PeerRich left a comment

merlindru Jan 10, 2024 •

edited

merlindru Jan 10, 2024

PeerRich Jan 18, 2024

merlindru Jan 10, 2024

PeerRich Jan 18, 2024

PeerRich commented Jan 18, 2024

PeerRich commented Jan 18, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Feb 7, 2024

github-actions bot commented Mar 2, 2024

keithwillcode commented Mar 5, 2024

keithwillcode commented Mar 5, 2024

github-actions bot commented Mar 21, 2024

alishaz-polymath commented Apr 6, 2024 •

edited

zomars commented Apr 24, 2024 •

edited

feat: Passkey support #13127

feat: Passkey support #13127

Conversation

merlindru commented Jan 9, 2024 • edited by keithwillcode

What does this PR do?

Type of change

How should this be tested?

Mandatory Tasks

next-auth-options.ts

Checklist

Adds passkey button to login page:

Adds "Passkeys" settings section to sidebar:

Adds passkeys settings page

vercel bot commented Jan 9, 2024

CLAassistant commented Jan 9, 2024 • edited

github-actions bot commented Jan 9, 2024 • edited

PeerRich left a comment

Choose a reason for hiding this comment

merlindru Jan 10, 2024 • edited

Choose a reason for hiding this comment

merlindru Jan 10, 2024

Choose a reason for hiding this comment

PeerRich Jan 18, 2024

Choose a reason for hiding this comment

merlindru Jan 10, 2024

Choose a reason for hiding this comment

PeerRich Jan 18, 2024

Choose a reason for hiding this comment

PeerRich commented Jan 18, 2024

PeerRich commented Jan 18, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Feb 7, 2024

github-actions bot commented Mar 2, 2024

keithwillcode commented Mar 5, 2024

keithwillcode commented Mar 5, 2024

github-actions bot commented Mar 21, 2024

alishaz-polymath commented Apr 6, 2024 • edited

zomars commented Apr 24, 2024 • edited

merlindru commented Jan 9, 2024 •

edited by keithwillcode

CLAassistant commented Jan 9, 2024 •

edited

github-actions bot commented Jan 9, 2024 •

edited

merlindru Jan 10, 2024 •

edited

alishaz-polymath commented Apr 6, 2024 •

edited

zomars commented Apr 24, 2024 •

edited