@rownd/react-native 0.1.1

package/src/data/actions.ts

@@ -0,0 +1,21 @@
+export enum ActionType {
+  SET_CONTAINER_VISIBLE = 'SET_CONTAINER_VISIBLE',
+  CHANGE_ROUTE = 'CHANGE_ROUTE',
+  LOGIN_SUCCESS = 'LOGIN_SUCCESS',
+  LOAD_USER = 'LOAD_USER',
+  REFRESH_TOKEN = 'REFRESH_TOKEN',
+  SIGN_OUT = 'SIGN_OUT',
+  UPDATE_LOCAL_ACLS = 'UPDATE_LOCAL_ACLS',
+  SET_USER_DATA_FIELD = 'SET_USER_DATA_FIELD',
+  SET_USER_DATA = 'SET_USER_DATA',
+  SET_REFRESH_USER_DATA = 'SET_REFRESH_USER_DATA',
+  LOAD_STATE = 'LOAD_STATE',
+  SET_SECTION = 'SET_SECTION',
+  SET_IS_SAVING_USER_DATA = 'SET_IS_SAVING_USER_DATA',
+  SET_APP_CONFIG = 'SET_APP_CONFIG',
+}
+
+export type TAction = {
+  type: ActionType;
+  payload?: any;
+};

package/src/hooks/api.ts

@@ -0,0 +1,163 @@
+import ky from 'ky';
+import jwt_decode, { JwtPayload } from 'jwt-decode';
+import path from 'path';
+
+import { useGlobalContext, GlobalState } from '../components/GlobalContext';
+import AutoQueue from '../utils/queue';
+import { useRef, useEffect } from 'react';
+import { Platform } from 'react-native';
+import { ActionType } from '../data/actions';
+
+const packageJson = require(path.join(__dirname, '../../package.json'));
+
+type RefreshTokenResp = {
+  access_token: string;
+  refresh_token: string;
+};
+
+const refreshQueue = new AutoQueue<RefreshTokenResp>();
+
+export const DEFAULT_USER_AGENT = `Rownd SDK for React Native/${packageJson.version} (Language: TypeScript/JavaScript; Platform=${Platform.OS};)`;
+
+export default function useApi() {
+  const { state, dispatch } = useGlobalContext();
+
+  const authRef = useRef({
+    access_token: state.auth.access_token,
+    refresh_token: state.auth.refresh_token,
+  });
+
+  useEffect(() => {
+    authRef.current = {
+      access_token: state.auth.access_token,
+      refresh_token: state.auth.refresh_token,
+    };
+  }, [state.auth.access_token, state.auth.refresh_token]);
+
+  function isNewAccessTokenNeeded(request?: Request) {
+    // stateCopy = stateCopy || state;
+    // Skip requests that don't need authentication
+    if (
+      (!!request && !request?.headers.get('authorization')) ||
+      !authRef.current?.access_token
+    ) {
+      return false;
+    }
+
+    const tokenPayload: JwtPayload = jwt_decode(authRef.current?.access_token);
+
+    // Shave 5 minutes off the token expiration to account for clock skew
+    const tokenExpiration = (tokenPayload.exp! - 5 * 60) * 1000;
+    if (tokenExpiration > Date.now()) {
+      return false; // shouldn't be expired
+    }
+
+    return true;
+  }
+
+  async function _newAccessTokenFromRefreshToken(
+    this: AutoQueue<RefreshTokenResp>,
+    stateCopy?: GlobalState
+  ) {
+    stateCopy = stateCopy || state;
+    if (this?._cache?.resp) {
+      // logger.log('using cached refresh response');
+      return this._cache.resp;
+    }
+
+    try {
+      // logger.log('requesting new refresh token');
+      const resp: RefreshTokenResp = await ky
+        .post(`${stateCopy.config?.apiUrl}/hub/auth/token`, {
+          json: {
+            refresh_token: stateCopy.auth?.refresh_token,
+          },
+        })
+        .json();
+
+      this._cache.resp = resp;
+
+      // Update local cache ref immediately to prevent stale auth checks
+      authRef.current = {
+        access_token: resp.access_token,
+        refresh_token: resp.refresh_token,
+      };
+
+      dispatch({
+        type: ActionType.REFRESH_TOKEN,
+        payload: resp,
+      });
+
+      return resp;
+    } catch (err) {
+      dispatch({
+        type: ActionType.SIGN_OUT,
+      });
+
+      throw err;
+    }
+  }
+
+  async function newAccessTokenFromRefreshToken(
+    stateCopy?: GlobalState
+  ): Promise<RefreshTokenResp> {
+    return await refreshQueue.enqueue(
+      _newAccessTokenFromRefreshToken.bind(refreshQueue, stateCopy)
+    );
+  }
+
+  const client = useRef(
+    ky.extend({
+      prefixUrl: state.config?.apiUrl,
+      headers: {
+        'Content-Type': 'application/json',
+        'User-Agent': DEFAULT_USER_AGENT,
+      },
+      retry: {
+        limit: 2,
+        statusCodes: [401, 408, 429, 500, 502, 503, 504],
+      },
+      hooks: {
+        beforeRequest: [
+          // Auto-refresh tokens
+          async (request) => {
+            // Skip requests that don't need authentication
+            if (!isNewAccessTokenNeeded(request)) {
+              return;
+            }
+
+            const tokenResp: RefreshTokenResp =
+              await newAccessTokenFromRefreshToken();
+
+            request.headers.set(
+              'Authorization',
+              `Bearer ${tokenResp.access_token}`
+            );
+          },
+        ],
+        beforeRetry: [
+          async ({ request /*, options, error, retryCount*/ }) => {
+            // Skip requests that don't need authentication
+            if (!isNewAccessTokenNeeded(request)) {
+              return;
+            }
+
+            const tokenResp: RefreshTokenResp =
+              await newAccessTokenFromRefreshToken();
+
+            request.headers.set(
+              'Authorization',
+              `Bearer ${tokenResp.access_token}`
+            );
+          },
+        ],
+      },
+    })
+  ).current;
+
+  return {
+    client,
+    newAccessTokenFromRefreshToken,
+    isNewAccessTokenNeeded,
+  };
+}

package/src/hooks/debounce.ts

@@ -0,0 +1,36 @@
+import { debounce } from 'debounce';
+import { useMemo, useEffect, useRef } from 'react';
+
+export default function useDebounce(cb: any, delay: any) {
+  const immediate = false;
+  const inputsRef = useRef(cb);
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    inputsRef.current = { cb, delay };
+  });
+
+  return useMemo(
+    () =>
+      debounce(
+        (...args: any) => {
+          // Don't execute callback, if (1) component in the meanwhile
+          // has been unmounted or (2) delay has changed
+          if (inputsRef.current.delay === delay && isMounted())
+            inputsRef.current.cb(...args);
+        },
+        delay,
+        immediate
+      ),
+    [delay, immediate, isMounted]
+  );
+}
+
+function useIsMounted() {
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  return () => isMountedRef.current;
+}

package/src/hooks/fingerprint.ts

@@ -0,0 +1,217 @@
+import DeviceInfo from 'react-native-device-info';
+import { useEffect, useCallback } from 'react';
+import useApi from './api';
+import { useGlobalContext } from '../components/GlobalContext';
+import storage from '../utils/storage';
+import { sha256 } from 'react-native-sha256';
+
+interface IFingerprint {
+  message: string;
+  hash: string;
+  challenge: string;
+}
+
+interface IChallenge {
+  key: string;
+  value: string;
+}
+
+let isFingerprintingInProgress = false;
+
+export default function () {
+  const { state } = useGlobalContext();
+  const { client: api } = useApi();
+
+  /**
+   * Computes hashes for all possible lookup fields values coupled with the app ID
+   * @param appId
+   * @param rawLookupValues
+   * @returns array of challenge hashes
+   */
+  async function computePossibleChallengeLookupValues(
+    appId: string,
+    rawLookupValues: string[]
+  ): Promise<string[]> {
+    const lookupHashes = [];
+    for (const value of rawLookupValues) {
+      lookupHashes.push(await sha256(`${appId}:${value}`));
+    }
+    return lookupHashes;
+  }
+
+  /**
+   * Looks for a challenge in storage based on presented lookup values
+   */
+  const getChallengeIfPresent = useCallback(
+    async (
+      appId: string | undefined,
+      challengeLookupValues: string[]
+    ): Promise<IChallenge | null> => {
+      if (!appId) {
+        return null;
+      }
+
+      const challenges: Record<string, string[]> = JSON.parse(
+        storage.getString('challenges') || '{}'
+      );
+
+      if (!Object.keys(challenges).length) {
+        return null;
+      }
+
+      let challengeKey = '';
+      let challengeValue = '';
+      for (const value of challengeLookupValues) {
+        const hash = await sha256(`${appId}:${value}`);
+        const challenge = Object.entries(challenges).find(([, hashes]) =>
+          hashes.includes(hash)
+        );
+
+        if (challenge) {
+          challengeKey = hash;
+          challengeValue = challenge[0];
+          break;
+        }
+      }
+
+      if (!challengeKey || !challengeValue) {
+        return null;
+      }
+
+      return {
+        key: challengeKey,
+        value: challengeValue,
+      };
+    },
+    []
+  );
+
+  const getFingerprint = useCallback(async () => {
+    const visitorId = DeviceInfo.getDeviceId();
+
+    return {
+      visitorId,
+    };
+  }, []);
+
+  const registerFingerprint = useCallback(async () => {
+    if (
+      !state.auth.access_token ||
+      !state.auth.is_verified_user ||
+      !state.app.id ||
+      isFingerprintingInProgress
+    ) {
+      return;
+    }
+
+    isFingerprintingInProgress = true;
+
+    try {
+      // Check for existing challenge
+      const challengeEntry = await getChallengeIfPresent(
+        state.app.id,
+        [state.user?.data?.email, state.user?.data?.phone_number].filter(
+          Boolean
+        )
+      );
+
+      const fingerprint = await getFingerprint();
+      const payload: IFingerprint = await api
+        .post('hub/auth/fingerprints', {
+          headers: {
+            Authorization: `Bearer ${state.auth.access_token}`,
+          },
+          json: {
+            hash: fingerprint.visitorId,
+            challenge: challengeEntry?.value || null, // Might exist from a previous run, in which case this request will be a no-op
+          },
+        })
+        .json();
+
+      if (payload.challenge === challengeEntry?.key) {
+        // This is a no-op
+        console.debug('Fingerprint already registered');
+        return;
+      }
+
+      // Save the challenge for future sign-ins if we don't have one already or we got a new one from the server
+      const challengeLookupHashes = await computePossibleChallengeLookupValues(
+        state.app.id,
+        [state.user?.data?.email, state.user?.data?.phone_number].filter(
+          Boolean
+        )
+      );
+      if (payload.challenge && challengeLookupHashes.length > 0) {
+        const challenges = JSON.parse(storage.getString('challenges') || '{}');
+        storage.set(
+          'challenges',
+          JSON.stringify({
+            ...challenges,
+            [payload.challenge]: challengeLookupHashes,
+          })
+        );
+      }
+    } catch (err) {
+      console.warn('Failed to register fingerprint', err);
+    } finally {
+      isFingerprintingInProgress = false;
+    }
+  }, [
+    api,
+    state.app.id,
+    state.auth.access_token,
+    state.auth.is_verified_user,
+    state.user?.data?.email,
+    state.user?.data?.phone_number,
+    getChallengeIfPresent,
+    getFingerprint,
+  ]);
+
+  const clearFingerprint = useCallback((challenge: string) => {
+    const challenges: Record<string, string[]> = JSON.parse(
+      storage.getString('challenges') || '{}'
+    );
+    delete challenges[challenge];
+    storage.set('challenges', JSON.stringify(challenges));
+  }, []);
+
+  useEffect(() => {
+    if (!state.auth.access_token) {
+      return;
+    }
+
+    (async () => {
+      // If already fingerprinted, don't try again
+      const existingChallenge = await getChallengeIfPresent(
+        state.app.id,
+        [state.user?.data?.email, state.user?.data?.phone_number].filter(
+          Boolean
+        )
+      );
+
+      // Don't need to re-register a fingerprint if we already have one registered
+      if (existingChallenge) {
+        console.debug(
+          'Found existing challenge, so not requesting fingerprint registration.'
+        );
+        return;
+      }
+
+      // We have an access token, so we can use it to get the fingerprint
+      registerFingerprint();
+    })();
+  }, [
+    getChallengeIfPresent,
+    registerFingerprint,
+    state.app.id,
+    state.auth.access_token,
+    state.user?.data?.email,
+    state.user?.data?.phone_number,
+  ]);
+
+  return {
+    getFingerprint,
+    getChallengeIfPresent,
+    clearFingerprint,
+  };
+}

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+import useApi from './api';
+import useDebounce from './debounce';
+import useInterval from './interval';
+import useNav from './nav';
+import useDeviceFingerprint from './fingerprint';
+
+export { useApi, useDebounce, useInterval, useNav, useDeviceFingerprint };

package/src/hooks/interval.ts

@@ -0,0 +1,25 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+
+function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+  useLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return;
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+}
+
+export default useInterval;

package/src/hooks/nav.tsx

@@ -0,0 +1,29 @@
+import { useGlobalContext } from '../components/GlobalContext';
+import { ActionType } from '../data/actions';
+
+interface INavOpts {
+  route?: string;
+  hide?: boolean;
+}
+
+export default function useNav() {
+  const { dispatch } = useGlobalContext();
+
+  return ({ route, hide }: INavOpts) => {
+    if (hide) {
+      dispatch({
+        type: ActionType.SET_CONTAINER_VISIBLE,
+        payload: {
+          isVisible: false,
+        },
+      });
+    } else if (route) {
+      dispatch({
+        type: ActionType.CHANGE_ROUTE,
+        payload: {
+          current_route: route,
+        },
+      });
+    }
+  };
+}

package/src/hooks/rownd.ts

@@ -0,0 +1,184 @@
+import { useGlobalContext } from '../components/GlobalContext';
+import { ActionType } from '../data/actions';
+import useApi from './api';
+import { events, EventType } from '../utils/events';
+
+export type TRowndContext = {
+  requestSignIn: (opts?: RequestSignInOpts) => void;
+  signOut: () => void;
+  getAccessToken: (opts?: GetAccessTokenOpts) => Promise<string | null>;
+  is_authenticated: boolean;
+  is_initializing: boolean;
+  access_token: string | null;
+  auth: AuthContext;
+  user: UserContext;
+};
+
+type AuthContext = {
+  access_token: string | null;
+  app_id: string | null;
+  is_verified_user?: boolean;
+};
+
+type UserContext = {
+  data: {
+    id?: string;
+    email?: string | null;
+    phone?: string | null;
+    [key: string]: any;
+  };
+  redacted_fields: string[];
+  set: (data: Record<string, any>) => Promise<Record<string, any>>;
+  setValue: (key: string, value: any) => Promise<Record<string, any>>;
+};
+
+type RequestSignInOpts = {
+  identifier?: string;
+  auto_sign_in?: boolean;
+  init_data?: Record<string, any>;
+  post_login_redirect?: string;
+};
+
+type GetAccessTokenOpts = {
+  waitForToken?: boolean;
+};
+
+// const RowndContext = createContext<TRowndContext | null>(null);
+
+export function useRownd(): TRowndContext {
+  const { state, dispatch } = useGlobalContext();
+  const { isNewAccessTokenNeeded, newAccessTokenFromRefreshToken } = useApi();
+
+  const stateCopy = JSON.parse(JSON.stringify(state));
+
+  const requestSignIn = (opts?: RequestSignInOpts): void => {
+    dispatch({
+      type: ActionType.CHANGE_ROUTE,
+      payload: {
+        route: '/account/login',
+        options: opts,
+      },
+    });
+  };
+
+  const signOut = () => {
+    dispatch({
+      type: ActionType.SIGN_OUT,
+    });
+  };
+
+  const getAccessToken = async (
+    opts?: GetAccessTokenOpts
+  ): Promise<string | null> => {
+    const { waitForToken } = opts || {};
+    let accessToken = state?.auth.access_token;
+
+    // Wait for an access token to be available if none exists yet
+    if (!accessToken && waitForToken) {
+      return new Promise((resolve, _reject) => {
+        console.debug('auth_wait: waiting for access token');
+        const listener = (evt: any) => {
+          console.debug('auth_wait: received access token');
+          const data = evt.detail;
+          resolve(data.access_token);
+        };
+
+        events.addEventListener(EventType.AUTH, listener, { once: true });
+      });
+    }
+
+    if (isNewAccessTokenNeeded(undefined)) {
+      const resp = await newAccessTokenFromRefreshToken(stateCopy);
+      accessToken = resp.access_token;
+    }
+
+    return accessToken;
+  };
+
+  const setUserData = (
+    data: Record<string, any>
+  ): Promise<Record<string, any>> => {
+    return new Promise((resolve, reject) => {
+      console.debug('user_data_save_wait: waiting for data to be saved');
+      const listener = (evt: any) => {
+        console.debug('user_data_save_wait: received data saved event');
+        if (evt.error) {
+          return reject(evt.error);
+        }
+
+        resolve(evt.data);
+      };
+
+      events.addEventListener(EventType.USER_DATA_SAVED, listener, {
+        once: true,
+      });
+
+      dispatch({
+        type: ActionType.SET_USER_DATA,
+        payload: {
+          data,
+        },
+      });
+    });
+  };
+
+  const setUserDataValue = (
+    key: string,
+    value: any
+  ): Promise<Record<string, any>> => {
+    return new Promise((resolve, reject) => {
+      console.debug('user_data_save_wait: waiting for data to be saved');
+      const listener = (evt: any) => {
+        console.debug('user_data_save_wait: received data saved event');
+        if (evt.error) {
+          return reject(evt.error);
+        }
+
+        resolve(evt.data);
+      };
+
+      events.addEventListener(EventType.USER_DATA_SAVED, listener, {
+        once: true,
+      });
+
+      dispatch({
+        type: ActionType.SET_USER_DATA_FIELD,
+        payload: {
+          field: key,
+          value,
+        },
+      });
+
+      if (value) {
+        return;
+      }
+
+      const valueAcl = {
+        [key]: {
+          shared: true,
+        },
+      };
+
+      dispatch({
+        type: ActionType.UPDATE_LOCAL_ACLS,
+        payload: valueAcl,
+      });
+    });
+  };
+
+  return {
+    requestSignIn,
+    signOut,
+    getAccessToken,
+    is_authenticated: !!state.auth.access_token,
+    is_initializing: !!state.app.id,
+    access_token: state.auth?.access_token,
+    auth: state.auth,
+    user: {
+      data: state.user?.data,
+      redacted_fields: state.user?.redacted,
+      set: setUserData,
+      setValue: setUserDataValue,
+    },
+  };
+}

package/src/index.tsx

@@ -0,0 +1,6 @@
+// import { requestSignIn } from './components/SignIn';
+import { RowndProvider } from './components/RowndProvider';
+import { useRownd } from './hooks/rownd';
+import AuthenticatedComponent from './components/AuthenticatedComponent';
+
+export { RowndProvider, useRownd, AuthenticatedComponent };