Using ReactFire with Ionic Framework & Capacitor

🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆

Sample project motivated by video by David East on Reactfire

You should know that Reactfire is not considered "Production"

Overview

• This project has been tested for use on mobile devices using Capacitor on IOS and Android
• In this project I use Reactfire, Ionic Framework ReactJS Components and React-Hook-Form.
• Currently there is only Login and Listing The Data Collection
• We use the <AuthCheck/> component for cleaner routing when not logged in, See App.tsx
• Will be adding create user, add items and delete items

Required

you must create a file called src/env.js and add the following code

export const FIREBASE_CONFIG = {
// YOUR FIREBASE CONFIGURATION
};

// NAME OF COLLECTION IN FIREBASE TO LIST
export const FIREBASE_COLLECTION_NAME = "users"

// THIS IS REQUIRED FOR ANDROID
// SEE - https://github.com/FirebaseExtended/reactfire/issues/228
global.globalThis = window;

Code Snippets

Checking Authentication Status At Startup

Here is the app it is much cleaner to check auth status and redirect the user appropriately, all of the listening for authChangeStatus and such is all gone...

If the authCheck fails, then we use the Login component.

const App: React.FunctionComponent = () => {
  return (
    <FirebaseAppProvider firebaseConfig={FIREBASE_CONFIG}>
      <IonApp>
        <IonReactRouter>
          <IonRouterOutlet>
            <Suspense fallback={<IonLoading isOpen={true} />}>
              <AuthCheck fallback={<Login />}>
                <Home />
              </AuthCheck>
            </Suspense>
          </IonRouterOutlet>
        </IonReactRouter>
      </IonApp>
    </FirebaseAppProvider>
  );
};

Logging The User In

This is a 'hack' that is currently needed to address issues with clearing information between authenticated sessions. As stated above, this is not production ready code.

This code was pulled from the issue in github where a work around was presented.

I found that this work around did not work on the android browser because the globalThis object was undefined. To resolve this issue, I set globalThis to window in the env.js file.

export const FIREBASE_CONFIG = {
// YOUR FIREBASE CONFIGURATION
};

// NAME OF COLLECTION IN FIREBASE TO LIST
export const FIREBASE_COLLECTION_NAME = "users"

// THIS IS REQUIRED FOR ANDROID
// SEE - https://github.com/FirebaseExtended/reactfire/issues/228
global.globalThis = window;

  // SEE - https://github.com/FirebaseExtended/reactfire/issues/228
  useEffect(() => {
    let map = (globalThis as any)["_reactFirePreloadedObservables"];
    map &&
      Array.from(map.keys()).forEach(
        (key: any) => key.includes("firestore") && map.delete(key)
      );
  }, []);

Here we use the useAuth hook to get the auth object to call the signInWithEmailAndPassword method

  const auth = useAuth();
  /**
   * get data from form and sign the user in
   */
  const signIn = async (data: any) => {
    try {
      let r = await auth.signInWithEmailAndPassword(data.email, data.password);
      console.log(r);
    } catch (e) {
      setShowErrorAlert(e.message);
    }
  };

Rendering A Collection from the Database

• use the useAuth hook to get auth object for logging the user out.
• use the useFirebaseApp hook to get firebaseApp collection
• use the useFirestoreCollectionData to get the data collection to render.

const Home: React.FunctionComponent = () => {
  const auth = useAuth();
  const thingsRef = useFirebaseApp()
    .firestore()
    .collection(FIREBASE_COLLECTION_NAME);
  const data = useFirestoreCollectionData(thingsRef, { idField: "id" });

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="light">
          <IonButtons slot="end">
            <IonButton onClick={() => auth.signOut()}>Logout</IonButton>
          </IonButtons>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <AuthCheck fallback={<IonLoading isOpen={true} />}>
          <IonList>
            {data.map((e: any) => {
              return (
                <IonItem key={e.id}>
                  <IonLabel className="ion-text-wrap">
                    {JSON.stringify(e)}
                  </IonLabel>
                </IonItem>
              );
            })}
          </IonList>
        </AuthCheck>
      </IonContent>
    </IonPage>
  );
};

Whats Next

• Add Items Using Ionic Modal
• Delete Items using IonSlidingItem
• Create Account

Source Code

aaronksaunders / ionic-react-hook-form-react-fire

ionic-react-hook-form-react-fire

Last Updated 8/16/2020

Releases and tags coincide with specific blog posts in the series See Blog Series

• Part One - releases/tag/v1.0
• Part Two - releases/tag/v1.2
• Part Three - releases/tag/v1.3
• Part Four - releases/tag/v1.4

Sample project motivated by video by David East on Reactfire

• You should know that Reactfire is not considered "Production"
• This project has been tested for use on mobile devices using Capacitor on IOS and Android
• In this project I use Reactfire, Ionic Framework ReactJS Components and React-Hook-Form.
• We use the <AuthCheck/> component for cleaner routing when not logged in, See App.tsx
• Currently there is only Login and Listing The Data Collection
• Will be adding delete items

Saves The Following Data Structure

I am starting to integrated typescript into my examples since I am seeing questions about types popping up in the forums. The IModalData is the structure of the data that is written to…

View on GitHub

See Other Work On My YouTube Channel

• https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg