fix(react-apollo): add elevation check before adding security key (#2882)

### **PR Type**
Enhancement


___

### **Description**
- Implemented an elevation check before adding a security key when there
are existing keys
- Added new imports from '@nhost/react': `useElevateSecurityKeyEmail`
and `useUserEmail`
- Integrated `elevated` and `elevateEmailSecurityKey` from the
`useElevateSecurityKeyEmail` hook
- Added error handling for the elevation process
- Updated the `onSubmit` function to include the elevation check and
process
- Improved security by requiring elevation for adding subsequent
security keys


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>security-keys.tsx</strong><dd><code>Add elevation check
for security key addition</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

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

<li>Added import for <code>useElevateSecurityKeyEmail</code> and
<code>useUserEmail</code> from <br>'@nhost/react'<br> <li> Implemented
elevation check before adding a security key<br> <li> Added error
handling for elevation process<br> <li> Integrated <code>elevated</code>
and <code>elevateEmailSecurityKey</code> from
<br><code>useElevateSecurityKeyEmail</code> hook<br>


</details>


  </td>
<td><a
href="https://github.com/nhost/nhost/pull/2882/files#diff-20c5d7ececb3f500fc179a36ec957b0744197e88ca47d050e29b401967781be3">+24/-2</a>&nbsp;
&nbsp; </td>

</tr>                    
</table></td></tr></tr></tbody></table>

___

> 💡 **PR-Agent usage**:
>Comment `/help` on the PR to get a list of all available PR-Agent tools
and their descriptions

.changeset/nasty-jokes-own.md

@@ -0,0 +1,5 @@
+---
+'@nhost-examples/react-apollo': patch
+---
+
+fix: add elevated permission check before adding a security key

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

@@ -6,7 +6,12 @@ import { Form, FormControl, FormField, FormItem, FormMessage } from '@/component
 import { Input } from '@/components/ui/input'
 import { ApolloError, gql, useMutation } from '@apollo/client'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useAddSecurityKey, useUserId } from '@nhost/react'
+import {
+  useAddSecurityKey,
+  useElevateSecurityKeyEmail,
+  useUserEmail,
+  useUserId
+} from '@nhost/react'
 import { useAuthQuery } from '@nhost/react-apollo'
 import { Fingerprint, Info, Plus, Trash } from 'lucide-react'
 import { useState } from 'react'
@@ -29,9 +34,11 @@ const addSecurityKeySchema = z.object({
 
 export default function SecurityKeys() {
   const userId = useUserId()
-  const [showAddSecurityKeyDialog, setShowAddSecurityDialog] = useState(false)
+  const email = useUserEmail()
   const { add } = useAddSecurityKey()
   const [keys, setKeys] = useState<SecurityKey[]>([])
+  const { elevated, elevateEmailSecurityKey } = useElevateSecurityKeyEmail()
+  const [showAddSecurityKeyDialog, setShowAddSecurityDialog] = useState(false)
 
   const { refetch: refetchSecurityKeys } = useAuthQuery<SecurityKeysQuery>(
     gql`
@@ -61,6 +68,21 @@ export default function SecurityKeys() {
 
   const onSubmit = async (values: z.infer<typeof addSecurityKeySchema>) => {
     const { nickname } = values
+
+    if (!elevated && keys.length > 0) {
+      try {
+        const { elevated } = await elevateEmailSecurityKey(email as string)
+
+        if (!elevated) {
+          throw new Error('Permissions were not elevated')
+        }
+      } catch {
+        toast.error('Could not elevate permissions')
+
+        return
+      }
+    }
+
     const { key, isError, error } = await add(nickname)
 
     if (isError) {