Merge 8d991eb into 710cbf7

.github/workflows/package-unit-tests.yml

@@ -25,20 +25,46 @@ jobs:
           - '@realm/network-transport'
           - '@realm/babel-plugin'
           - '@realm/react'
+        include:
+          - workspace: '@realm/react'
+            use-baas: true
     name: ${{ matrix.workspace }} unit tests
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
         with:
           submodules: "recursive"
+
       - uses: actions/setup-node@v3
         with:
           node-version: 18
+
       # ninja-build is used by default if available and results in faster build times
       - name: Install ninja
         run: sudo apt-get install ninja-build
+
       - name: ccache
         uses: hendrikmuhs/ccache-action@v1
+
+      - name: Generate server configuration
+        if: ${{matrix.use-baas}}
+        id: baas-config
+        run:
+          suffix=$(node -p 'Math.floor(Math.random()*Number.MAX_SAFE_INTEGER)');
+          subdomain="realm-js-test-server-${{ github.run_id }}-${{ github.run_attempt }}-${suffix}";
+          echo "subdomain=${subdomain}" >> $GITHUB_OUTPUT;
+          echo "url=https://${subdomain}.ngrok.io" >> $GITHUB_OUTPUT;
+
+      - name: Trigger the test server workflow to start the server
+        if: ${{matrix.use-baas}}
+        run: gh workflow run test-server.yml -f ngrok_subdomain=${{ steps.baas-config.outputs.subdomain }} -f run_id=${{ github.run_id }}
+        env:
+          GH_TOKEN: ${{ github.token }}
+
+      - name: Set baas env
+        if: ${{matrix.use-baas}}
+        run: echo "realmBaseUrl=${{ steps.baas-config.outputs.url }}" >> $GITHUB_ENV
+
       # Install the root package to get dev-dependencies
       # (--ignore-scripts to avoid downloading or building the native module)
       - run: npm ci --ignore-scripts

example/app/AppNonSync.tsx

@@ -6,6 +6,7 @@ import {TaskManager} from './components/TaskManager';
 import {useQuery} from '@realm/react';
 
 export const AppNonSync = () => {
+  debugger;
   const [showDone, setShowDone] = React.useState(false);
   const tasks = useQuery(
     Task,

example/app/AppSync.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useApp, useUser} from '@realm/react';
 import {Pressable, StyleSheet, Text} from 'react-native';
 
@@ -10,11 +10,13 @@ import colors from './styles/colors';
 import {OfflineModeButton} from './components/OfflineModeButton';
 
 import {useRealm, useQuery} from '@realm/react';
+import {useAuth} from '@realm/react';
 
 export const AppSync: React.FC = () => {
   const realm = useRealm();
   const user = useUser();
   const app = useApp();
+  const {logOut} = useAuth();
   const [showDone, setShowDone] = useState(false);
   const tasks = useQuery(
     Task,
@@ -31,10 +33,6 @@ export const AppSync: React.FC = () => {
     });
   }, [realm, tasks]);
 
-  const handleLogout = useCallback(() => {
-    user.logOut();
-  }, [user]);
-
   return (
     <>
       <Text style={styles.idText}>Syncing with app id: {app.id}</Text>
@@ -44,7 +42,7 @@ export const AppSync: React.FC = () => {
         setShowDone={setShowDone}
         showDone={showDone}
       />
-      <Pressable style={styles.authButton} onPress={handleLogout}>
+      <Pressable style={styles.authButton} onPress={logOut}>
         <Text
           style={styles.authButtonText}>{`Logout ${user?.profile.email}`}</Text>
       </Pressable>

example/app/AppWrapperSync.tsx

@@ -8,6 +8,7 @@ import colors from './styles/colors';
 import {AppSync} from './AppSync';
 
 import {RealmProvider} from '@realm/react';
+import {OpenRealmBehaviorType, OpenRealmTimeOutBehavior} from 'realm';
 
 export const AppWrapperSync: React.FC<{
   appId: string;
@@ -19,7 +20,15 @@ export const AppWrapperSync: React.FC<{
         <UserProvider fallback={<LoginScreen />}>
           <RealmProvider
             schema={schemas}
-            sync={{flexible: true, onError: error => console.error(error)}}>
+            sync={{
+              flexible: true,
+              existingRealmFileBehavior: {
+                type: OpenRealmBehaviorType.DownloadBeforeOpen,
+                timeOut: 1000,
+                timeOutBehavior: OpenRealmTimeOutBehavior.OpenLocalRealm,
+              },
+              onError: (_, error) => console.error('sync error', error),
+            }}>
             <AppSync />
           </RealmProvider>
         </UserProvider>

example/app/components/LoginScreen.tsx

@@ -3,53 +3,21 @@ import {View, Text, StyleSheet, TextInput, Pressable} from 'react-native';
 import colors from '../styles/colors';
 import {shadows} from '../styles/shadows';
 import {buttonStyles} from '../styles/button';
-import {Realm, useApp} from '@realm/react';
-
-export enum AuthState {
-  None,
-  Loading,
-  LoginError,
-  RegisterError,
-}
+import {AuthOperationName, useAuth, useEmailPasswordAuth} from '@realm/react';
 
 export const LoginScreen = () => {
-  const app = useApp();
+  const {result, logInWithEmailPassword} = useAuth();
+  const {register} = useEmailPasswordAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [authState, setAuthState] = useState(AuthState.None);
-
-  // If the user presses "login" from the auth screen, try to log them in
-  // with the supplied credentials
-  const handleLogin = useCallback(async () => {
-    setAuthState(AuthState.Loading);
-    const credentials = Realm.Credentials.emailPassword(email, password);
-    try {
-      await app.logIn(credentials);
-      setAuthState(AuthState.None);
-    } catch (e) {
-      console.log('Error logging in', e);
-      setAuthState(AuthState.LoginError);
-    }
-  }, [email, password, setAuthState, app]);
-
-  // If the user presses "register" from the auth screen, try to register a
-  // new account with the  supplied credentials and login as the newly created user
-  const handleRegister = useCallback(async () => {
-    setAuthState(AuthState.Loading);
-
-    try {
-      // Register the user...
-      await app.emailPasswordAuth.registerUser({email, password});
-      // ...then login with the newly created user
-      const credentials = Realm.Credentials.emailPassword(email, password);
-
-      await app.logIn(credentials);
-      setAuthState(AuthState.None);
-    } catch (e) {
-      console.log('Error registering', e);
-      setAuthState(AuthState.RegisterError);
-    }
-  }, [email, password, setAuthState, app]);
+
+  const handleLogin = useCallback(() => {
+    logInWithEmailPassword({email, password});
+  }, [logInWithEmailPassword, email, password]);
+
+  const handleRegister = useCallback(() => {
+    register({email, password});
+  }, [register, email, password]);
 
   return (
     <View style={styles.content}>
@@ -58,7 +26,7 @@ export const LoginScreen = () => {
           style={styles.input}
           value={email}
           onChangeText={setEmail}
-          autoCompleteType="email"
+          autoComplete="email"
           textContentType="emailAddress"
           autoCapitalize="none"
           autoCorrect={false}
@@ -71,42 +39,41 @@ export const LoginScreen = () => {
           value={password}
           onChangeText={setPassword}
           secureTextEntry
-          autoCompleteType="password"
+          autoComplete="password"
           textContentType="password"
           placeholder="Password"
         />
       </View>
 
-      {authState === AuthState.LoginError && (
-        <Text style={[styles.error]}>
-          There was an error logging in, please try again
-        </Text>
-      )}
-      {authState === AuthState.RegisterError && (
+      {result.error && result.error.operation === AuthOperationName.LogIn && (
         <Text style={[styles.error]}>
-          There was an error registering, please try again
+          There was an error logging in, please try again{' '}
         </Text>
       )}
 
+      {result.error &&
+        result.error.operation === AuthOperationName.Register && (
+          <Text style={[styles.error]}>
+            There was an error registering, please try again
+          </Text>
+        )}
+
       <View style={styles.buttons}>
         <Pressable
           onPress={handleLogin}
-          style={[
-            styles.button,
-            authState === AuthState.Loading && styles.buttonDisabled,
-          ]}
-          disabled={authState === AuthState.Loading}>
+          style={[styles.button, result.pending && styles.buttonDisabled]}
+          disabled={result.pending}>
           <Text style={buttonStyles.text}>Login</Text>
         </Pressable>
 
         <Pressable
           onPress={handleRegister}
           style={[
             styles.button,
-            authState === AuthState.Loading && styles.buttonDisabled,
+            result.pending && styles.buttonDisabled,
             styles.registerButton,
           ]}
-          disabled={authState === AuthState.Loading}>
+          disabled={result.pending}>
           <Text style={buttonStyles.text}>Register</Text>
         </Pressable>
       </View>

example/index.js

@@ -2,7 +2,6 @@
  * @format
  */
 
-import 'react-native-get-random-values';
 import React from 'react';
 import {AppRegistry} from 'react-native';
 import {AppWrapperNonSync} from './app/AppWrapperNonSync';