๐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
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โฆ
Top comments (0)