Handle firebase not configured error for development

Author: wajeshubham

README.md

@@ -106,6 +106,29 @@ You need `NodeJs` and `yarn` installed on your machine.
   npm install --global yarn
   ```
 
+### Firebase prerequisites (optional)
+
+Firebase is used in this project for authentications and to store snippets. In order to contribute in the part requiring Firebase, create a file called `.env` inside the root folder and add the following credentials in it once you create a Firebase app.
+
+```.env
+NEXT_PUBLIC_FIREBASE_API_KEY=<your_FIREBASE_APP_API_KEY>
+
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your_FIREBASE_APP_AUTH_DOMAIN>
+
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your_FIREBASE_APP_PROJECT_ID>
+
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<your_FIREBASE_APP_STORAGE_BUCKET>
+
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<your_FIREBASE_APP_MESSAGING_SENDER_ID>
+
+NEXT_PUBLIC_FIREBASE_APP_ID=<your_FIREBASE_APP_APP_ID>
+
+NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=<your_FIREBASE_APP_MEASUREMENT_ID>
+
+```
+
+It does not matter what credentials you add to your `.env` file, as the app won't crash while developing since the error is taken care of for the Firebase services that are unavailable.
+
 ### Installation
 
 1. Clone the repo

components/editor/SnippngCodeArea.tsx

@@ -50,6 +50,8 @@ const SnippngCodeArea = () => {
   } = editorConfig;
 
   const saveSnippet = async () => {
+    if (!db) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
+
     if (!user) return;
     try {
       const docRef = await addDoc(
@@ -62,6 +64,8 @@ const SnippngCodeArea = () => {
   };
 
   const updateSnippet = async () => {
+    if (!db) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
+
     if (!user || !uid) return;
     try {
       await updateDoc(doc(db, "user", user.uid, "snippets", uid), {

config/firebase.ts

@@ -1,18 +1,34 @@
 import { initializeApp } from "firebase/app";
-import { getFirestore } from "firebase/firestore";
-import { getAuth } from "firebase/auth";
+import { Firestore, getFirestore } from "firebase/firestore";
+import { Auth, getAuth } from "firebase/auth";
+import { Analytics, getAnalytics } from "firebase/analytics";
 
-const firebaseConfig = {
-  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
-};
+let auth: Auth | undefined;
+let db: Firestore | undefined;
+let analytics: Analytics | undefined;
 
-const app = initializeApp(firebaseConfig);
+try {
+  const firebaseConfig = {
+    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+  };
 
-export const auth = getAuth(app);
-export const db = getFirestore(app);
+  const app = initializeApp(firebaseConfig);
+
+  auth = getAuth(app);
+  db = getFirestore(app);
+  analytics = typeof window !== "undefined" ? getAnalytics(app) : undefined;
+} catch (error) {
+  console.log(
+    Error(
+      "Error while setting up firebase. Please add .env file with required credentials for firebase setup"
+    )
+  );
+}
+
+export { auth, db, analytics };

context/AuthContext.tsx

@@ -30,20 +30,23 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   const [user, setUser] = useState<User | null>(null);
 
   const loginWithGithub = async () => {
+    if (!auth) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
     await setPersistence(auth, browserLocalPersistence)
       .then(() => {
-        return signInWithPopup(auth, provider);
+        return signInWithPopup(auth!, provider);
       })
       .catch((error) => {
         alert(error.message);
       });
   };
 
   const logout = async () => {
+    if (!auth) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
     await signOut(auth);
   };
 
   useEffect(() => {
+    if (!auth) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
     const unsubscribe = onAuthStateChanged(auth, (fbUser) => {
       setUser(fbUser);
     });

pages/profile.tsx

@@ -26,6 +26,7 @@ const UserProfile = () => {
   const router = useRouter();
 
   const fetchCodeSnippets = async () => {
+    if (!db) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
     if (!user) return;
     try {
       const snippets: SnippngEditorConfigInterface[] = [];
@@ -47,6 +48,7 @@ const UserProfile = () => {
   };
 
   const deleteCodeSnippet = async (snippetId: string) => {
+    if (!db) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
     if (!user || !snippetId) return;
     setDeletingSnippet(true);
     try {

pages/snippet/[uid].tsx

@@ -21,8 +21,9 @@ const SavedSnippet = () => {
   const { uid } = router.query as { uid: string };
 
   const fetchCodeSnippet = async () => {
-    if (!user) {
+    if (!user || !db) {
       setLoadingConfig(false);
+      if (!db) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
       return;
     }
     try {