Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Authentication with security keys and the WebAuthn API #910

Merged
merged 26 commits into from
Sep 13, 2022
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
1c3c7c2
feat: wip webauthn
plmercereau Aug 30, 2022
06bc885
refactor: simplify
plmercereau Aug 30, 2022
9bf938a
refactor: rename to passwordlessWebauthn
plmercereau Sep 1, 2022
9687581
feat: add device nickname and adapt example
plmercereau Sep 1, 2022
f42b693
feat: add webauthn to nhost.auth.signIn
plmercereau Sep 1, 2022
0feac15
fix: bundle @simplewebauth into @nhost/core
plmercereau Sep 2, 2022
0e11267
refactor: explicitly bundle simple webtauthn
plmercereau Sep 2, 2022
b9c012e
test: adapt navigation
plmercereau Sep 2, 2022
f6cfca9
refactor: change to "security key" terminology
plmercereau Sep 2, 2022
4629b95
refactor: change to "security key" terminology
plmercereau Sep 2, 2022
2f432b5
feat: useSecurityKeys
plmercereau Sep 3, 2022
4e7d1fb
docs: inline documentation
plmercereau Sep 5, 2022
bf4cc38
refactor: remove rp_id
plmercereau Sep 5, 2022
9e57a2b
Update packages/react/src/useSecurityKeys.ts
plmercereau Sep 6, 2022
13937fa
Update packages/react/src/useSecurityKeys.ts
plmercereau Sep 6, 2022
8e03774
refactor: types
plmercereau Sep 6, 2022
3d7369a
refactor: break blocks with `return` statements
plmercereau Sep 6, 2022
3a217fd
style: use #graphql
plmercereau Sep 6, 2022
618e5a8
chore: merge main
plmercereau Sep 6, 2022
26cb0de
test: webauthn
plmercereau Sep 7, 2022
5fc3b64
Merge branch 'bump-hasura-auth-0.11' into webauthn
plmercereau Sep 8, 2022
90843a9
refactor: early returns
plmercereau Sep 9, 2022
07eb26c
refactor: improve typings
plmercereau Sep 9, 2022
ad0d564
refactor: don't list or remove security keys
plmercereau Sep 12, 2022
164e8ca
doc: inline
plmercereau Sep 12, 2022
d7b5261
Merge branch 'main' into webauthn
plmercereau Sep 12, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: signUp()
sidebar_label: signUp()
slug: /reference/javascript/auth/sign-up
description: Use `nhost.auth.signUp` to sign up a user using email and password. If you want to sign up a user using passwordless email (Magic Link), SMS, or an OAuth provider, use the `signIn` function instead.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L102
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L106
---

# `signUp()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: signIn()
sidebar_label: signIn()
slug: /reference/javascript/auth/sign-in
description: Use `nhost.auth.signIn` to sign in a user using email and password, passwordless (email or sms) or an external provider. `signIn` can be used to sign in a user in various ways depending on the parameters.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L145
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L149
---

# `signIn()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: signOut()
sidebar_label: signOut()
slug: /reference/javascript/auth/sign-out
description: Use `nhost.auth.signOut` to sign out the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L233
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L245
---

# `signOut()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: resetPassword()
sidebar_label: resetPassword()
slug: /reference/javascript/auth/reset-password
description: Use `nhost.auth.resetPassword` to reset the password for a user. This will send a reset-password link in an email to the user. When the user clicks the reset-password link the user is automatically signed-in. Once signed-in, the user can change their password using `nhost.auth.changePassword()`.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L249
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L261
---

# `resetPassword()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: changePassword()
sidebar_label: changePassword()
slug: /reference/javascript/auth/change-password
description: Use `nhost.auth.changePassword` to change the password for the signed-in user. The old password is not needed. In case the user is not signed-in, a password reset ticket needs to be provided.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L265
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L277
---

# `changePassword()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: sendVerificationEmail()
sidebar_label: sendVerificationEmail()
slug: /reference/javascript/auth/send-verification-email
description: Use `nhost.auth.sendVerificationEmail` to send a verification email to the specified email. The email contains a verification-email link. When the user clicks the verification-email link their email is verified.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L284
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L296
---

# `sendVerificationEmail()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: changeEmail()
sidebar_label: changeEmail()
slug: /reference/javascript/auth/change-email
description: Use `nhost.auth.changeEmail` to change a user's email. This will send a confirm-email-change link in an email to the new email. Once the user clicks on the confirm-email-change link the email will be change to the new email.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L303
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L315
---

# `changeEmail()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: deanonymize()
sidebar_label: deanonymize()
slug: /reference/javascript/auth/deanonymize
description: Use `nhost.auth.deanonymize` to deanonymize a user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L319
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L331
---

# `deanonymize()`
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
title: addSecurityKey()
sidebar_label: addSecurityKey()
slug: /reference/javascript/auth/add-security-key
description: Use `nhost.auth.addSecurityKey to add a security key to the user, using the WebAuthn API.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L369
---

# `addSecurityKey()`

Use `nhost.auth.addSecurityKey to add a security key to the user, using the WebAuthn API.

## Parameters

---

**<span className="parameter-name">nickname</span>** <span className="optional-status">optional</span> `string`

optional human-readable nickname for the security key

---
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: onTokenChanged()
sidebar_label: onTokenChanged()
slug: /reference/javascript/auth/on-token-changed
description: Use `nhost.auth.onTokenChanged` to add a custom function that runs every time the access or refresh token is changed.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L362
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L387
---

# `onTokenChanged()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: onAuthStateChanged()
sidebar_label: onAuthStateChanged()
slug: /reference/javascript/auth/on-auth-state-changed
description: Use `nhost.auth.onAuthStateChanged` to add a custom function that runs every time the authentication status of the user changes. E.g. add a custom function that runs every time the authentication status changes from signed-in to signed-out.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L397
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L422
---

# `onAuthStateChanged()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: isAuthenticated()
sidebar_label: isAuthenticated()
slug: /reference/javascript/auth/is-authenticated
description: Use `nhost.auth.isAuthenticated` to check if the user is authenticated or not.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L439
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L464
---

# `isAuthenticated()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: isAuthenticatedAsync()
sidebar_label: isAuthenticatedAsync()
slug: /reference/javascript/auth/is-authenticated-async
description: Use `nhost.auth.isAuthenticatedAsync` to wait (await) for any internal authentication network requests to finish and then return the authentication status.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L457
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L482
---

# `isAuthenticatedAsync()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: getAuthenticationStatus()
sidebar_label: getAuthenticationStatus()
slug: /reference/javascript/auth/get-authentication-status
description: Use `nhost.auth.getAuthenticationStatus` to get the authentication status of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L483
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L508
---

# `getAuthenticationStatus()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: getAccessToken()
sidebar_label: getAccessToken()
slug: /reference/javascript/auth/get-access-token
description: Use `nhost.auth.getAccessToken` to get the access token of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L513
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L538
---

# `getAccessToken()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: getDecodedAccessToken()
sidebar_label: getDecodedAccessToken()
slug: /reference/javascript/auth/get-decoded-access-token
description: Use `nhost.auth.getDecodedAccessToken` to get the decoded access token of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L528
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L553
---

# `getDecodedAccessToken()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: getHasuraClaims()
sidebar_label: getHasuraClaims()
slug: /reference/javascript/auth/get-hasura-claims
description: Use `nhost.auth.getHasuraClaims` to get the Hasura claims of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L545
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L570
---

# `getHasuraClaims()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: getHasuraClaim()
sidebar_label: getHasuraClaim()
slug: /reference/javascript/auth/get-hasura-claim
description: Use `nhost.auth.getHasuraClaim` to get the value of a specific Hasura claim of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L563
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L588
---

# `getHasuraClaim()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: refreshSession()
sidebar_label: refreshSession()
slug: /reference/javascript/auth/refresh-session
description: Use `nhost.auth.refreshSession` to refresh the session with either the current internal refresh token or an external refresh token.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L586
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L611
---

# `refreshSession()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: getSession()
sidebar_label: getSession()
slug: /reference/javascript/auth/get-session
description: Use `nhost.auth.getSession()` to get the session of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L627
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L652
---

# `getSession()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: getUser()
sidebar_label: getUser()
slug: /reference/javascript/auth/get-user
description: Use `nhost.auth.getUser()` to get the signed-in user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L642
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L667
---

# `getUser()`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: HasuraAuthClient
sidebar_label: Auth
description: No description provided.
slug: /reference/javascript/auth
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L59
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L63
---

# `HasuraAuthClient`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: AuthChangeEvent
sidebar_label: AuthChangeEvent
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L100
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L106
---

# `AuthChangeEvent`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: AuthChangedFunction
sidebar_label: AuthChangedFunction
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L102
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L108
---

# `AuthChangedFunction`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: ChangeEmailParams
sidebar_label: ChangeEmailParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L82
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L88
---

# `ChangeEmailParams`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: ChangePasswordParams
sidebar_label: ChangePasswordParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L72
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L78
---

# `ChangePasswordParams`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: DeanonymizeParams
sidebar_label: DeanonymizeParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L87
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L93
---

# `DeanonymizeParams`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: OnTokenChangedFunction
sidebar_label: OnTokenChangedFunction
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L104
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L110
---

# `OnTokenChangedFunction`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: ResetPasswordParams
sidebar_label: ResetPasswordParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L67
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L73
---

# `ResetPasswordParams`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: SendVerificationEmailParams
sidebar_label: SendVerificationEmailParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L77
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L83
---

# `SendVerificationEmailParams`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: SignInParams
sidebar_label: SignInParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L59
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L64
---

# `SignInParams`
Expand All @@ -14,6 +14,7 @@ type SignInParams =
| SignInEmailPasswordParams
| SignInEmailPasswordOtpParams
| SignInPasswordlessEmailParams
| SignInPasswordlessSecurityKeyParams
| SignInPasswordlessSmsOtpParams
| SignInPasswordlessSmsParams
| SignInWithProviderOptions
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
title: SignInPasswordlessSecurityKeyParams
sidebar_label: SignInPasswordlessSecurityKeyParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L45
---

# `SignInPasswordlessSecurityKeyParams`

## Parameters

---

**<span className="parameter-name">email</span>** <span className="optional-status">required</span> `string`

---

**<span className="parameter-name">securityKey</span>** <span className="optional-status">required</span> `"true"`

---
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: SignInPasswordlessSmsOtpParams
sidebar_label: SignInPasswordlessSmsOtpParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L50
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L55
---

# `SignInPasswordlessSmsOtpParams`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: SignInPasswordlessSmsParams
sidebar_label: SignInPasswordlessSmsParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L45
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L50
---

# `SignInPasswordlessSmsParams`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: SignInWithProviderOptions
sidebar_label: SignInWithProviderOptions
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L54
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L59
---

# `SignInWithProviderOptions`
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
title: useAddSecurityKey()
sidebar_label: useAddSecurityKey()
slug: /reference/nextjs/use-add-security-key
description: Use the hook `useAddSecurityKey` to add a WebAuthn security key.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAddSecurityKey.ts#L45
---

# `useAddSecurityKey()`

Use the hook `useAddSecurityKey` to add a WebAuthn security key.

```tsx
const { add, isLoading, isSuccess, isError, error } = useSecurityKeys()

const handleFormSubmit = async (e) => {
e.preventDefault()

await add('key nickname')
}
```
Loading