@rownd/react-native 0.1.1

package/src/assets/images/phone-verify-waiting.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="62px" height="100px" viewBox="0 0 62 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>unverified-phone</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="58" height="96" rx="8"></rect>
+        <filter x="-5.2%" y="-3.1%" width="110.3%" height="106.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="SMS-verify-from-web-stay-on-web-(BR)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="xlg-1312px-16-column-copy-51" transform="translate(-625.000000, -259.000000)">
+            <g id="unverified-phone" transform="translate(627.000000, 261.000000)">
+                <g id="Rectangle">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#444444" fill-rule="evenodd" xlink:href="#path-1"></use>
+                </g>
+                <circle id="Oval" fill="#000000" cx="29" cy="89" r="5"></circle>
+                <rect id="Rectangle" fill="#FFFFFF" x="5" y="11" width="48" height="71" rx="2"></rect>
+                <rect id="Rectangle" fill-opacity="0.4" fill="#D8D8D8" x="10" y="20" width="38" height="5"></rect>
+                <rect id="Rectangle-Copy" fill-opacity="0.4" fill="#D8D8D8" x="10" y="31" width="38" height="36"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/AuthenticatedComponent.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+
+const { useRownd } = require('../hooks/rownd');
+
+interface IAuthenticatedComponentProps {
+  shouldRequestSignIn?: boolean;
+  renderContentWhenUnauthenticated?: boolean;
+}
+
+export default function ({
+  shouldRequestSignIn,
+  renderContentWhenUnauthenticated,
+  children,
+}: React.PropsWithChildren<IAuthenticatedComponentProps>) {
+  const { is_authenticated, requestSignIn } = useRownd();
+
+  useEffect(() => {
+    if (shouldRequestSignIn && !is_authenticated) {
+      requestSignIn();
+    }
+  }, [is_authenticated, requestSignIn, shouldRequestSignIn]);
+
+  return (
+    <>
+      {(is_authenticated || renderContentWhenUnauthenticated) && (
+        <>{children}</>
+      )}
+    </>
+  );
+}

package/src/components/AutoSigninDialog.tsx

@@ -0,0 +1,125 @@
+import React, { useMemo, useCallback, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+} from '@gorhom/bottom-sheet';
+import { useTimeout } from 'usehooks-ts';
+import { MaterialIcons } from '@expo/vector-icons';
+
+import { useNav } from '../hooks';
+import { useGlobalContext } from './GlobalContext';
+
+export function AutoSigninDialog() {
+  const navTo = useNav();
+  const { state } = useGlobalContext();
+
+  // Let the user know they're auto signing-in, then close when done
+  useTimeout(() => {
+    if (state.nav.options.type === 'error') {
+      return;
+    }
+
+    handleClose();
+  }, 3000);
+
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  useEffect(() => {
+    if (bottomSheetModalRef.current) {
+      bottomSheetModalRef.current.present();
+    }
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setTimeout(() => {
+      navTo({ hide: true });
+    }, 150);
+  }, [navTo]);
+
+  const snapPoints = useMemo(() => ['30%', '60%'], []);
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop {...props} pressBehavior="none" />
+    ),
+    []
+  );
+
+  return (
+    <BottomSheetModal
+      snapPoints={snapPoints}
+      index={0}
+      backdropComponent={renderBackdrop}
+      keyboardBehavior="fillParent"
+      android_keyboardInputMode="adjustResize"
+      enablePanDownToClose={state.nav.options.type === 'error'}
+      onDismiss={handleClose}
+      style={styles.bottomSheet}
+      ref={bottomSheetModalRef}
+    >
+      <View style={styles.innerContainer}>
+        {state.nav.options.type === 'error' && (
+          <>
+            <MaterialIcons
+              name="error"
+              size={24}
+              color="#DA1E28"
+              style={styles.errorIcon}
+            />
+            <Text style={styles.errorMessage}>
+              {state.nav.options.message ||
+                'An error occurred. Please try again.'}
+            </Text>
+          </>
+        )}
+
+        {state.nav.options.type === 'sign-in' && (
+          <>
+            <ActivityIndicator size="large" color="#5b0ae0" />
+            <Text style={styles.signInMessage}>
+              Automatically signing you in. Just a sec...
+            </Text>
+          </>
+        )}
+      </View>
+    </BottomSheetModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    // flex: 1,
+  },
+  bottomSheet: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12,
+    },
+    shadowOpacity: 0.58,
+    shadowRadius: 16.0,
+
+    elevation: 24,
+  },
+  innerContainer: {
+    borderRadius: 20,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    padding: 25,
+    textAlign: 'center',
+  },
+  signInMessage: {
+    textAlign: 'center',
+    fontSize: 24,
+    padding: 20,
+  },
+  errorMessage: {
+    textAlign: 'center',
+    fontSize: 24,
+    padding: 20,
+  },
+  errorIcon: {
+    textAlign: 'center',
+  },
+});

package/src/components/DefaultContext.tsx

@@ -0,0 +1,278 @@
+import { useEffect, useCallback, useRef } from 'react';
+import isEqual from 'lodash-es/isEqual';
+import { useDebounce, useApi, useDeviceFingerprint } from '../hooks';
+import { DEFAULT_USER_AGENT } from '../hooks/api';
+import type { IConfig } from '../utils/config';
+import { useGlobalContext } from './GlobalContext';
+import { ActionType } from '../data/actions';
+import ky from 'ky';
+import * as Clipboard from 'expo-clipboard';
+import base64 from 'react-native-base64';
+import { Linking } from 'react-native';
+import { events, EventType } from '../utils/events';
+
+export type UserInfoResp = {
+  data: {
+    [key: string]: any;
+  };
+  redacted: string[];
+};
+
+interface UserAclsResponse {
+  acls: Record<string, { shared: boolean }>;
+}
+
+type DefaultContextProps = {
+  config: IConfig;
+};
+
+export function DefaultContext({ config }: DefaultContextProps) {
+  const { state, dispatch } = useGlobalContext();
+  const { client: api } = useApi();
+  useDeviceFingerprint();
+
+  // Fetch app schema and config
+  useEffect(() => {
+    (async () => {
+      try {
+        const resp: any = await api
+          .get('hub/app-config', {
+            headers: {
+              'x-rownd-app-key': config.appKey,
+            },
+          })
+          .json();
+
+        if (resp?.app?.icon) {
+          const iconMeta = await ky.head(resp.app.icon);
+          resp.app.icon_content_type = iconMeta.headers.get('content-type');
+        }
+
+        dispatch({
+          type: ActionType.SET_APP_CONFIG,
+          payload: resp.app,
+        });
+      } catch (err) {
+        console.error('Failed to fetch app config:', err);
+      }
+    })();
+  }, [api, config.appKey, dispatch]);
+
+  /**
+   * If not signed in, check the clipboard for an init hash or auth link we can use to auto-auth the user
+   */
+  useEffect(() => {
+    if (state.auth.access_token || !state.app.id) {
+      return;
+    }
+
+    (async () => {
+      try {
+        let authData = null;
+
+        let authLink =
+          (await Linking.getInitialURL()) || (await Clipboard.getStringAsync());
+        if (authLink.includes('rownd.link')) {
+          dispatch({
+            type: ActionType.CHANGE_ROUTE,
+            payload: {
+              route: '/account/auto-signin',
+              opts: {
+                type: 'sign-in',
+              },
+            },
+          });
+
+          authData = await ky
+            .get(authLink, {
+              headers: {
+                'User-Agent': DEFAULT_USER_AGENT,
+              },
+            })
+            .json();
+        } else if (authLink.startsWith('rph_init=')) {
+          const authStr = authLink.split('rph_init=')[1];
+          authData = JSON.parse(base64.decode(authStr));
+        } else {
+          return;
+        }
+
+        // Clear the clipboard value so we don't leak any creds
+        await Clipboard.setStringAsync('');
+
+        dispatch({
+          type: ActionType.LOGIN_SUCCESS,
+          payload: authData,
+        });
+      } catch (err) {
+        console.error(
+          'We found an auth link or string, but failed to authenticate with it because:',
+          err
+        );
+      }
+    })();
+  }, [state.auth.access_token, state.app.id, dispatch]);
+
+  const retrieveUserInfo = useCallback(() => {
+    if (!state.auth.access_token || !state.app.id) {
+      return;
+    }
+
+    (async () => {
+      const userInfo: UserInfoResp = await api
+        .get(`me/applications/${state.app.id}/data`, {
+          headers: {
+            Authorization: `Bearer ${state.auth.access_token}`,
+          },
+        })
+        .json();
+      dispatch({
+        type: ActionType.LOAD_USER,
+        payload: userInfo,
+      });
+
+      dispatch({
+        type: ActionType.UPDATE_LOCAL_ACLS,
+        payload: userInfo.redacted.reduce(
+          (acc: Record<string, any>, field: string) => {
+            acc[field] = { shared: false };
+            return acc;
+          },
+          {}
+        ),
+      });
+    })();
+  }, [api, dispatch, state.app.id, state.auth.access_token]);
+
+  const retrieveAcls = useCallback(() => {
+    if (!state.app.id || !state.auth.access_token) {
+      return;
+    }
+
+    (async () => {
+      try {
+        const appUserAcls: UserAclsResponse = await api
+          .get(`me/applications/${state.app.id}/acls`, {
+            headers: {
+              Authorization: `Bearer ${state.auth.access_token}`,
+            },
+          })
+          .json();
+        dispatch({
+          type: ActionType.UPDATE_LOCAL_ACLS,
+          payload: appUserAcls.acls,
+        });
+      } catch (err) {
+        if (err instanceof Error) {
+          // const unsharedAcls = reduceSchemaToUnsharedAcls();
+          dispatch({
+            type: ActionType.UPDATE_LOCAL_ACLS,
+            payload: {},
+          });
+        }
+      }
+    })();
+  }, [api, dispatch, state.app.id, state.auth.access_token]);
+
+  useEffect(retrieveUserInfo, [retrieveUserInfo]);
+  useEffect(retrieveAcls, [retrieveAcls]);
+
+  useEffect(() => {
+    if (!state.user.needs_refresh) {
+      return;
+    }
+    retrieveUserInfo();
+    dispatch({
+      type: ActionType.SET_REFRESH_USER_DATA,
+      payload: { needs_refresh: false },
+    });
+  }, [dispatch, retrieveUserInfo, state.user.needs_refresh]);
+
+  const saveAclsDebounced = useDebounce(saveAcls, 2000); // 2s
+
+  async function saveAcls() {
+    if (state.app.id && state.local_acls) {
+      await api
+        .put(`me/applications/${state.app.id}/acls`, {
+          headers: {
+            Authorization: `Bearer ${state.auth.access_token}`,
+          },
+          json: {
+            acls: state.local_acls,
+          },
+        })
+        .json();
+    }
+  }
+
+  const localAclsRef = useRef(state.local_acls);
+  useEffect(() => {
+    // Don't save acls if they were just loaded for the first time or they haven't changed
+    if (
+      !localAclsRef.current ||
+      isEqual(localAclsRef.current, state.local_acls)
+    ) {
+      return;
+    }
+    saveAclsDebounced();
+  }, [saveAclsDebounced, state.local_acls]);
+
+  const saveUserDataDebounced = useDebounce(saveUserData, 2000); // 2s
+
+  // Save user data in the application state to the API server
+  async function saveUserData() {
+    if (state.app.id && state.user.data && state.auth.access_token) {
+      dispatch({
+        type: ActionType.SET_IS_SAVING_USER_DATA,
+        payload: {
+          saving: true,
+        },
+      });
+
+      const eventDetails: Record<string, any> = {};
+      try {
+        eventDetails.data = await api
+          .put(`me/applications/${state.app.id}/data`, {
+            headers: {
+              Authorization: `Bearer ${state.auth.access_token}`,
+            },
+            json: {
+              data: state.user.data,
+            },
+          })
+          .json();
+      } catch (err) {
+        eventDetails.error = err;
+        // Get the latest user info from Rownd. Something was probably bad
+        // with the data we just tried to save.
+        // This is a bit hacky. We should be able to reset the state without
+        // calling rownd again by rolling back to a previously good state...
+        retrieveUserInfo();
+        // TODO: Set some error state
+      } finally {
+        events.dispatch(EventType.USER_DATA_SAVED, eventDetails);
+        dispatch({
+          type: ActionType.SET_IS_SAVING_USER_DATA,
+          payload: {
+            saving: false,
+          },
+        });
+      }
+    }
+  }
+
+  const userDataRef = useRef(state.user.data);
+  useEffect(() => {
+    // Don't update the user data in the API server if the email is unknown or the data hasn't changed
+    if (
+      (!state.user.data?.email && !state.user.data.phone_number) ||
+      isEqual(userDataRef.current, state.user.data)
+    ) {
+      return;
+    }
+    saveUserDataDebounced();
+    userDataRef.current = state.user.data;
+  }, [dispatch, saveUserDataDebounced, state.user.data]);
+
+  return null;
+}