Sign In with Security Keys
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
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
}
}