How to use Firbase ?
Note:
The onion template uses the firebase authentication system by default.
-
Step-1 : Visit Google Console (opens in a new tab). Create a project next, then gather configuration data from it and add it to the
.env
file. -
Step-2 : Open the
src/App.jsx
file then import the AuthProvider fromcontexts/firebaseContext
and wrap the App component with it. -
Step-3 : Open the
src/hooks/useAuth.js
file. Thereupon, import the AuthContext fromsrc/contexts/firebaseContext
then pass it as an argument in the useContext hook. -
Step-4 : Call the useAuth hook inside AuthGuard, GuestGuard components, Login, Register page etc.
Step 1
_10REACT_APP_FIREBASE_APT_KEY=_10REACT_APP_FIREBASE_AUTH_DOMAIN=_10REACT_APP_FIREBASE_DATABASE_URL=_10REACT_APP_FIREBASE_PROJECT_ID=_10REACT_APP_FIREBASE_STORAGE_BUCKET=_10REACT_APP_FIREBASE_MESSAGING_SENDER_ID=_10REACT_APP_FIREBASE_APP_ID=_10REACT_APP_FIREBASE_MEASUREMENT_ID=
Step 2
useAuth.js Step 3
_10import { AuthContext } from "contexts/firebaseContext";_10_10const useAuth = () => useContext(AuthContext);_10export default useAuth;
Step 4
How to delete from app ?
- Delete the
firebaseContext.jsx
file fromsrc/contexts
folder - If you use this, you should also remove the AuthContext file from the
src/hooks/useAuth.js
file. - Remove the CONFIG OPTIONS from the
.env
file as well. - Remove the dependency
firebase