@supertokens/rownd-react-native 0.1.0

package/src/components/GlobalContext.types.ts

@@ -0,0 +1,109 @@
+import type { TAction } from '../constants/action';
+import type { Customizations, IConfig } from '../utils/config';
+
+export type ContextProps = {
+  config: IConfig;
+  customizations?: Customizations;
+  children?: React.ReactNode;
+};
+
+export type Dispatch = (action: TAction) => void;
+
+export type GlobalState = {
+  // is_initializing: boolean;
+  // is_container_visible: boolean;
+  // use_modal: boolean;
+  // nav: {
+  //   current_route: string;
+  //   route_trigger: string;
+  //   event_id: string;
+  //   section: string;
+  //   options?: any;
+  // };
+  user: {
+    data: {
+      id?: string;
+      email?: string | null;
+      [key: string]: any;
+    };
+    isLoading: boolean;
+    // needs_refresh?: boolean;
+    // redacted: string[];
+  };
+  auth: {
+    access_token: string | null;
+    refresh_token?: string | null;
+    app_id: string | null;
+    init_data?: Record<string, any>;
+    is_verified_user?: boolean;
+    auth_level?: string | null;
+  };
+  app: {
+    id?: string;
+    icon?: string;
+    icon_content_type?: string;
+    config: AppConfig | null;
+    schema: AppSchema | null;
+    user_verification_field?: string;
+    user_verification_fields?: string[];
+  };
+  // local_acls: Record<string, { shared: boolean }> | null;
+  // is_saving_user_data: boolean;
+  config?: IConfig;
+};
+
+type AppSchema = Record<string, SchemaField>;
+
+export interface SchemaField {
+  display_name: string;
+  type: string;
+  data_category: string;
+  required: boolean;
+  owned_by: string;
+  user_visible: boolean;
+  revoke_after: string;
+  required_retention: string;
+  collection_justification: string;
+  opt_out_warning: string;
+}
+
+export interface AppConfig {
+  customizations: {
+    primary_color: string;
+  };
+  default_user_id_format?: string;
+  hub: {
+    auth: {
+      allow_unverified_users?: boolean;
+      additional_fields: [
+        {
+          name: string;
+          type: string;
+          label: string;
+          placeholder?: string;
+          options: [
+            {
+              value: string;
+              label: string;
+            }
+          ];
+        }
+      ];
+      email: {
+        from_address: string;
+        image: string;
+      };
+      show_app_icon: boolean;
+    };
+    customizations: HubCustomizations;
+  };
+}
+
+export interface HubCustomizations {
+  rounded_corners: boolean;
+  primary_color: string;
+  placement: 'bottom-left' | 'hidden';
+  offset_x: number;
+  offset_y: number;
+  property_overrides: Record<string, string>;
+}

package/src/components/GlobalContext.web.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ContextProps } from './GlobalContext.types';
+import { RowndProvider as RowndReactProvider } from '@supertokens/rownd-react';
+
+const RowndProvider: React.FC<ContextProps> = ({ children, config }) => {
+  return (
+    <RowndReactProvider
+      appKey={config.appKey}
+      supertokens={config.supertokens}
+      hubUrlOverride={config.hubUrlOverride}
+    >
+      {children}
+    </RowndReactProvider>
+  );
+};
+
+export { RowndProvider };

package/src/components/RequireSignIn.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { useRownd } from '../hooks/rownd';
+import type { RequestSignIn } from '../types';
+import { Platform } from 'react-native';
+
+export type ContextProps = {
+  children?: React.ReactNode;
+  initializing?: React.ReactNode;
+  signInProps?: RequestSignIn;
+};
+
+const RequireSignIn: React.FC<ContextProps> = ({
+  children,
+  initializing,
+  signInProps,
+}) => {
+  const { is_authenticated, is_initializing, requestSignIn } = useRownd();
+
+  useEffect(() => {
+    if (!is_authenticated && !is_initializing) {
+      requestSignIn({
+        ...(Platform.OS === 'web' ? { prevent_closing: true } : undefined),
+        ...signInProps,
+      });
+    }
+  }, [is_authenticated, is_initializing, signInProps, requestSignIn]);
+
+  if (is_initializing && initializing) {
+    return <>{initializing}</>;
+  }
+
+  return <>{children}</>;
+};
+
+export default RequireSignIn;

package/src/components/SignedIn.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useRownd } from '../hooks/rownd';
+
+interface SignedInProps {
+  children: React.ReactNode;
+}
+
+const SignedIn: React.FC<SignedInProps> = ({ children }) => {
+  const { is_authenticated } = useRownd();
+
+  if (!is_authenticated) {
+    return null;
+  }
+  return <>{children}</>;
+};
+
+export default SignedIn;

package/src/components/SignedOut.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useRownd } from '../hooks/rownd';
+
+interface SignedOutProps {
+  children: React.ReactNode;
+}
+
+const SignedOut: React.FC<SignedOutProps> = ({ children }) => {
+  const { is_authenticated } = useRownd();
+
+  if (is_authenticated) {
+    return null;
+  }
+  return <>{children}</>;
+};
+
+export default SignedOut;

package/src/constants/action.ts

@@ -0,0 +1,8 @@
+export enum ActionType {
+  UPDATE_STATE = 'UPDATE_STATE',
+}
+
+export type TAction = {
+  type: ActionType;
+  payload?: any;
+};

package/src/hooks/rownd.ts

@@ -0,0 +1,68 @@
+import {
+  requestSignIn,
+  signOut,
+  manageAccount,
+  getAccessToken,
+  setUserDataValue,
+  setUserData,
+} from '../utils/nativeModule';
+import { useRowndContext } from '../components/GlobalContext';
+import type {
+  RequestSignIn,
+  RequestSignInMethods,
+  RequestSignInIntent,
+} from '../types';
+
+export type { RequestSignIn, RequestSignInMethods, RequestSignInIntent };
+
+export type TRowndContext = {
+  access_token: string | null;
+  auth: AuthContext;
+  is_authenticated: boolean;
+  is_initializing: boolean;
+  getAccessToken: () => Promise<string>;
+  manageAccount: () => void;
+  requestSignIn: (e?: RequestSignIn) => void;
+  signOut: () => void;
+  user: UserContext;
+};
+
+type UserContext = {
+  data: {
+    user_id?: string;
+    email?: string | null;
+    phone?: string | null;
+    [key: string]: any;
+  };
+  set: (data: Record<string, any>) => void;
+  setValue: (key: string, value: any) => void;
+  isLoading: boolean;
+};
+
+type AuthContext = {
+  access_token: string | null;
+  app_id: string | null;
+  is_verified_user?: boolean;
+  auth_level?: string | null;
+};
+
+export function useRownd(): TRowndContext {
+  const { state } = useRowndContext();
+
+  return {
+    access_token: state.auth.access_token,
+    auth: state.auth,
+    getAccessToken,
+    is_authenticated: !!state.auth.access_token,
+    is_initializing: !state.auth.app_id,
+    manageAccount,
+    requestSignIn,
+    signOut,
+    user: {
+      data: state.user.data,
+      setValue: setUserDataValue,
+      set: setUserData,
+      isLoading: state.user.isLoading,
+    },
+  };
+}

package/src/hooks/rownd.web.ts

@@ -0,0 +1,56 @@
+import { useRownd as useReactRownd } from '@supertokens/rownd-react';
+import type { TRowndContext } from './rownd';
+import type { RequestSignIn } from '../types';
+
+function toWebSignInOptions(opts?: RequestSignIn) {
+  if (!opts) {
+    return undefined;
+  }
+
+  const method = opts.method === 'guest' ? 'anonymous' : opts.method;
+
+  return {
+    ...opts,
+    method,
+    post_login_redirect: opts.postSignInRedirect,
+  };
+}
+
+export function useRownd(): TRowndContext {
+  const {
+    requestSignIn,
+    signOut,
+    getAccessToken,
+    is_authenticated,
+    is_initializing,
+    auth,
+    access_token,
+    user,
+    manageAccount,
+    setUser,
+    setUserValue,
+  } = useReactRownd() as any;
+
+  return {
+    access_token,
+    auth: {
+      access_token,
+      app_id: auth.app_id || null,
+      is_verified_user: auth.is_verified_user,
+      auth_level: auth.auth_level,
+    },
+    // @ts-ignore
+    getAccessToken,
+    is_authenticated,
+    is_initializing,
+    manageAccount,
+    requestSignIn: (opts) => requestSignIn(toWebSignInOptions(opts)),
+    signOut,
+    user: {
+      data: user.data,
+      setValue: setUserValue,
+      set: setUser,
+      isLoading: Boolean(user.isLoading ?? user.is_loading),
+    },
+  };
+}

package/src/index.tsx

@@ -0,0 +1,7 @@
+import { RowndProvider } from './components/GlobalContext';
+import { useRownd } from './hooks/rownd';
+import RequireSignIn from './components/RequireSignIn';
+import SignedIn from './components/SignedIn';
+import SignedOut from './components/SignedOut';
+
+export { RowndProvider, useRownd, RequireSignIn, SignedIn, SignedOut };

package/src/reducer/rowndReducer.ts

@@ -0,0 +1,63 @@
+import type { GlobalState } from '../components/GlobalContext.types';
+import { ActionType, TAction } from '../constants/action';
+
+export const initialRowndState: GlobalState = {
+  // is_initializing: false,
+  user: {
+    data: {
+      email: null,
+    },
+    isLoading: false,
+    // meta: {}
+  },
+  auth: {
+    access_token: null,
+    refresh_token: null,
+    app_id: null,
+  },
+  app: {
+    schema: null,
+    config: null,
+  },
+  // is_saving_user_data: false,
+  // config,
+};
+
+export function rowndReducer(state: GlobalState, action: TAction): GlobalState {
+  let newState: GlobalState;
+
+  switch (action.type) {
+    case ActionType.UPDATE_STATE:
+      const user = action.payload?.user || {};
+      const auth = action.payload?.auth || {};
+      const appConfig = action.payload?.appConfig || {};
+
+      newState = {
+        user: {
+          data: {
+            ...user.data,
+            email: user.data?.email,
+          },
+          isLoading: Boolean(user.isLoading ?? user.is_loading),
+          // meta: {}
+        },
+        auth: {
+          access_token: auth.access_token ?? null,
+          refresh_token: auth.refresh_token ?? null,
+          app_id: appConfig.id || auth.app_id || null,
+          is_verified_user: auth.is_verified_user,
+          auth_level: auth.auth_level ?? user.auth_level ?? null,
+        },
+        app: {
+          schema: appConfig.schema ?? null,
+          config: null,
+        },
+        // is_saving_user_data: false,
+        // config
+      };
+      return newState;
+    default:
+      newState = state;
+      return newState;
+  }
+}

package/src/types.ts

@@ -0,0 +1,32 @@
+export type SuperTokensConfig = {
+  appInfo: {
+    appName?: string;
+    apiDomain: string;
+    apiBasePath?: string;
+  };
+};
+
+export type RowndProviderConfig = {
+  appKey: string;
+  supertokens: SuperTokensConfig;
+  hubUrlOverride?: string;
+  deepLinkScheme?: string;
+};
+
+export type RequestSignInMethods =
+  | 'default'
+  | 'email'
+  | 'phone'
+  | 'google'
+  | 'apple'
+  | 'anonymous'
+  | 'guest';
+
+export type RequestSignInIntent = 'sign_in' | 'sign_up';
+
+export type RequestSignIn = {
+  method?: RequestSignInMethods;
+  postSignInRedirect?: string;
+  intent?: RequestSignInIntent;
+  prevent_closing?: boolean;
+};

package/src/utils/config.ts

@@ -0,0 +1,9 @@
+import type { RowndProviderConfig } from '../types';
+
+export type IConfig = RowndProviderConfig;
+
+export interface Customizations {
+  sheetBackgroundHexColor?: string;
+  sheetCornerBorderRadius?: string;
+  loadingAnimation?: string;
+}

package/src/utils/nativeModule.ts

@@ -0,0 +1,83 @@
+import { NativeModules, Platform } from 'react-native';
+import type { RequestSignIn } from '../types';
+import type { Customizations, IConfig } from './config';
+
+export const LINKING_ERROR =
+  `The package '@supertokens/rownd-react-native' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+export const Rownd = NativeModules.RowndPlugin
+  ? NativeModules.RowndPlugin
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+export const IOSRowndEventEmitter =
+  Platform.OS !== 'ios'
+    ? null
+    : NativeModules.RowndPluginEventEmitter
+    ? NativeModules.RowndPluginEventEmitter
+    : new Proxy(
+        {},
+        {
+          get() {
+            throw new Error(LINKING_ERROR);
+          },
+        }
+      );
+
+export function configure(config: IConfig): Promise<string> {
+  return Rownd.configure(config);
+}
+
+export function customizations(customizationConfig: Customizations) {
+  return Rownd.customizations(customizationConfig);
+}
+
+export function requestSignIn(config?: RequestSignIn) {
+  const method = config?.method === 'guest' ? 'anonymous' : config?.method;
+
+  if (!config) {
+    return Rownd.requestSignIn({ method: 'default' });
+  }
+
+  return Rownd.requestSignIn({
+    method: method || 'default',
+    postSignInRedirect: config?.postSignInRedirect,
+    intent: config?.intent,
+  });
+}
+
+export function signOut() {
+  return Rownd.signOut();
+}
+
+export function manageAccount() {
+  return Rownd.manageAccount();
+}
+
+export function getAccessToken(): Promise<string> {
+  return Rownd.getAccessToken();
+}
+
+export function setUserDataValue(key: string, value: any) {
+  return Rownd.setUserDataValue(
+    key,
+    Platform.OS === 'android' ? { value } : value
+  );
+}
+
+export function setUserData(data: Record<string, any>) {
+  return Rownd.setUserData(data);
+}
+
+export function handleSignInLink(url: string) {
+  return Rownd.handleSignInLink(url);
+}