This library was created to facilitate repetitive functions in Firebase projects, easy-firebase-react makes it easy for us to manage users, Firestore database and upload files to storage.
This library comes equipped with ready-to-use classes and methods, and if you're using react, there are some custom hooks available.
- Before Start
- Installation
- Project Settings
- Usage
- Manage Errros
- Firebase Authentication
- Firebase Firestore
- Firebase Storage
-
Before starting I would like to mention that the examples I use are with async functions but you can use promises without problems, except for the functions that receive callbacks, those are already promises.
-
the documentation is somewhat incomplete but there are already several functions ready to use
npm install easy-firebase-react
- You dont need install firebase! becouse is a dependency of this library
create a config file like this.. and only need set your credentials.
import {
initEasyFirebase,
Authentication,
Firestore,
Storage,
} from "easy-firebase-react";
//your credentials app
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
};
//pass your credentials to EasyFirebase and this return your app instance
const app = initEasyFirebase(firebaseConfig);
//create new instance of classes
const auth = new Authentication(app);
const firestore = new Firestore(app);
const storage = new Storage(app);
//export your instances
export { auth, firestore, storage };
- import the instances created in your configuration
import { auth, firestore, storage } from 'YOUR_CONFIG_FILE'
- use the functions avalibles with async/await...
const res = await firestore.addDoc("products", {
name: "tv smart 3",
price: 500,
});
//Manage Errors
if (res.error) {
console.log(`error adding doc: ${res.message}`);
} else {
console.log("doc added: ", res.data);
}
- all functions of this library return firebase errors or custom errors
- for better information you can log the response to the console
const res = await auth.loginGithub();
//manage errors
if (res.error) return alert(res.message);
if (!res.error) return alert(res.message);
console.log(res);
createAccount(
email: string,
password: string,
name?: string
);
loginAccount(email: string, password: string);
loginGoogle();
loginGithub();
loginFacebook();
loginTwitter();
updatePass(
password: string,
newPassword: string,
callback?: Function
);
UpdateProfile(data: IUpdateProfile, callback?: Function);
reAuthUser(password: string, callBack: Function);
sendVerification(callback?: Function);
sendResetPassword(email: string, callback: Function);
deleteAccount(password: string, callback: Function);
updateEmail(
password: string,
newEmail: string,
callback?: Function
);
closeSession(callback?: Function);
-
Remenber activate the email auth options in your firebase console
-
make async function like this.. (if you want, you can use promises)
import { auth } from "YOUR_CONFIG_FILE";
const onSubmit = async () => {
const res = await auth.createAccount(
"email@email.com",
"pass1234",
"NameUser" //name user is optional
);
//manage errors
if (res.error) return alert(res.message);
if (!res.error) return alert(res.message);
};
-
Remenber activate the email auth options in your firebase console
-
make async function like this..
import { auth } from "YOUR_CONFIG_FILE";
const onSubmit = async () => {
const res = await auth.loginAccount("email@email.com", "pass1234");
//manage errors
if (res.error) return alert(res.message);
if (!res.error) return alert(res.message);
};
-
Remenber activate the google auth options in your firebase console
-
make async function like this..
import { auth } from "YOUR_CONFIG_FILE";
const onClickButton = async () => {
const res = await auth.loginGoogle();
//manage errors
if (res.error) return alert(res.message);
if (!res.error) return alert(res.message);
};
-
Remenber activate the github auth options in your firebase console and set config needs in github. Read more in firebase docs auth with github
-
make async function like this..
import { auth } from "YOUR_CONFIG_FILE";
const onClickButton = async () => {
const res = await auth.loginGithub();
//manage errors
if (res.error) return alert(res.message);
if (!res.error) return alert(res.message);
};
you can manage the current user auth with a custom hook from EasyFirebase lib
import { useAuthHook } from "easy-firebase-react";
const HomeView = () => {
const user = useAuthHook();
return(
<div>
{
user ? (<p>{user.displayName}</p>) : (<p>user not auth<p/>)
}
</div>
)
}
to close a session you can use the next function
import { auth } from "YOUR_CONFIG_FILE";
auth.closeSession();
addDoc(col: string, data: any, id?: string);
updateDoc(
col: string,
docId: string,
newData: any,
merge: boolean
);
deleteDoc(col: string, idDoc: string);
addInArray(
col: string,
id: string,
field: string,
data: any
);
deleteInArray(
col: string,
id: string,
field: string,
data: any
);
incOrDecNumber(
col: string,
docId: string,
field: string,
number: number
);
deleteField(col: string, docId: string, field: string);
getDocById(col: string, id: string);
getDocsByParam(
col: string,
field: string,
condition: WhereFilterOp,
param: string
);
getAllInCol(col: string);
getDocByIdRT(
col: string,
id: string,
callBack: Function
);
getDocsByParamRT(
col: string,
field: string,
condition: WhereFilterOp,
param: string,
callBack: Function
);
arrayContainsAny(
col: string,
field: string,
array: Array<any>
);
arrayContains(col: string, field: string, value: any);
getMultipleCol(arrayCollections: Array<string>);
- you can create a new document with the 'addDoc' function
- the id is automatically generated but if you need a custom id you can pass it as the third parameter
const newDoc = await firestore.addDoc("products", {
name: "tv smart 3",
price: 500,
active: true,
});
//Manage Errors
if (newDoc.error) {
console.log(`error adding doc: ${newDoc.message}`);
} else {
console.log("doc added: ", newDoc);
}
- You can update a document with the 'updateDoc' function
- by default it does a data merge, but you can replace the entire document by passing the value of false in the fourth parameter
const update = await firestore.updateDoc("products", "a7BTAeEnYbbXi2vCjoql", {
price: 600,
});
console.log(update);
- you can delete a document passing it the collection and the id of the document
const docDelete = await firestore.deleteDoc("products", "89btftioa87SQjEIswjP");
console.log(docDelete);
- adds data to an array, it can be anything, a string, object, array, etc.
- if the array does not exist yet it will create it and add the data
const addA = await firestore.addInArray(
"products", //collection
"8RvHtf437D4clakqBtNO", //idDoc
"categories", //array field
"category1" // data to add
);
console.log(addA);
- to delete data from an array you have to pass the complete data so that it is deleted correctly
const delA = await firestore.deleteInArray(
"products", //collection
"8RvHtf437D4clakqBtNO", //docId
"categories", //Array field
{
//All data of document to delete
description: "desc of category",
name: "category one",
}
);
console.log(addA);