- Generate snippets

- Update API doc links
- Update includes

examples/react-native/v12/TestApp/src/components/authentication/api-keys/LoginManager.tsx

@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {View, Text, TextInput, StyleSheet, Pressable} from 'react-native';
 import {useAuth, useEmailPasswordAuth} from '@realm/react';
 
-import {LoginManagerProps, RegisterButtonProps} from '../../types';
+import {ApiKey, LoginManagerProps, RegisterButtonProps} from '../../types';
 
 export const LoginManager = ({apiKey}: LoginManagerProps) => {
   const [email, setEmail] = useState('');
@@ -15,13 +15,15 @@ export const LoginManager = ({apiKey}: LoginManagerProps) => {
     logIn({email, password});
   };
 
-  const loginApiKeyUser = async () => {
+  // :snippet-start: api-key-login
+  const loginApiKeyUser = async (apiKey: ApiKey) => {
     try {
       logInWithApiKey(apiKey!.key);
     } catch (error) {
       console.log(error);
     }
   };
+  // :snippet-end:
 
   return (
     <View>
@@ -35,7 +37,9 @@ export const LoginManager = ({apiKey}: LoginManagerProps) => {
             <Pressable
               testID="login-api-key-button"
               style={styles.button}
-              onPress={loginApiKeyUser}>
+              onPress={() => {
+                loginApiKeyUser(apiKey);
+              }}>
               <Text style={styles.buttonText}>Log in with API key</Text>
             </Pressable>
           </View>

examples/react-native/v12/TestApp/src/components/authentication/api-keys/steps/Step1.tsx

@@ -1,14 +1,29 @@
+// :snippet-start: user-api-key-imports
+import {useUser} from '@realm/react';
+// :snippet-end:
+
 import React, {useState, useEffect} from 'react';
 import {View, Text, TextInput, StyleSheet, Pressable} from 'react-native';
-import {useUser} from '@realm/react';
 
 import {StepProps} from '../../../types';
 
 export const Step1 = ({currentStep, apiKey, setApiKey}: StepProps) => {
+  const [apiKeyName, setApiKeyName] = useState('');
+
+  // :snippet-start: user-api-key
   const user = useUser();
 
-  const [apiKeyName, setApiKeyName] = useState('');
-  const [createKeyError, setCreateKeyError] = useState(false);
+  const createUserApiKey = async () => {
+    // :snippet-start: create-user-api-key
+    const {_id, key, name, disabled} = await user?.apiKeys.create(apiKeyName);
+    // :snippet-end:
+
+    // ...Do something with API key like save it
+    // or share it with external service that authenticates
+    // on user's behalf.
+    setApiKey({_id, key, name, disabled}); // :remove:
+  };
+  // :snippet-end:
 
   // This useEffect runs once every time the component is rendered. Deletes all
   // existing api keys for the current user.
@@ -30,25 +45,10 @@ export const Step1 = ({currentStep, apiKey, setApiKey}: StepProps) => {
     setApiKey(undefined);
   }, []);
 
-  const createUserApiKey = async () => {
-    try {
-      const {_id, key, name, disabled} = await user?.apiKeys.create(apiKeyName);
-      setApiKey({_id, key, name, disabled});
-
-      if (createKeyError) {
-        setCreateKeyError(false);
-      }
-    } catch (error) {
-      setCreateKeyError(true);
-    }
-  };
-
   return (
     <View>
       <Text>Step {currentStep + 1}: Create a user API Key</Text>
 
-      {createKeyError && <Text>Couldn't create the API key.</Text>}
-
       <View>
         {apiKey ? (
           <View>

examples/react-native/v12/TestApp/src/components/authentication/api-keys/steps/Step2.tsx

@@ -12,30 +12,41 @@ export const Step2 = ({currentStep, apiKey, setApiKey}: StepProps) => {
   const [cloudKeyDeleted, setCloudKeyDeleted] = useState(false);
 
   const deleteUserApiKey = async () => {
+    // :snippet-start: api-key-delete
     await user!.apiKeys.delete(cloudApiKey!._id);
+    // :snippet-end:
 
     setApiKey(undefined);
     setCloudApiKey(undefined);
     setCloudKeyDeleted(true);
   };
 
   const disableUserApiKey = async () => {
+    // :snippet-start: api-key-disable
     await user!.apiKeys.disable(cloudApiKey!._id);
+    // :snippet-end:
 
     await getUserApiKey();
   };
 
   const enableUserApiKey = async () => {
+    // :snippet-start: api-key-enable
     await user!.apiKeys.enable(cloudApiKey!._id);
+    // :snippet-end:
 
     await getUserApiKey();
   };
 
+  // :snippet-start: look-up-user-api-key
   const getUserApiKey = async () => {
+    // List all of a user's keys
+    const keys = await user.apiKeys.fetchAll();
+    // Get a specific key by its ID
     const key = await user!.apiKeys.fetch(apiKey!._id);
 
     setCloudApiKey(key);
   };
+  // :snippet-end:
 
   if (cloudKeyDeleted) {
     return <Text testID="delete-result">API key successfully deleted!</Text>;

source/examples/generated/react-native/v12/LoginManager.snippet.api-key-login.tsx.rst

@@ -0,0 +1,9 @@
+.. code-block:: typescript
+
+   const loginApiKeyUser = async (apiKey: ApiKey) => {
+     try {
+       logInWithApiKey(apiKey!.key);
+     } catch (error) {
+       console.log(error);
+     }
+   };

source/examples/generated/react-native/v12/Step1.snippet.create-user-api-key.tsx.rst

@@ -0,0 +1,3 @@
+.. code-block:: typescript
+
+   const {_id, key, name, disabled} = await user?.apiKeys.create(apiKeyName);

source/examples/generated/react-native/v12/Step1.snippet.user-api-key-imports.tsx.rst

@@ -0,0 +1,3 @@
+.. code-block:: typescript
+
+   import {useUser} from '@realm/react';

source/examples/generated/react-native/v12/Step1.snippet.user-api-key.tsx.rst

@@ -0,0 +1,11 @@
+.. code-block:: typescript
+
+   const user = useUser();
+
+   const createUserApiKey = async () => {
+     const {_id, key, name, disabled} = await user?.apiKeys.create(apiKeyName);
+
+     // ...Do something with API key like save it
+     // or share it with external service that authenticates
+     // on user's behalf.
+   };

source/examples/generated/react-native/v12/Step2.snippet.api-key-delete.tsx.rst

@@ -0,0 +1,3 @@
+.. code-block:: typescript
+
+   await user!.apiKeys.delete(cloudApiKey!._id);

source/examples/generated/react-native/v12/Step2.snippet.api-key-disable.tsx.rst

@@ -0,0 +1,3 @@
+.. code-block:: typescript
+
+   await user!.apiKeys.disable(cloudApiKey!._id);

source/examples/generated/react-native/v12/Step2.snippet.api-key-enable.tsx.rst

@@ -0,0 +1,3 @@
+.. code-block:: typescript
+
+   await user!.apiKeys.enable(cloudApiKey!._id);

source/examples/generated/react-native/v12/Step2.snippet.look-up-user-api-key.tsx.rst

@@ -0,0 +1,10 @@
+.. code-block:: typescript
+
+   const getUserApiKey = async () => {
+     // List all of a user's keys
+     const keys = await user.apiKeys.fetchAll();
+     // Get a specific key by its ID
+     const key = await user!.apiKeys.fetch(apiKey!._id);
+
+     setCloudApiKey(key);
+   };

source/sdk/react-native/manage-users/authenticate-users.txt

@@ -161,11 +161,16 @@ API Key User
 The :ref:`API key <api-key-authentication>` authentication provider allows
 server processes to access your app directly or on behalf of a user.
 
-To log in with an API key, create an API Key credential with a server or user
-API key and pass it to ``App.logIn()``:
+Before you can log a user in with an API key, you need to
+:ref:`create an API key <react-native-create-a-user-api-key>`.
 
-.. literalinclude:: /examples/generated/node/authenticate.snippet.server-api-key-login.js
-   :language: javascript
+To log in with an API key:
+
+#. Destructure ``loginWithApiKey`` and ``result`` from the ``useAuth`` hook.
+#. Pass your API key to ``loginWithApiKey()``.
+
+.. literalinclude:: /examples/generated/react-native/v12/LoginManager.snippet.api-key-login.tsx.rst
+   :language: typescript
 
 .. _react-native-custom-jwt-login:
 .. _react-native-login-custom-jwt:

source/sdk/react-native/manage-users/manage-user-api-keys.txt

@@ -15,14 +15,17 @@ User API keys allow devices or services to communicate with App Services on beha
 that users credentials. User API keys can be revoked at any time by the authenticated user.
 User API keys do not expire on their own.
 
-You can manage a user API key with the :js-sdk:`ApiKeyAuth <Realm.Auth.ApiKeyAuth.html>`
+You can manage a user API key with the :js-sdk:`ApiKeyAuth <classes/Realm.Auth.ApiKeyAuth.html>`
 client accessed with an authenticated user's :js-sdk:`User.apiKeys
-<Realm.User.html#apiKeys>` property.
+<classes/Realm.User.html#apiKeys>` property.
 
 If you are using ``@realm/react``, you can access a user's ``ApiKeyAuth`` client
 with the ``useUser()`` hook in a component wrapped by ``UserProvider``.
 
-.. literalinclude:: /examples/generated/react-native/ts/user-api-keys.test.snippet.user-api-key.tsx
+.. literalinclude:: /examples/generated/react-native/v12/Step1.snippet.user-api-key-imports.tsx.rst
+   :language: typescript
+
+.. literalinclude:: /examples/generated/react-native/v12/Step1.snippet.user-api-key.tsx.rst
    :language: typescript
 
 .. _react-native-create-a-user-api-key:
@@ -32,7 +35,7 @@ Create a User API Key
 
 To create a new :ref:`user API key <api-key-authentication-user-api-key>`, pass
 a name that's unique among all of the user's API keys to
-:js-sdk:`ApiKeyAuth.create() <Realm.Auth.ApiKeyAuth.html#create>`.
+:js-sdk:`ApiKeyAuth.create() <classes/Realm.Auth.ApiKeyAuth.html#create>`.
 
 The SDK returns the value of the user API key when you create it. Make
 sure to store the ``key`` value securely so that you can use it to log in.
@@ -43,48 +46,47 @@ You **cannot** create a user API key for a :ref:`server API key
 <api-key-authentication-server-api-key>`  or an :ref:`anonymous user
 <anonymous-authentication>`.
 
-.. literalinclude:: /examples/generated/node/authenticate.snippet.create-user-api-key.js
-   :language: javascript
-   :start-after: const user = app.currentUser;
+.. literalinclude:: /examples/generated/react-native/v12/Step1.snippet.create-user-api-key.tsx.rst
+   :language: typescript
 
 .. _react-native-look-up-a-user-api-key:
 
 Look up a User API Key
 ----------------------
 
 To get an array that lists all of a user's API keys, call
-:js-sdk:`ApiKeyAuth.fetchAll() <Realm.Auth.ApiKeyAuth.html#fetchAll>`.
+:js-sdk:`ApiKeyAuth.fetchAll() <classes/Realm.Auth.ApiKeyAuth.html#fetchAll>`.
 
 To find a specific API key, pass the key's ``_id`` to
-:js-sdk:`ApiKeyAuth.fetch() <Realm.Auth.ApiKeyAuth.html#fetch>`.
+:js-sdk:`ApiKeyAuth.fetch() <classes/Realm.Auth.ApiKeyAuth.html#fetch>`.
 
-.. literalinclude:: /examples/generated/node/authenticate.snippet.look-up-user-api-key.js
+.. literalinclude:: /examples/generated/react-native/v12/Step2.snippet.look-up-user-api-key.tsx.rst
    :language: javascript
-   :start-after: const user = app.currentUser;
 
 .. _react-native-enable-or-disable-a-user-api-key:
 
 Enable or Disable an API Key
 ----------------------------
 
 To enable or disable a user API key, pass the key's ``_id`` to
-:js-sdk:`ApiKeyAuth.enable() <Realm.Auth.ApiKeyAuth.html#enable>` or
-:js-sdk:`ApiKeyAuth.disable() <Realm.Auth.ApiKeyAuth.html#disable>`. When a key
+:js-sdk:`ApiKeyAuth.enable() <classes/Realm.Auth.ApiKeyAuth.html#enable>` or
+:js-sdk:`ApiKeyAuth.disable() <classes/Realm.Auth.ApiKeyAuth.html#disable>`. When a key
 is disabled, it cannot be used to log in on behalf of the user.
 
-.. literalinclude:: /examples/generated/node/authenticate.snippet.enable-disable-user-api-key.js
-   :language: javascript
-   :start-after: const user = app.currentUser;
+.. literalinclude:: /examples/generated/react-native/v12/Step2.snippet.api-key-enable.tsx.rst
+   :language: typescript
+
+.. literalinclude:: /examples/generated/react-native/v12/Step2.snippet.api-key-disable.tsx.rst
+   :language: typescript
 
 .. _react-native-delete-a-user-api-key:
 
 Delete an API Key
 -----------------
 
 To permanently delete a user API, pass the key's ``_id`` to
-:js-sdk:`ApiKeyAuth.delete() <Realm.Auth.ApiKeyAuth.html#delete>`. Deleted keys
+:js-sdk:`ApiKeyAuth.delete() <classes/Realm.Auth.ApiKeyAuth.html#delete>`. Deleted keys
 cannot be recovered.
 
-.. literalinclude:: /examples/generated/node/authenticate.snippet.delete-user-api-key.js
-   :language: javascript
-   :start-after: const user = app.currentUser;
+.. literalinclude:: /examples/generated/react-native/v12/Step2.snippet.api-key-delete.tsx.rst
+   :language: typescript