WebAuthn/Passkeys support

[RihanArfan]

Feature request

Is your feature request related to a problem? Please describe.

No, it's purely a nice feature I would like to see.

I would like WebAuthn to be supported in Supabase Auth. Auth0 will be adding support for WebAuthn which you can see through their flows preview here (sidebar -> WebAuthn).

Describe the solution you'd like

Adding support for registering and logging in using WebAuthn, or allowing it to be used as two-factor authentication.

Describe alternatives you've considered

It is possible to implement it myself for my own projects though I'm sure others may like this feature in the SDK/part of auth, and it'd set Supabase ahead in modern compared to Firebase.

Additional context

[kiwicopple]

Great idea @LeCodeCo - I'm transferring this to our GoTrue repo to implement it in the Auth server. Also, thanks for the amazingly detailed feature request. The screen mockups are great

[jswhisperer]

I'm watching you feature 👀

[J0]

I'm going to move this under our MFA thread #14 So please feel free to following along over there instead.

Thanks!

[RihanArfan]

@J0 While WebAuthn is great for 2FA (and can be tracked in #14), this issue also covers using it as the primary authentication method to replace username/passwords

[J0]

Hey @LeCodeCo ,

That's fair -- thanks for highlighting that -- let's leave this open then.

Lmk if there are any further questions or concerns!

[RichiCoder1]

Wanted this echo the use of this as both a method of MFA, but also as a password alternative (down with passwords!).

[J0]

Hey @RichiCoder1,

Were there any other auth services that you were considering that provide Webauthn as a password alternative(outside of MFA)? We'd love to see what's available out there and what the DX looks like.

Would also love to understand the immediate use case if any (e.g. for instance one might want anonymous sign-in's because it'd help with implementing a cart feature for the e-commerce app that they are building).

We're probably not going to build it out just yet but both these pointers would be helpful in envisioning what an experience could look like if we were to build it out

Let me know!

[snorremd]

Would also love to understand the immediate use case if any (e.g. for instance one might want anonymous sign-in's because it'd help with implementing a cart feature for the e-commerce app that they are building).

If nothing else the use case is protecting users from phishing attacks increasing the security of the user compared to the password flow. This is accomplished by Webauthn binding the authentication key of the user to a specific origin URL. Thus the browser won't try logging in even if presented with the correct public key from a phishing server.

For my own use case I think the Webauth based signup and login flow could wholly replace the password flow as it is both more convenient and more secure. It also makes it possible to sign up users without any form of personally identifying information which is good for GDPR.

[RihanArfan]

These may be of interest:

• https://www.apple.com/newsroom/2022/05/apple-google-and-microsoft-commit-to-expanded-support-for-fido-standard/
• https://blog.google/technology/safety-security/one-step-closer-to-a-passwordless-future/
• https://fidoalliance.org/white-paper-multi-device-fido-credentials/

[J0]

Hey all,

Unfortunately, after much internal discussion, we have decided to focus on SAML and Multi-Factor Authentication. As such, we won't be implementing Webauthn as a a first factor sign in method in the near future.

Consequently, we will close this issue for now but will re-visit re-open when the time is right. For now, feel free to fork GoTrue or open a Github Discussion if you'd like to explore this further -- we'd be happy to jump in there.

Sorry about this!

[bdougherty]

I'm very confused about why this is not being considered and when you think the time will be right. Apple, Google, and Microsoft are all heavily invested in and committed to Passkeys.

[jswhisperer]

@LeCodeCo please take a look at https://www.github.com/ory/kratos its open source , headless, and there are some similar applications in the Ory community. We also plan a PR here to help in the same direction. Also see this https://www.ory.sh/hydra/docs/next/advanced/

Looks good!

[J0]

Hey all,

We hear you and we're not closed to passkeys - it's simply the case that we were prioritizing other important features like MFA and SAML. As such, we wouldn't be able to promise a release date in the immediate future(2022).

Since Passkeys also make use of the FIDO2(Webauthn) spec it should be easier to make a case after we've added Webauthn support. We're looking into FIDO2 support for MFA devices so we ask for your patience with that.

In the meantime, we ask that you indicate interest in the feature via the main comment #92 (comment) so we can best convey the demand for the feature.

Thanks!

[maxcountryman]

@J0 since you're asking folks for feedback and want to indicate interest level, it would be nice if this issue could stay open. It being closed could signal that this is not something Supabase will add at all. If there's a better place to track interest, that's great and I'd love to know where that is.

[ioucyf]

In my humble opinion, I think WebAuthn should be a priority.

It's not that complicated to implement, and makes for a significantly secure method while being very cost effective on all kinds of resources; as first class and mfa.

[milovangudelj]

Would love to see this implemented and fully supported out of the box. It would greatly improve the user experience and security without needing second factors.

For now I think I'll try making an example webiste using Matthew Miller's SimpleWebAuthn package and Next.js.

[fluid-design-io]

Hey @chrisciszak @milovangudelj ,

I've managed to intergrade @simplewebauthn with Supabase by creating a custom schema & RLS to it. Here's how I designed the UI to "merge" the WebAuthn with Supabase TOTP.

It's a bit of a hack as I don't want to issue custom JWTs and have to modify the supabase middleware/server/client header settings (using the @supabase/ssr package). Additionally, I also need to support regular email/phone login in parallel. As a result, I used this to generate a hashed_token and pass it to the PKCE flow route handler to redeem the session.

//auth/web-authn/verify-authentication
//...
const magicLink = await supabaseAdmin.auth.admin.generateLink({
    email,
    type: 'magiclink',
  })

const magicUrl = `${process.env.NEXT_PUBLIC_SITE_URL}/auth/confirm?token_hash=${magicLink.data.properties?.hashed_token}&type=magiclink&redirect_to=${process.env.NEXT_PUBLIC_SITE_URL}`

return NextResponse.json({ verified, magicLink: magicUrl })

The downside of this is the user auth does not have aal2 level when you call supabase.auth.mfa.getAuthenticatorAssuranceLevel(), it would be aal2 if you've registered using supabase.auth.mfa.enroll() & verify user via supabase.auth.mfa.verify(). Here's the doc I used to create the Supabase MFA flow.

Overall I think this gets the job done for now, but is no where close to a native implementation as it relies on a 3rd party package and need to manually setup, maintain and adapt future changes.

Any suggestions to make this flow better? Happy to provide more info.

[Radiergummi]

It's a bit of a hack as I don't want to issue custom JWTs and have to modify the supabase middleware/server/client header settings (using the @supabase/ssr package). Additionally, I also need to support regular email/phone login in parallel. As a result, I used this to generate a hashed_token and pass it to the PKCE flow route handler to redeem the session.
[...]
Any suggestions to make this flow better? Happy to provide more info.

Couldn't you, theoretically, also validate the WebAuthn assertion, reset the user's password to a random string, then issue a password login using this random password immediately? I mean that's a despicable hack really, but probably pretty smooth to the user.

[ProductOfAmerica]

@J0 no problem, I’d love to request the ability to login to Supabase securely using a Yubikey or similar FIDO authentication method. Thanks!

[axelinternet]

Any updates regarding the roadmap on this? User expectations seem to be moving in this direction, both from devs and end users perspective

[J0]

Hey

Folks, thanks for patiently waiting - we're re-considering this. We're hoping to disambiguate between three potential cases:

1. Request for support of webauthn for sign in and registration (passkeys) - 🎉
2. Request for support of webauthn as an MFA method on your application which is on Supabase- 🚀
3. Request for use of webauthn as an MFA method to log in to Supabase Platform - 😄

Separately, also keen to hear what are the best browser / client SDKs you've used around webauthn

Do you mind reacting to this post with the appropriate emoji if you have the time? Don't quite have a better way of polling within a Github atm unfortunately. You can react with more than one emoji if you'd like multiple use cases.

If your use case is not covered feel free to make a fresh comment

[Radiergummi]

@J0 I don't know if this helps; I implemented webauthn for sign in and registration on top of Supabase in a SvelteKit app, using the excellent SimpleWebauthn library. Users without an authenticator can login using OTPs via email, will be offered to add an authenticator post successful login, and can subsequently sign in using their PassKey. In their account management area, they can manage previously registered authenticators.

This wasn't possible using the built-in authentication capabilities of Supabase (I tried), so I had to sidestep and create my own authentication database schema.

I'm mentioning this because I've implemented WebAuthn support in a few different projects and am reasonably confident my implementation is standards-compliant, as straightforward as possible and secure, so it may be helpful to see how an actual real-world setup might look like.
If you're interested, I can take some time and extract the relevant code and database schema into a sample repository.

[ioucyf]

@J0 I don't know if this helps; I implemented webauthn for sign in and registration on top of Supabase in a SvelteKit app, using the excellent SimpleWebauthn library. Users without an authenticator can login using OTPs via email, will be offered to add an authenticator post successful login, and can subsequently sign in using their PassKey. In their account management area, they can manage previously registered authenticators.

This wasn't possible using the built-in authentication capabilities of Supabase (I tried), so I had to sidestep and create my own authentication database schema.

I'm mentioning this because I've implemented WebAuthn support in a few different projects and am reasonably confident my implementation is standards-compliant, as straightforward as possible and secure, so it may be helpful to see how an actual real-world setup might look like. If you're interested, I can take some time and extract the relevant code and database schema into a sample repository.

This is exactly the flow I'm trying to implement with WebAuthn.
1- Send OTP code via email for first timers, or those without passkey/authenticator.
2- One registered, they are offered to register either a passkey or/and authenticator (as mean for future logins)
3- future authentications done via passkey/authenticator if available, else, email OTPs as a fallback.

In my opinion, this is exactly how I want to implement all my authentications. The option to also offer the user to use either other method (or all three should they choose to) to further secure their accounts.

// *chef's kiss*

Thank you very much sir for sharing. 🙏

[avcohen]

@J0 I don't know if this helps; I implemented webauthn for sign in and registration on top of Supabase in a SvelteKit app, using the excellent SimpleWebauthn library. Users without an authenticator can login using OTPs via email, will be offered to add an authenticator post successful login, and can subsequently sign in using their PassKey. In their account management area, they can manage previously registered authenticators.

This wasn't possible using the built-in authentication capabilities of Supabase (I tried), so I had to sidestep and create my own authentication database schema.

I'm mentioning this because I've implemented WebAuthn support in a few different projects and am reasonably confident my implementation is standards-compliant, as straightforward as possible and secure, so it may be helpful to see how an actual real-world setup might look like. If you're interested, I can take some time and extract the relevant code and database schema into a sample repository.

Been following this for a while and I'd love to see this as well!

[J0]

Users without an authenticator can login using OTPs via email, will be offered to add an authenticator post successful login, and can subsequently sign in using their PassKey. In their account management area, they can manage previously registered authenticators.

Thanks all! We'll take this into consideration.

I'm mentioning this because I've implemented WebAuthn support in a few different projects and am reasonably confident my implementation is standards-compliant, as straightforward as possible and secure, so it may be helpful to see how an actual real-world setup might look like.
If you're interested, I can take some time and extract the relevant code and database schema into a sample repository.

Would be keen but don't want to do so if it requires more than ten minutes of overhead on your end. The Simplewebauthn library looks great - only trouble there is that it seems to be in JavaScript while our service is written in Go. If we move forward it's likely we'll use an existing Webauthn golang package as it'd be hard to make the case for writing a port.

The browser bindings will definitely be relevant though - keen to hear feedback / opinions about browser bindings there and elsewhere if anyone has opinions to offer.

[probert94]

I am not sure if this has already been discussed here but I would like to have some kind of support for adding new devices.
To add a new passkey (i.e. new device), you first have to log in to the app. Usually that means you log in using username + password and then add your passkey.
However, that means, that the account still needs username + password.
As the ultimate goal of passkeys is to get rid of passwords, there should be an alternative way to add a passkey / device.

[smndtrl]

@J0 As you have recently added WebAuthn functionality for MFA, do you have updates on Passkeys/WebAuthn as the main means of authentication?

[J0]

Hey @smndtrl,

Thanks for checking in. It's planned but still under discussion - feel free to post any suggestions / feedback here and the team will do their best to take it into account

[smndtrl]

Thanks for the status update @J0

We have two different apps/scenarios where we are using Passkeys

Passkey only (fast, private and simple)

1. User arrives on page and the page and conditional UI flow triggers so users with existing discoverable credentials can quickly sign back in
2. A button triggers passkey signup. We don’t collect any more information during that phase.
3. Only when a user decides to go for a paid tier we collect more information

E-mail verified + multiple Passkeys

1. As above
2. A email input + button triggers a e-mail validation (though e-mail + OTP is not allowed as a sign in factor)
3. Confirming the email, the user is asked to signup 2 passkeys (1 syncable passkey + 1 device bound passkey) where we might restrict which authenticators can be used

All future logins are done with either of the (at least) 2 discoverable credentials/passkeys and the e-mail is no longer necessary

[chrisciszak]

Hey @smndtrl,

Thanks for checking in. It's planned but still under discussion - feel free to post any suggestions / feedback here and the team will do their best to take it into account

Hey @J0 - could you share roughly when is this planned for?

[J0]

For passkeys, best guess would be sometime in 2025

[cbracegirdle]

Hi @Radiergummi

@J0 I don't know if this helps; I implemented webauthn for sign in and registration on top of Supabase in a SvelteKit app, using the excellent SimpleWebauthn library. Users without an authenticator can login using OTPs via email, will be offered to add an authenticator post successful login, and can subsequently sign in using their PassKey. In their account management area, they can manage previously registered authenticators.

This wasn't possible using the built-in authentication capabilities of Supabase (I tried), so I had to sidestep and create my own authentication database schema.

I'm mentioning this because I've implemented WebAuthn support in a few different projects and am reasonably confident my implementation is standards-compliant, as straightforward as possible and secure, so it may be helpful to see how an actual real-world setup might look like. If you're interested, I can take some time and extract the relevant code and database schema into a sample repository.

This is exactly what I want to do. It would be amazing if you were able to share your code, or at least some more hints!

[Radiergummi]

Hi @Radiergummi

@J0 I don't know if this helps; I implemented webauthn for sign in and registration on top of Supabase in a SvelteKit app, using the excellent SimpleWebauthn library. Users without an authenticator can login using OTPs via email, will be offered to add an authenticator post successful login, and can subsequently sign in using their PassKey. In their account management area, they can manage previously registered authenticators.
This wasn't possible using the built-in authentication capabilities of Supabase (I tried), so I had to sidestep and create my own authentication database schema.
I'm mentioning this because I've implemented WebAuthn support in a few different projects and am reasonably confident my implementation is standards-compliant, as straightforward as possible and secure, so it may be helpful to see how an actual real-world setup might look like. If you're interested, I can take some time and extract the relevant code and database schema into a sample repository.

This is exactly what I want to do. It would be amazing if you were able to share your code, or at least some more hints!

Oh my, this is embarrassing. I completely forgot about this issue, had a lot of stuff keeping me away from Open Source work. Take a look at the source repository over here: https://github.com/project-kiosk/kiosk/tree/next/src/routes/auth

I didn't get around to documenting things yet, so feel free to reach out if you need help, or open an issue in the kiosk repository, and I'll respond there.

The system works roughly like so:

1. On the login page, the login page component initializes the WebAuthn autocomplete for the email input field, if WebAuthn is available in that browser (it falls back to a passcode otherwise)
2. If that works, a challenge is requested from the assertion endpoint
3. When the user interacts with the input and confirms the ceremony, the assertion is verified (which also sets the session cookie) and the user will be redirected to the home page.

The fallback process sends out an OTP via email, then offers an OTP form which, after successful submission, will check if the user has no registered Passkeys yet and offer to register one before the post-login home page redirect.

Some of these things are a bit SvelteKit-specific, so to reproduce this in other applications, you'd want these things (simplified to make it easier to explain):

1. An assertion (ie., login—"assert this user is known") challenge generation endpoint (e.g. /auth/assertion/challenge): This really just requests a challenge for an existing Passkey, so by solving the challenge, users can prove they own the Passkey
2. An assertion challenge verification endpoint (e.g. /auth/assertion/verify): This endpoint accepts the solution to a previously requested challenge
3. An attestation (ie., registration—"attest this Passkey belongs to that user") challenge generation endpoint (e.g. /auth/attestation/challenge): Similar to assertions, generates a challenge for a logged-in user
4. An attestation challenge verification endpoint (e.g. /auth/attestation/verify): Accepts a solution to a previously requested challenge and persists the Passkey details in the database for later usage.

Since a full login flow always requires several requests (fetching the login page, requesting the challenge, verifying it), you also need a session mechanism to ensure a challenge can only be verified by the client that has requested its generation.

So much for the quick summary of Webauthn—make sure to read up on it before actually implementing it :) Again, I'm happy to help if you have other questions.

[cullophid]

Hey

Folks, thanks for patiently waiting - we're re-considering this. We're hoping to disambiguate between three potential cases:

1. Request for support of webauthn for sign in and registration (passkeys) - 🎉
2. Request for support of webauthn as an MFA method on your application which is on Supabase- 🚀
3. Request for use of webauthn as an MFA method to log in to Supabase Platform - 😄

Separately, also keen to hear what are the best browser / client SDKs you've used around webauthn

Do you mind reacting to this post with the appropriate emoji if you have the time? Don't quite have a better way of polling within a Github atm unfortunately. You can react with more than one emoji if you'd like multiple use cases.

If your use case is not covered feel free to make a fresh comment

My main use case is to offer passkeys as a way for my users to sign in to my platform. I assume that is what is meant by 1.?

[cbracegirdle]

For passkeys, best guess would be sometime in 2025

Would be amazing to get an update on this @J0

[tomx-sh]

Passkey as a primary (and only) register / sign in method would be amazing.
This is what webAuthn is made for : a passwordless future.

I think adoption of this is still low because commercial apps like to collect emails and phone numbers. But this is going to change considering the growing awareness on privacy (and passwords data leaks).

[probert94]

Passkey as a primary (and only) register / sign in method would be amazing.
This is what webAuthn is made for : a passwordless future.

@tomx-sh I would really love to see that but to me it seems like there is no standard for adding new devices yet.
Usually you need to be signed in to add the current device but without password you are not able to sign in.
Some providers or apps have their own solution (for example Google can synchronize passkeys between devices) but I haven't seen a standard yet.

[tomx-sh]

@tomx-sh I would really love to see that but to me it seems like there is no standard for adding new devices yet. Usually you need to be signed in to add the current device but without password you are not able to sign in. Some providers or apps have their own solution (for example Google can synchronize passkeys between devices) but I haven't seen a standard yet.

@probert94 You can register and sign in entirely without a password! You can see the demo here : https://webauthn.io
Current apps usually need a primary method of authentication (email, password, phone...) but this is a deliberate choice, mostly due to legacy and marketing reasons.

I don't know what you mean by "adding new devices". Passkeys are designed to be platform-independent. Each OS/browser handle the creation, deletion, synchronization, and cross-platform sharing of passkeys. They even support third party hardware keys like Yubikeys!

This clearly appears as the direction the industry is taking. But this will only go as fast as popular tools like Supabase (@J0 🙏) will choose to !

[Minecrafter5K]

but to me it seems like there is no standard for adding new devices yet.

@probert94 There actually is a “standard”. Most Apple devices and android (I don’t know about windows) are capable of showing a qr-code to sign in to the new device and then creating the new passkey or create the passkey directly on the new device (from the website of the current device).
But like tomx-sh said, most passkeys synchronize so you can just use your password manager of choice or a YubiKey.

[probert94]

You can register and sign in entirely without a password

@tomx-sh I know that you can register and login without password with one device. But as soon as I have multiple devices, like a phone and a desktop, it is not that easy anymore.
Take the webauthn.io demo as an example. If you register using your phone, you are not able to login with the same user on your desktop. Of course this is just a demo-application but it's the same for other "real" applications.
I just tried with Google, where I do have a passkey on my android phone but not on my windows desktop.
So for now I have to login using my password to be able to add a new passkey.

There actually is a “standard”. Most Apple devices and android (I don’t know about windows) are capable of showing a qr-code to sign in to the new device

@Minecrafter5K I just checked on my android phone and it actually shows an additional option to use the passkey from another device. Unfortunately this option does not appear on windows (yet) but at least it seems like a standard is coming.

[tomx-sh]

@probert94 Yes you are describing the process of sharing passkeys cross-OS. It is currently handled by QR codes or bluetooth by most platforms, as far as I know. It will get better and easier. Cannot be worse than the passwords/OTP hell we live in currently 😅

This is the way, things are moving clearly in that direction : Apple, Google, Microsoft and others are actively working on it. You see passkeys more and more. Supabase could play a great role in making this happen faster to free us from passwords 🥰

Just imagine

With Supabase, you can make a state-of-the-art passwordless application in minutes, allowing users to sign in instantly and anonymously with zero friction, without you (developer) worrying about passwords, resetting passwords, privacy, GDPR, storing emails, confirming emails, storing phone numbers, sending text messages, relying on nearly impossible to set up data-sucking external providers etc.

This will obviously become the number 1 authentication method for new projects / MVPs

[nstringham]

I just checked on my android phone and it actually shows an additional option to use the passkey from another device. Unfortunately this option does not appear on windows (yet) but at least it seems like a standard is coming

This feature is available on Chromium browser on Windows but doesn't work on Firefox

[probert94]

This feature is available on Chromium browser on Windows but doesn't work on Firefox

I actually tested with Chrome, Edge and Opera and the Option didn't appear for me at all.

[nstringham]

This feature is available on Chromium browser on Windows but doesn't work on Firefox

I actually tested with Chrome, Edge and Opera and the Option didn't appear for me at all.

Interesting, it's worked for me on multiple computers in both Chrome and Edge

[Minecrafter5K]

I believe this feature requires Bluetooth and/or Wi-Fi. On passkeys.dev, there is a support matrix (Base Capabilities -> Cross-Device Authentication Authenticator/Client) for more information.
Edit: you can also check support on https://featuredetect.passkeys.dev/ (Cross-Device Authentication (hybrid transports)).

For me (Windows 11 Home, desktop with no Wi-Fi or Bluetooth), CDA works with no browser. On my school PC, it was working (at least in Chrome). I don't know if CDA depends on wireless connectivity, but it looks like it does.

According to the Microsoft article on Passkeys devices need to be "in proximity of the Windows device". I think this is validated by Bluetooth.

Hope this gets implemented into Supabase! :D