pocketbase-react 0.1.7 → 0.1.9

package/src/context/Pocketbase.tsx

@@ -1,40 +1,35 @@
 import * as React from 'react';
 import { createContext, useEffect } from 'react';
-import PocketBase from 'pocketbase';
+import PocketBase from '@tobicrain/pocketbase';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import * as store from '../store/store';
 import { ClientProvider } from './client';
 import { ContentProvider } from './content';
+import { AuthProvider } from './auth';
 
 export const PocketbaseContext = createContext<PocketBase | null>(null);
 
 export type PocketbaseProviderProps = {
   children: React.ReactNode;
   serverURL: string;
-  credentials: {
-    username: string;
-    password: string;
-  };
+  redirectURL: string;
+  openURL: (url: string) => Promise<void>;
   initialCollections?: string[];
 };
 
 export const Pocketbase = (props: PocketbaseProviderProps) => {
-  const [client, setClient] = React.useState<PocketBase | null>(null);
-  useEffect(() => {
-    const client = new PocketBase(props.serverURL);
-    client.admins.authViaEmail(props.credentials.username, props.credentials.password).then(() => {
-      setClient(client);
-    });
-  }, [props.serverURL]);
+  const client = new PocketBase(props.serverURL);
 
   return client ? (
     <ClientProvider client={client}>
       <Provider store={store.store}>
         <PersistGate persistor={store.persistor}>
-          <ContentProvider collections={props.initialCollections}>
-            {props.children}
-          </ContentProvider>
+          <AuthProvider redirectUrl={props.redirectURL} openURL={props.openURL} >
+            <ContentProvider collections={props.initialCollections}>
+              {props.children}
+            </ContentProvider>
+          </AuthProvider>
         </PersistGate>
       </Provider>
     </ClientProvider>

package/src/context/auth.tsx

@@ -0,0 +1,113 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as React from 'react';
+import { createContext, useEffect } from 'react';
+import { useClientContext } from '../hooks/useClientContext';
+import { StorageService } from '../service/Storage';
+
+export type AuthProviderInfo = {
+  name: string;
+  state: string;
+  codeVerifier: string;
+  codeChallenge: string;
+  codeChallengeMethod: string;
+  authUrl: string;
+};
+
+export type RegisterWithEmailType = (email: string, password: string) => Promise<void>;
+export type SignInWithEmailType = (email: string, password: string) => Promise<void>;
+export type SignInWithProviderType = (provider: string) => Promise<void>;
+export type SubmitProviderResultType = (url: string) => Promise<void>;
+export type SignOutType = () => void;
+export type SendPasswordResetEmailType = (email: string) => Promise<void>;
+export type SendEmailVerificationType = (email: string) => Promise<void>;
+export type UpdateProfileType = (id: string, record: {}) => Promise<void>;
+export type UpdateEmailType = (email: string) => Promise<void>;
+export type DeleteUserType = (id: string) => Promise<void>;
+
+export interface AuthActions {
+  registerWithEmail: RegisterWithEmailType
+  signInWithEmail: SignInWithEmailType;
+  signInWithProvider: SignInWithProviderType;
+  submitProviderResult: SubmitProviderResultType;
+  signOut: SignOutType;
+  sendPasswordResetEmail: SendPasswordResetEmailType;
+  sendEmailVerification: SendEmailVerificationType;
+  updateProfile: UpdateProfileType;
+  updateEmail: UpdateEmailType;
+  deleteUser: DeleteUserType;
+}
+
+export const AuthContext = createContext<AuthActions | null>(null);
+
+export type AuthProviderProps = {
+  children: React.ReactNode;
+  redirectUrl: string;
+  openURL: (url: string) => Promise<void>;
+};
+
+
+export const AuthProvider = (props: AuthProviderProps) => {
+  const client = useClientContext();
+  const [authProviders, setAuthProviders] = React.useState<AuthProviderInfo[]>();
+  
+  const actions: AuthActions = {
+    registerWithEmail: async (email, password) => {
+      await client?.users.create({
+        email: email,
+        password: password,
+        passwordConfirm: password,
+      });
+    },
+    signInWithEmail: async (email: string, password: string) => {
+      await client?.users.authViaEmail(email, password);
+    },
+    signInWithProvider: async (provider: string) => {
+      const authProvider = authProviders?.find((p) => p.name === provider);
+      const url = authProvider?.authUrl + props.redirectUrl;
+      await props.openURL(url);
+      await StorageService.set('provider', JSON.stringify(authProviders));
+    },
+    submitProviderResult: async (url: string) => {
+      const params = new URLSearchParams(url.split('?')[1]);
+      const code = params.get('code');
+      const state = params.get('state');
+      const providersString = await StorageService.get('provider');
+      if (providersString) {
+        const providers = JSON.parse(providersString) as AuthProviderInfo[];
+        const authProvider = providers?.find((p) => p.state === state);
+        if (authProvider && code) {
+          await client?.users.authViaOAuth2(authProvider.name, code, authProvider.codeVerifier, props.redirectUrl);
+        }
+      }
+    },
+    signOut: () => {
+      client?.authStore.clear();
+    },
+    sendPasswordResetEmail: async (email: string) => {
+      await client?.users.requestPasswordReset(email);
+    },
+    sendEmailVerification: async (email: string) => {
+      await client?.users.requestVerification(email);
+    },
+    updateProfile: async (id: string, record: {}) => {
+      await client?.records.update('profiles', id, record);
+    },
+    updateEmail: async (email: string) => {
+      await client?.users.requestEmailChange(email);
+    },
+    deleteUser: async (id: string) => {
+      await client?.users.delete(id)
+    }
+  };
+
+  React.useEffect(() => {
+    (async () => {
+      const methods = await client?.users.listAuthMethods();
+      setAuthProviders(methods?.authProviders);
+    })();
+  }, [props.redirectUrl]);
+
+  return (
+    <AuthContext.Provider value={actions}>{props.children}</AuthContext.Provider>
+  );
+};

package/src/context/client.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createContext } from 'react';
-import PocketBase from 'pocketbase';
+import PocketBase from '@tobicrain/pocketbase';
 
 export const ClientContext = createContext<PocketBase | null>(null);
 

package/src/context/content.tsx

@@ -40,7 +40,6 @@ export const ContentProvider = (props: ContentProviderProps) => {
 
   const actions: ContentActions = {
     subscribe: async (collectionName: string) => {
-      // save local that collectionName should be subscribed
       await client?.realtime.subscribe(collectionName, (event: MessageData) => {
         switch (event.action) {
           case 'create':
@@ -55,27 +54,27 @@ export const ContentProvider = (props: ContentProviderProps) => {
           default:
             break;
         }
-      });
+      }).catch((_error) => {});
     },
     unsubscribe: (collectionName?: string) => {
       if (collectionName) {
-        client?.realtime.unsubscribe(collectionName);
+        client?.realtime.unsubscribe(collectionName).catch((_error) => {});;
       } else {
-        client?.realtime.unsubscribe();
+        client?.realtime.unsubscribe().catch((_error) => {});;
       }
     },
     fetch: async (collectionName: string) => {
-      const records = await client?.records.getFullList(collectionName, 200);
+      const records = await client?.records.getFullList(collectionName, 200).catch((_error) => {});
       dispatch(recordsAction.setRecords(collectionName, records as Record[]));
     },
     create: async (collectionName: string, record: {}) => {
-      await client?.records.create(collectionName, record);
+      await client?.records.create(collectionName, record).catch((_error) => {});
     },
     update: async (collectionName: string, recordId: string, record: {}) => {
-      await client?.records.update(collectionName, recordId, record);
+      await client?.records.update(collectionName, recordId, record).catch((_error) => {});
     },
     delete: async (collectionName: string, recordId: string) => {
-      await client?.records.delete(collectionName, recordId);
+      await client?.records.delete(collectionName, recordId).catch((_error) => {});
     },
   };
 

package/src/context/index.ts

@@ -1,3 +1,4 @@
 export * from './content';
 export * from './client';
-export * from './Pocketbase';
+export * from './auth';
+export * from './Pocketbase';

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useAppContent';
-export * from './useClientContext';
+export * from './useClientContext';
+export * from './useAuth';

package/src/hooks/useAuth.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { AuthActions, AuthContext } from '../context/auth';
+
+export function useAuth(): { actions: AuthActions | null } {
+  const actions = useContext(AuthContext);
+  return { actions };
+}

package/src/service/Authentication.ts

@@ -0,0 +1,50 @@
+import PocketBase from "@tobicrain/pocketbase";
+
+export class AuthenticationService {
+  private client: PocketBase;
+  public redirect_url: string;
+  
+  constructor(client: PocketBase) {
+    this.client = client;
+    this.redirect_url = '';
+  }
+
+  async getListAuthMethods() {
+    return await this.client.users.listAuthMethods();
+  }
+
+  async getDataAuth() {
+    await this.client.users.authViaOAuth2(
+      'google',
+      'CODE',
+      'VERIFIER',
+      'REDIRECT_URL'
+    );
+  }
+  async AuthWithOauth(provider: string, code: string, verifier: string) {
+    await this.client.users.authViaOAuth2(
+      provider,
+      code,
+      verifier,
+      this.redirect_url
+    );
+  }
+
+  async AuthWithEmail(email: string, password: string){
+    await this.client.users.authViaEmail(email, password);
+  }
+
+  async RegisterWithEmail(email: string, password: string){
+    await this.client.users.create({
+      email: email,
+      password: password,
+      passwordConfirm: password,
+  });
+  }
+
+  async getUserData(id:string, token:string) {
+    const headers = new Headers()
+    headers.append("Authorization","user "+token)
+    return await this.client.users.getOne(id)
+  }
+}

package/src/service/Storage.ts

@@ -0,0 +1,23 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export class StorageService {
+    static async get(key: string): Promise<string | null> {
+        return typeof document !== 'undefined' ? localStorage.getItem(key) : await AsyncStorage.getItem(key);
+    }
+
+    static async set(key: string, value: string): Promise<void> {
+        if (typeof document !== 'undefined') {
+            return localStorage.setItem(key, value);
+        } else {
+            return await AsyncStorage.setItem(key, value);
+        }
+    }
+
+    static async remove(key: string): Promise<void> {
+        if (typeof document !== 'undefined') {
+            return localStorage.removeItem(key);
+        } else {
+            return await AsyncStorage.removeItem(key);
+        }
+    }
+}

package/src/store/store.tsx

@@ -5,6 +5,7 @@ import { appReducer } from './reducers';
 import thunk from 'redux-thunk';
 import { RecordAction } from './reducers/records';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { StorageService } from '../service/Storage';
 
 interface Storage {
   getItem(key: string, ...args: Array<any>): any;
@@ -14,29 +15,14 @@ interface Storage {
 
 
 const CustomStorage: Storage = {
-  getItem: async (_key: string, ..._args: Array<any>) => {
-    if (typeof document !== 'undefined') {
-      return localStorage.getItem(_key);
-    }
-    else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-      return await AsyncStorage.getItem(_key);
-    }
+  getItem: async (key: string, ..._args: Array<any>) => {
+    return await StorageService.get(key);
   },
-  setItem: async (_key: string, _value: any, ..._args: Array<any>) => {
-    if (typeof document !== 'undefined') {
-      return localStorage.setItem(_key, _value);
-    }
-    else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-      return await AsyncStorage.setItem(_key, _value);
-    }
+  setItem: async (key: string, value: any, ..._args: Array<any>) => {
+    return StorageService.set(key, value);
   },
-  removeItem: async (_key: string, ..._args: Array<any>) => {
-    if (typeof document !== 'undefined') {
-      return localStorage.removeItem(_key);
-    }
-    else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
-      return await AsyncStorage.removeItem(_key);
-    }
+  removeItem: async (key: string, ..._args: Array<any>) => {
+    return StorageService.remove(key);
   },
 };