Authentication with security keys and the WebAuthn API

docs/docs/reference/docgen/nextjs/content/use-add-security-key.mdx

@@ -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')
+}
+```

docs/docs/reference/docgen/nextjs/types/security-keys-hook-result.mdx → docs/docs/reference/docgen/nextjs/types/add-securit-key-hook-result.mdx

@@ -1,13 +1,13 @@
 ---
 # ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
-title: SecurityKeysHookResult
-sidebar_label: SecurityKeysHookResult
+title: AddSecuritKeyHookResult
+sidebar_label: AddSecuritKeyHookResult
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSecurityKeys.ts#L29
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAddSecurityKey.ts#L20
 ---
 
-# `SecurityKeysHookResult`
+# `AddSecuritKeyHookResult`
 
 ## Parameters
 
@@ -42,15 +42,3 @@ Returns `true` if the action is successful.
 Add a security key to the current user with the WebAuthn API
 
 ---
-
-**<span className="parameter-name">list</span>** <span className="optional-status">required</span> `Array<SecurityKey>`
-
-List the security keys of the current user
-
----
-
-**<span className="parameter-name">remove</span>** <span className="optional-status">required</span> `RemoveSecurityKeyHandler`
-
-Remove the given security key from the list of allowed keys for the current user
-
----

docs/docs/reference/docgen/react/content/use-add-security-key.mdx

@@ -0,0 +1,22 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useAddSecurityKey()
+sidebar_label: useAddSecurityKey()
+slug: /reference/react/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')
+}
+```

docs/docs/reference/docgen/react/types/security-keys-hook-result.mdx → docs/docs/reference/docgen/react/types/add-securit-key-hook-result.mdx

@@ -1,13 +1,13 @@
 ---
 # ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
-title: SecurityKeysHookResult
-sidebar_label: SecurityKeysHookResult
+title: AddSecuritKeyHookResult
+sidebar_label: AddSecuritKeyHookResult
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSecurityKeys.ts#L29
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAddSecurityKey.ts#L20
 ---
 
-# `SecurityKeysHookResult`
+# `AddSecuritKeyHookResult`
 
 ## Parameters
 
@@ -42,15 +42,3 @@ Returns `true` if the action is successful.
 Add a security key to the current user with the WebAuthn API
 
 ---
-
-**<span className="parameter-name">list</span>** <span className="optional-status">required</span> `Array<SecurityKey>`
-
-List the security keys of the current user
-
----
-
-**<span className="parameter-name">remove</span>** <span className="optional-status">required</span> `RemoveSecurityKeyHandler`
-
-Remove the given security key from the list of allowed keys for the current user
-
----

examples/react-apollo/src/generated.ts

@@ -1215,14 +1215,16 @@ export type AddItemMutation = { __typename?: 'mutation_root', insertTodo?: { __t
 
 export type NewTodoFragment = { __typename?: 'todos', id: string, contents: string };
 
-export type MyAuthenticatorsQueryVariables = Exact<{ [key: string]: never; }>;
+export type SecurityKeysQueryVariables = Exact<{
+  userId: Scalars['uuid'];
+}>;
 
 
-export type MyAuthenticatorsQuery = { __typename?: 'query_root', authUserAuthenticators: Array<{ __typename?: 'authUserAuthenticators', id: string, nickname?: string | null }> };
+export type SecurityKeysQuery = { __typename?: 'query_root', authUserAuthenticators: Array<{ __typename?: 'authUserAuthenticators', id: string, nickname?: string | null }> };
 
-export type RemoveAuthenticatorMutationVariables = Exact<{
+export type RemoveSecurityKeyMutationVariables = Exact<{
   id: Scalars['uuid'];
 }>;
 
 
-export type RemoveAuthenticatorMutation = { __typename?: 'mutation_root', deleteAuthUserAuthenticator?: { __typename?: 'authUserAuthenticators', id: string } | null };
+export type RemoveSecurityKeyMutation = { __typename?: 'mutation_root', deleteAuthUserAuthenticator?: { __typename?: 'authUserAuthenticators', id: string } | null };

examples/react-apollo/src/profile/security-keys.tsx

@@ -1,12 +1,64 @@
+import { useState } from 'react'
 import { FaMinus } from 'react-icons/fa'
+import { RemoveSecurityKeyMutation, SecurityKeysQuery } from 'src/generated'
 
+import { gql, useMutation } from '@apollo/client'
 import { ActionIcon, Button, Card, SimpleGrid, Table, TextInput, Title } from '@mantine/core'
 import { useInputState } from '@mantine/hooks'
-import { useSecurityKeys } from '@nhost/react'
+import { useAddSecurityKey, useUserId } from '@nhost/react'
+import { useAuthQuery } from '@nhost/react-apollo'
+
+const SECURITY_KEYS_LIST = gql`
+  query securityKeys($userId: uuid!) {
+    authUserAuthenticators(where: { userId: { _eq: $userId } }) {
+      id
+      nickname
+    }
+  }
+`
+
+const REMOVE_SECURITY_KEY = gql`
+  mutation removeSecurityKey($id: uuid!) {
+    deleteAuthUserAuthenticator(id: $id) {
+      id
+    }
+  }
+`
 
 export const SecurityKeys: React.FC = () => {
-  const { list, add, remove } = useSecurityKeys()
+  const { add } = useAddSecurityKey()
+  const userId = useUserId()
   const [nickname, setNickname] = useInputState('')
+  const [list, setList] = useState<{ id: string; nickname?: string | null }[]>([])
+  useAuthQuery<SecurityKeysQuery>(SECURITY_KEYS_LIST, {
+    variables: { userId },
+    onCompleted: ({ authUserAuthenticators }) => {
+      if (authUserAuthenticators) {
+        setList(authUserAuthenticators || [])
+      }
+    }
+  })
+
+  const addKey = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const { key, error } = await add(nickname)
+    if (error) {
+      console.log(error)
+    } else {
+      setNickname('')
+    }
+    if (key) {
+      setList([...list, key])
+    }
+  }
+  const [removeKey] = useMutation<RemoveSecurityKeyMutation>(REMOVE_SECURITY_KEY, {
+    onCompleted: ({ deleteAuthUserAuthenticator }) => {
+      if (deleteAuthUserAuthenticator?.id) {
+        setList(list.filter((item) => item.id !== deleteAuthUserAuthenticator.id))
+      }
+    }
+  })
+
   return (
     <Card shadow="sm" p="lg" m="sm">
       <Title>Security keys</Title>
@@ -20,25 +72,15 @@ export const SecurityKeys: React.FC = () => {
             <tr key={id}>
               <td>{nickname || id}</td>
               <td>
-                <ActionIcon onClick={() => remove(id)} color="red">
+                <ActionIcon onClick={() => removeKey({ variables: { id } })} color="red">
                   <FaMinus />
                 </ActionIcon>
               </td>
             </tr>
           ))}
         </tbody>
       </Table>
-      <form
-        onSubmit={async (e) => {
-          e.preventDefault()
-          const { error } = await add(nickname)
-          if (error) {
-            console.log(error)
-          } else {
-            setNickname('')
-          }
-        }}
-      >
+      <form onSubmit={addKey}>
         <SimpleGrid cols={2}>
           <TextInput
             autoFocus

packages/react/src/index.ts

@@ -1,6 +1,7 @@
 export * from './client'
 export * from './provider'
 export * from './useAccessToken'
+export * from './useAddSecurityKey'
 export * from './useAuthenticated'
 export * from './useAuthenticationStatus'
 export * from './useAuthInterpreter'
@@ -18,7 +19,6 @@ export * from './useNhostBackendUrl'
 export * from './useNhostClient'
 export * from './useProviderLink'
 export * from './useResetPassword'
-export * from './useSecurityKeys'
 export * from './useSendVerificationEmail'
 export * from './useSignInAnonymous'
 export * from './useSignInEmailPassword'

packages/react/src/useAddSecurityKey.ts

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+
+import {
+  ActionErrorState,
+  ActionSuccessState,
+  AddSecurityKeyHandlerResult,
+  addSecurityKeyPromise,
+  ErrorPayload
+} from '@nhost/core'
+
+import { useNhostClient } from './useNhostClient'
+
+interface AddSecurityKeyHandler {
+  (
+    /** Optional human-readable name of the security key */
+    nickname?: string
+  ): Promise<AddSecurityKeyHandlerResult>
+}
+
+export interface AddSecuritKeyHookResult extends ActionErrorState, ActionSuccessState {
+  /** Add a security key to the current user with the WebAuthn API */
+  add: AddSecurityKeyHandler
+}
+
+interface AddSecuritKeyHook {
+  (): AddSecuritKeyHookResult
+}
+
+/**
+ * Use the hook `useAddSecurityKey` to add a WebAuthn security key.
+ *
+ * @example
+ * ```tsx
+ * const { add, isLoading, isSuccess, isError, error } = useSecurityKeys()
+ *
+ * const handleFormSubmit = async (e) => {
+ *   e.preventDefault();
+ *
+ *   await add('key nickname')
+ * }
+ * ```
+ *
+ * @docs https://docs.nhost.io/reference/react/use-add-security-key
+ */
+export const useAddSecurityKey: AddSecuritKeyHook = () => {
+  const nhost = useNhostClient()
+  const [error, setError] = useState<ErrorPayload | null>(null)
+  const isSuccess = !error
+  const isError = !!error
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const add: AddSecurityKeyHandler = async (nickname) => {
+    setIsLoading(true)
+    const result = await addSecurityKeyPromise(nhost.auth.client, nickname)
+    const { error } = result
+    if (error) {
+      setError(error)
+    }
+    setIsLoading(false)
+    return result
+  }
+
+  return { add, isLoading, isSuccess, isError, error }
+}