(DOCSP-33540): React Native: Update Connect to an App Services App wi…

…th auth hooks (mongodb#3176)

## Pull Request Info

Note for reviewer: the tests are failing due to a known issue when you
run all the tests in this test suite. I ran the new test here many times
locally and it is passing.

Jira ticket: https://jira.mongodb.org/browse/DOCSP-33540

- [Connect to an App Services
App](https://preview-mongodbdacharyc.gatsbyjs.io/realm/DOCSP-33540/sdk/react-native/app-services/connect-to-app-services-app/):
Update examples to use new auth hooks.
- [App Provider
Reference](https://preview-mongodbdacharyc.gatsbyjs.io/realm/DOCSP-33540/sdk/react-native/api-reference/app-provider/#useapp--):
Update `useApp` example to remove old auth pattern.

### Reminder Checklist

Before merging your PR, make sure to check a few things.

- [x] Did you tag pages appropriately?
  - genre
  - meta.keywords
  - meta.description
- [x] Describe your PR's changes in the Release Notes section
- [x] Create a Jira ticket for related docs-app-services work, if any

### Release Notes

- **React Native SDK**
- Atlas App Services/Connect to an App Services App: Update examples to
use new auth hooks.
- API Reference/App Provider: Update `useApp` example to remove old auth
pattern.

### Review Guidelines


[REVIEWING.md](https://github.com/mongodb/docs-realm/blob/master/REVIEWING.md)

---------

Co-authored-by: Kyle Rollins <115574589+krollins-mdb@users.noreply.github.com>

examples/react-native/v12/TestApp/App.tsx

@@ -12,6 +12,7 @@ import {ObjectModels} from './src/components/object-models/ObjectModels';
 import {RelationshipExamples} from './src/components/relationships/RealmWrapper';
 import {CompensatingWriteErrorHandling} from './src/components/errors/CompensatingWriteWrapper';
 import {EncryptMetadata} from './src/components/encryption/EncryptMetadata';
+import { AppWithAuthHook } from './src/components/app-services/use-app';
 
 // Screens
 import {HomeScreen} from './src/screens/HomeScreen';
@@ -79,6 +80,10 @@ function App(): JSX.Element {
           name="Authentication"
           component={AuthenticationScreen}
         />
+        <Drawer.Screen
+          name="AppWithAuthHook"
+          component={AppWithAuthHook}
+        />
         <Drawer.Screen name="Encryption">
           {props => (
             <EncryptMetadata

examples/react-native/v12/TestApp/ios/Podfile.lock

@@ -489,7 +489,7 @@ PODS:
     - React-jsi (= 0.72.6)
     - React-logger (= 0.72.6)
     - React-perflogger (= 0.72.6)
-  - RealmJS (12.2.1):
+  - RealmJS (12.3.0):
     - React
   - RNGestureHandler (2.13.2):
     - React-Core
@@ -764,7 +764,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: f23e337008403341177fc52ee4ca94e442c17ede
   React-utils: fa59c9a3375fb6f4aeb66714fd3f7f76b43a9f16
   ReactCommon: dd03c17275c200496f346af93a7b94c53f3093a4
-  RealmJS: b36dae5c0def204602827884512252a320332c69
+  RealmJS: 4c52a15602e70b64cd9230b0a17a9c12741371f4
   RNGestureHandler: bb86e378287f7713baf3ca205423eb8109790022
   RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
   RNScreens: 85d3880b52d34db7b8eeebe2f1a0e807c05e69fa
@@ -774,4 +774,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 5f146ddb62f4ae63c85ec80898f0a94176f8ed53
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.12.1

examples/react-native/v12/TestApp/ios/TestApp.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

examples/react-native/v12/TestApp/src/components/app-services/use-app.test.tsx

@@ -0,0 +1,24 @@
+import 'react-native';
+import React from 'react';
+import {AppWithAuthHook} from './use-app';
+import {render, screen, userEvent} from '@testing-library/react-native';
+import '@testing-library/jest-dom';
+
+test('App with auth hook', async () => {
+  render(<AppWithAuthHook />);
+
+  const user = userEvent.setup();
+
+  const logInButton = screen.queryByTestId('log-in');
+
+  if (logInButton) {
+    await user.press(logInButton);
+  }
+
+  const loggedInUserText = await screen.findByTestId('logged-in-user-id');
+  expect(loggedInUserText).not.toEqual(null);
+
+  const notYetLoggedIn = screen.queryByText('No one is logged in yet.');
+
+  expect(notYetLoggedIn).not.toBeInTheDocument();
+});

examples/react-native/v12/TestApp/src/components/app-services/use-app.tsx

@@ -0,0 +1,93 @@
+// :snippet-start: app-config-imports
+import React from 'react';
+import {AppProvider, UserProvider} from '@realm/react';
+// :snippet-end:
+// :snippet-start: import-use-app
+// :uncomment-start:
+//import React from 'react';
+// :uncomment-end:
+import {useApp} from '@realm/react';
+// :snippet-end:
+import {useAuth} from '@realm/react';
+import {Text, View, Pressable, StyleSheet} from 'react-native';
+import {APP_ID} from '../../../appServicesConfig';
+
+// :snippet-start: app-config
+export const AppWithAuthHook = () => {
+  return (
+    <View>
+      <AppProvider id={APP_ID}>
+        <UserProvider fallback={LogIn}>
+          <MyApp />
+        </UserProvider>
+      </AppProvider>
+    </View>
+  );
+};
+// :snippet-end:
+
+const LogIn = () => {
+  const {logInWithAnonymous} = useAuth();
+
+  return (
+    <View>
+      <Text>No one is logged in yet.</Text>
+      <Pressable
+        testID="log-in"
+        style={styles.button}
+        onPress={logInWithAnonymous}>
+        <Text style={styles.buttonText}>Log in</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+// :snippet-start: use-app
+function MyApp() {
+  const app = useApp();
+  // Proceed to app logic...
+  // :remove-start:
+  return (
+    <Text testID="logged-in-user-id">"Logged in as user with ID: {app.currentUser?.id}"</Text>
+  );
+  // :remove-end:
+}
+// :snippet-end:
+
+const styles = StyleSheet.create({
+  section: {
+    flex: 1,
+    marginTop: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  textInput: {
+    backgroundColor: '#C5CAE9',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    marginVertical: 5,
+  },
+  inputGroup: {
+    width: '100%',
+  },
+  buttonGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginVertical: 12,
+    paddingVertical: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    backgroundColor: '#3F51B5',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#ffffff',
+    paddingVertical: 5,
+    paddingHorizontal: 8,
+    marginVertical: 5,
+    marginHorizontal: 8,
+  },
+  buttonText: {
+    color: '#ffffff',
+    textAlign: 'center',
+  },
+});

examples/react-native/v12/TestApp/src/navigation/types.tsx

@@ -16,6 +16,7 @@ export type RootStackParamList = {
     encryptionKey: ArrayBuffer;
   };
   Quickstart: undefined;
+  AppWithAuthHook: undefined;
 };
 
 export type SubscriptionStackParamList = {

examples/react-native/v12/TestApp/testSetup.ts

@@ -10,6 +10,7 @@ jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 // Suppress noisy warnings. Should probably investigate
 // all warnings at some point.
 global.console.warn = jest.fn();
+global.console.error = jest.fn();
 
 beforeEach(async () => {
   // Close and remove all realms in the default directory.

source/examples/generated/react-native/v12/use-app.snippet.app-config-imports.tsx.rst

@@ -0,0 +1,4 @@
+.. code-block:: typescript
+
+   import React from 'react';
+   import {AppProvider, UserProvider} from '@realm/react';

source/examples/generated/react-native/v12/use-app.snippet.app-config.tsx.rst

@@ -0,0 +1,13 @@
+.. code-block:: typescript
+
+   export const AppWithAuthHook = () => {
+     return (
+       <View>
+         <AppProvider id={APP_ID}>
+           <UserProvider fallback={LogIn}>
+             <MyApp />
+           </UserProvider>
+         </AppProvider>
+       </View>
+     );
+   };

source/examples/generated/react-native/v12/use-app.snippet.import-use-app.tsx.rst

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

source/examples/generated/react-native/v12/use-app.snippet.use-app.tsx.rst

@@ -0,0 +1,6 @@
+.. code-block:: typescript
+
+   function MyApp() {
+     const app = useApp();
+     // Proceed to app logic...
+   }

source/sdk/react-native/api-reference/app-provider.txt

@@ -4,6 +4,10 @@
 AppProvider (@realm/react)
 ==========================
 
+.. meta:: 
+   :description: Learn how to use the AppProvider ReactElement hooks to work with an App Services App. 
+   :keywords: code example
+
 .. facet::
   :name: genre
   :values: reference
@@ -646,8 +650,8 @@ useApp()
 The ``useApp()`` hook provides access to a :js-sdk:`Realm.App <classes/App.html>`
 instance.
 
-.. literalinclude:: /examples/generated/react-native/ts/use-app.test.snippet.use-app.tsx
-   :language: typescript
+.. include:: /examples/generated/react-native/v12/use-app.snippet.import-use-app.tsx.rst
+.. include:: /examples/generated/react-native/v12/use-app.snippet.use-app.tsx.rst
 
 *Returns*
 

source/sdk/react-native/app-services/connect-to-app-services-app.txt

@@ -4,6 +4,14 @@
 Connect to an Atlas App Services App - React Native SDK
 =======================================================
 
+.. meta:: 
+   :description: Connect to Atlas App Services from the Atlas Device SDK. Specify configuration details to customize App access.
+   :keywords: code example
+
+.. facet::
+  :name: genre
+  :values: reference
+
 .. contents:: On this page
    :local:
    :backlinks: none
@@ -30,9 +38,11 @@ Configure the App Client
 To set up your App client, pass the App ID string
 to the ``id`` prop of the ``AppProvider``.
 Wrap any components that need to access the App with the ``AppProvider``.
+In this example, we wrap the :ref:`UserProvider <react-native-user-provider>` 
+in the ``AppProvider`` to authenticate a user.
 
-.. literalinclude:: /examples/generated/react-native/ts/app-provider.test.snippet.app-provider.tsx
-   :language: typescript
+.. include:: /examples/generated/react-native/v12/use-app.snippet.app-config-imports.tsx.rst
+.. include:: /examples/generated/react-native/v12/use-app.snippet.app-config.tsx.rst
 
 .. include:: /includes/multiple-app-client-details-and-app-config-cache.rst
 
@@ -42,11 +52,10 @@ Retrieve an Instance of the App Client
 --------------------------------------
 
 All components wrapped within an ``AppProvider`` can access the :js-sdk:`App <Realm.App.html>`
-client with the ``useApp()`` hook. Using the App, you can authenticate users
-and access App Services.
+client with the ``useApp()`` hook.
 
-.. literalinclude:: /examples/generated/react-native/ts/use-app.test.snippet.use-app.tsx
-   :language: typescript
+.. include:: /examples/generated/react-native/v12/use-app.snippet.import-use-app.tsx.rst
+.. include:: /examples/generated/react-native/v12/use-app.snippet.use-app.tsx.rst
 
 .. _react-native-retrieve-client-outside-provider: