Skip to main content

Sign In with Security Keys

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

Examples of security keys:

You can read more about this feature in our blog post

Setup​

Enable the Security Key sign-in method in the Nhost dashboard under Users -> Authentication Settings -> Security Keys.

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

Sign Up​

Signing up with a security key uses the same method as signing up with an email and a password. Instead of a password parameter, you need to set the securityKey parameter to true:

const { error, session } = await nhost.auth.signUp({
  email: 'joe@example.com',
  securityKey: true
})
if (error) {
  // Something unexpected happened, for instance, the user canceled their registration
  console.log(error)
} else if (session) {
  // Sign up is complete!
  console.log(session.user)
} else {
  console.log(
    'You need to verify your email address by clicking the link in the email we sent you.'
  )
}

Sign In​

Once a user added a security key, they can use it to sign in:

const { error, session } = await nhost.auth.signIn({
  email,
  securityKey: true
})
if (session) {
  // User is signed in
} else {
  // Something unexpected happened
  console.log(error)
}

Add a Security Key​

Any signed-in user with a valid email can add a security key when the feature is enabled. For instance, someone who signed up with an email and a password can add a security key and thus use it for their later sign-in!

Users can use multiple devices to sign in to their account. They can add as many security keys as they like.

const { key, error } = await nhost.auth.addSecurityKey()
if (key) {
  // Successfully added a new security key
  console.log(key.id)
} else {
  // Somethine unexpected happened
  console.log(error)
}

A nickname can be added for each security key to make them easy to identify:

await nhost.auth.addSecurityKey('my macbook')

List or Remove Security Keys​

To list and to remove security keys can be achieved over GraphQL after setting the correct Hasura permissions to the auth.security_keys table:

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