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
}
}