Sign In with WebAuthn

Follow this guide to sign in users with security keys and the WebAuthn API.

Examples of security keys:

• Windows Hello
• Apple Touch ID
• Apple Face ID
• Yubico security keys
• Android Fingerprint sensors

You can read more about this feature in our blog post

​

Configuration

Enable the Security Key sign-in method in the Nhost Dashboard under Settings -> Sign-In Methods -> Security Keys.

You need to make sure you also set a valid client URL under Settings -> Authentication -> Client URL.

​

Sign Up

Users must use an email address to sign up with a security key.

• JavaScript

const { error, session } = await nhost.auth.signUp({
  email: 'joe@example.com',
  securityKey: true
})

​

Sign In

Once a user signed up with a security key, and verfied their email if needed, they can use it to sign in.

Example: Sign in with a security key:

• JavaScript

await nhost.auth.signIn({
  email: 'joe@example.com',
  securityKey: true
})

​

Add a Security Key

Any signed-in user with a verified email can add a security key to their user account. Once a security key is added, the user can use it their email and the security key to sign in.

It’s possible to add multiple security keys to a user account.

Example: Add a security key to a user account:

const { key, error } = await nhost.auth.addSecurityKey()

// Something unexpected happened
if (error) {
  console.log(error)
  return
}

// Successfully added a new security key
console.log(key.id)

A nickname can be associated with each security key to make it easier to manage security keys in the future.

await nhost.auth.addSecurityKey('iPhone')

​

List or Remove Security Keys

To list and remove security keys, use GraphQL and set permissions on the auth.security_keys table:

query securityKeys($userId: uuid!) {
  authUserSecurityKeys(where: { userId: { _eq: $userId } }) {
    id
    nickname
  }
}

To remove a security key:

mutation removeSecurityKey($id: uuid!) {
  deleteAuthUserSecurityKey(id: $id) {
    id
  }
}