{"id":18455783,"url":"https://github.com/akdevv/firebase-auth","last_synced_at":"2026-05-09T15:11:34.596Z","repository":{"id":248165984,"uuid":"827909488","full_name":"akdevv/firebase-auth","owner":"akdevv","description":"Simple project to help you quickly setup firebase authentication with MongoDB integration in your React codebase!","archived":false,"fork":false,"pushed_at":"2024-09-14T14:07:00.000Z","size":7202,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T14:57:27.804Z","etag":null,"topics":["authentication","firebase","firebase-auth","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akdevv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-12T16:37:12.000Z","updated_at":"2024-09-14T14:07:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"1168c661-c42f-4aa9-a116-ee8cefa75443","html_url":"https://github.com/akdevv/firebase-auth","commit_stats":null,"previous_names":["akdevv/firebase-auth"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akdevv%2Ffirebase-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akdevv%2Ffirebase-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akdevv%2Ffirebase-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akdevv%2Ffirebase-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akdevv","download_url":"https://codeload.github.com/akdevv/firebase-auth/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250285719,"owners_count":21405298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","firebase","firebase-auth","react"],"created_at":"2024-11-06T08:09:02.433Z","updated_at":"2026-05-09T15:11:29.539Z","avatar_url":"https://github.com/akdevv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# firebase-auth\n\nSimple project to help you quickly setup firebase authentication with MongoDB integration in your React codebase!\n\n## Table of Contents\n\n-   [Folder Structure](#folder-structure)\n-   [Screenshots](#screenshots)\n-   [Getting Started](#getting-started)\n-   [How to Run Locally](#how-to-run-locally)\n-   [Firebase Setup](#firebase-setup)\n    -   [Create Firebase Project](#create-firebase-project)\n    -   [Enable Firebase Authentication](#enable-firebase-authentication)\n    -   [Configure Firebase in React](#configure-firebase-in-react)\n-   [MongoDB Integration](#mongodb-integration)\n-   [Setting Up Login Using Email \u0026 Password](#setting-up-login-using-email--password)\n-   [Setting Up Login Using Google and GitHub](#setting-up-login-using-google-and-github)\n    -   [Google](#google)\n    -   [GitHub](#github)\n\n## Folder Structure\n\nHere's the overview of the project's folder structure:\n\n```\n├── backend/\n│   ├── config/\n│   │   ├── firebaseAdmin.js          # Firebase Admin setup\n│   ├── controllers/\n│   │   ├── authController.js         # Handles auth logic\n│   │   ├── userController.js         # Manages user operations\n│   ├── database/\n│   │   ├── index.js                  # MongoDB connection\n│   ├── models/\n│   │   ├── user.model.js             # MongoDB user model\n│   ├── routes/\n│   │   ├── authRoutes.js             # Auth routes\n│   │   ├── userRoutes.js             # User routes\n│   └── server.js                     # Express server setup\n├── src/\n│   ├── assets/                       # Static images\n│   ├── components/\n│   │   ├── Footer.jsx\n│   │   ├── Login.jsx\n│   │   ├── Register.jsx\n│   ├── config/\n│   │   ├── firebase.js               # Firebase client config\n│   ├── pages/\n│   │   ├── Home.jsx\n│   │   ├── Profile.jsx\n│   ├── routes/\n│   │   ├── Router.jsx                # React Router setup\n│   ├── App.jsx\n│   ├── index.css\n│   ├── main.jsx\n├── index.html\n├── tailwind.config.js                # Tailwind setup\n└── README.md                         # Project documentation\n```\n\n## Screenshots\n\n![Home Page](/src/assets/HomePage.png)\n![Login Page](/src/assets/LoginPage.png)\n![Register Page](/src/assets/RegisterPage.png)\n\n## Getting Started\n\n### Prerequisites\n\n-   Node.js (v14 or higher)\n-   MongoDB (local or cloud)\n-   Firebase Account\n\n### Installation\n\n1. Clone the repository:\n\n    ```bash\n    git clone https://github.com/akdevv/firebase-auth\n    cd firebase-auth\n    ```\n\n2. Install dependencies:\n\n    ```bash\n    npm install\n    ```\n\n3. Set up your environment variables in a `.env` file:\n\n```js\n    # Firebase Keys\n    VITE_FIREBASE_API_KEY=\u003c\u003cyour-firebase-api-key\u003e\u003e\n    VITE_FIREBASE_AUTH_DOMAIN=\u003c\u003cyour-firebase-auth-domain\u003e\u003e\n    VITE_FIREBASE_PROJECT_ID=\u003c\u003cyour-firebase-project-id\u003e\u003e\n    VITE_FIREBASE_STORAGE_BUCKET=\u003c\u003cyour-firebase-storage-bucket\u003e\u003e\n    VITE_FIREBASE_MESSAGING_SENDER_ID=\u003c\u003cyour-firebase-messaging-sender-id\u003e\u003e\n    VITE_FIREBASE_APP_ID=\u003c\u003cyour-firebase-app-id\u003e\u003e\n\n    # Firebase Client\n    FIREBASE_PROJECT_ID=\u003c\u003cyour-firebase-project-id\u003e\u003e\n    FIREBASE_CLIENT_EMAIL=\u003c\u003cyour-firebase-client-email\u003e\u003e\n    FIREBASE_PRIVATE_KEY=\u003c\u003cyour-firebase-private-key\u003e\u003e\n\n    # MongoDB\n    MONGODB_URI=\u003c\u003cyour-mongodb-uri\u003e\u003e\n\n    # Backend Domain\n    VITE_BACKEND_DOMAIN=\u003c\u003cyour-backend-domain\u003e\u003e\n```\n\n## How to Run Locally\n\n1. Start the React development server:\n\n    ```bash\n    npm run dev\n    ```\n\n2. Visit `http://localhost:5173` in your browser to view the app.\n\n## Firebase Setup\n\n### Create Firebase Project\n\n1. Go to the [Firebase Console](https://console.firebase.google.com/).\n2. Click on \"Add Project\" and follow the setup instructions.\n3. Add your app to the project and get the Firebase configuration keys.\n\n### Enable Firebase Authentication\n\n1. In the Firebase Console, navigate to \"Authentication\" \u003e \"Sign-in method\".\n2. Enable the sign-in providers you want (Email/Password, Google, GitHub).\n\n### Configure Firebase in React\n\n1. Create a new file in `src/config/firebase.js`:\n\n    ```js\n    import { initializeApp } from \"firebase/app\";\n    import {\n    \tgetAuth,\n    \tGoogleAuthProvider,\n    \tGithubAuthProvider,\n    } from \"firebase/auth\";\n\n    const firebaseConfig = {\n    \tapiKey: import.meta.env.VITE_FIREBASE_API_KEY,\n    \tauthDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,\n    \tprojectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,\n    \tstorageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,\n    \tmessagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,\n    \tappId: import.meta.env.VITE_FIREBASE_APP_ID,\n    };\n\n    // Initialize Firebase\n    const app = initializeApp(firebaseConfig);\n\n    export const auth = getAuth(app);\n    export const githubProvider = new GithubAuthProvider();\n    export const googleProvider = new GoogleAuthProvider();\n    ```\n\n2. Setup firebase admin authentication: `backend/config/firebaseAdmin.js`\n\n    ```js\n    import dotenv from \"dotenv\";\n    import admin from \"firebase-admin\";\n\n    dotenv.config();\n    admin.initializeApp({\n    \tcredential: admin.credential.cert({\n    \t\tprojectId: process.env.FIREBASE_PROJECT_ID,\n    \t\tclientEmail: process.env.FIREBASE_CLIENT_EMAIL,\n    \t\tprivateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\\\n/g, \"\\n\"),\n    \t}),\n    });\n\n    export default admin;\n    ```\n\n3. Use the `auth` object in your React components to manage authentication.\n\n## MongoDB Integration\n\nSet up your MongoDB connection using Mongoose or another MongoDB client.\n\n```js\nimport dotenv from \"dotenv\";\nimport mongoose from \"mongoose\";\n\ndotenv.config();\n\nconst connectDB = async () =\u003e {\n\ttry {\n\t\tawait mongoose.connect(process.env.MONGODB_URI);\n\t\tconsole.log(\"MongoDB connected...\");\n\t} catch (err) {\n\t\tconsole.error(err.message);\n\t}\n};\n\nexport default connectDB;\n```\n\n## Setting Up Login Using Email \u0026 Password\n\n1. Create Login Component\n   In `src/components/Login.jsx`, create forms for Email \u0026 Password login:\n\n    ```js\n    // Email Login\n    const handleLogin = useCallback(async () =\u003e {\n    \ttry {\n    \t\tconst data = await signInWithEmailAndPassword(\n    \t\t\tauth,\n    \t\t\temail,\n    \t\t\tpassword\n    \t\t);\n    \t\tconst token = await data.user.getIdToken();\n\n    \t\tconst response = await axios.post(\n    \t\t\t`${import.meta.env.VITE_BACKEND_DOMAIN}/api/auth/login`,\n    \t\t\t{ token }\n    \t\t);\n    \t\tif (response.status === 200) {\n    \t\t\tlocalStorage.setItem(\"token\", token);\n    \t\t\tnavigate(\"/profile\");\n    \t\t}\n    \t} catch (err) {\n    \t\tconsole.error(\"Something went wrong!\", err.message);\n    \t}\n    }, [email, password, navigate]);\n    ```\n\n2. Create Authentication Routes\n   In `backend/routes/authRoutes.js`, create routes to handle login (`/login`):\n\n    ```js\n    import express from \"express\";\n    import { login } from \"../controllers/authController.js\";\n\n    const router = express.Router();\n\n    router.post(\"/login\", login);\n    // other routes...\n\n    export default router;\n    ```\n\n3. Make Controllers\n   Use the Firebase Admin SDK in `backend/controllers/authController.js` to verify tokens received from the frontend:\n\n    ```js\n    import User from \"../models/user.models.js\";\n    import admin from \"../config/firebaseAdmin.js\";\n\n    // LOGIN ROUTE\n    const login = async (req, res) =\u003e {\n    \tconst { token } = req.body;\n\n    \ttry {\n    \t\tconst decodedToken = await admin.auth().verifyIdToken(token);\n    \t\tconst { uid } = decodedToken;\n\n    \t\t// Check if the user exists in MongoDB\n    \t\tconst user = await User.findOne({ userId: uid });\n    \t\tif (!user) {\n    \t\t\treturn res.status(401).json({\n    \t\t\t\tstatus: 401,\n    \t\t\t\terror: \"User not found!\",\n    \t\t\t});\n    \t\t}\n\n    \t\treturn res.status(200).json({\n    \t\t\tstatus: 200,\n    \t\t\tmessage: \"User logged in successfully!\",\n    \t\t});\n    \t} catch (err) {\n    \t\tconsole.error(\"Error verifying token: \", err.message);\n    \t\treturn res.status(401).json({\n    \t\t\tstatus: 401,\n    \t\t\terror: \"Unauthorized\",\n    \t\t});\n    \t}\n    };\n    // other controllers...\n    ```\n\n## Setting Up Login Using Google and GitHub\n\n### Google\n\n1. Fontend logic\n\n    ```js\n    const handleGoogleLogin = async () =\u003e {\n    \ttry {\n    \t\tconst data = await signInWithPopup(auth, googleProvider);\n    \t\tconst token = await data.user.getIdToken();\n\n    \t\tconst response = await axios.post(\n    \t\t\t`${import.meta.env.VITE_BACKEND_DOMAIN}/api/auth/google-auth`,\n    \t\t\t{ token }\n    \t\t);\n    \t\tif (response.status === 200) {\n    \t\t\tlocalStorage.setItem(\"token\", token);\n    \t\t\tnavigate(\"/profile\");\n    \t\t}\n    \t} catch (err) {\n    \t\tconsole.error(\"Something went wrong!\", err.message);\n    \t}\n    };\n    ```\n\n2. Backend logic\n\n    ```js\n    const loginOrRegisterGoogle = async (req, res) =\u003e {\n    \tconst { token } = req.body;\n\n    \ttry {\n    \t\tconst decodedToken = await admin.auth().verifyIdToken(token);\n    \t\tconst { uid, name, email, picture } = decodedToken;\n\n    \t\t// Check if the user exists in MongoDB\n    \t\tlet user = await User.findOne({ userId: uid });\n    \t\tif (!user) {\n    \t\t\tuser = new User({\n    \t\t\t\tuserId: uid,\n    \t\t\t\tname,\n    \t\t\t\temail,\n    \t\t\t\tphotoURL: picture || \"https://placehold.co/400\",\n    \t\t\t});\n    \t\t\tawait user.save();\n    \t\t}\n\n    \t\treturn res.status(200).json({\n    \t\t\tstatus: 200,\n    \t\t\tdata: user,\n    \t\t\tmessage: \"User logged in successfully!\",\n    \t\t});\n    \t} catch (err) {\n    \t\tconsole.error(\"Error verifying token: \", err.message);\n    \t\treturn res.status(401).json({\n    \t\t\tstatus: 401,\n    \t\t\terror: \"Unauthorized\",\n    \t\t});\n    \t}\n    };\n    ```\n\n### GitHub\n\n1. Frontend logic\n\n    ```js\n    const handleGithubLogin = async () =\u003e {\n    \ttry {\n    \t\tconst data = await signInWithPopup(auth, githubProvider);\n    \t\tconst token = await data.user.getIdToken();\n\n    \t\tconst response = await axios.post(\n    \t\t\t`${import.meta.env.VITE_BACKEND_DOMAIN}/api/auth/github-auth`,\n    \t\t\t{ token }\n    \t\t);\n    \t\tif (response.status === 200) {\n    \t\t\tlocalStorage.setItem(\"token\", token);\n    \t\t\tnavigate(\"/profile\");\n    \t\t}\n    \t} catch (err) {\n    \t\tconsole.error(\"Something went wrong!\", err.message);\n    \t}\n    };\n    ```\n\n2. Backend logic\n\n    ```js\n    const loginOrRegisterGithub = async (req, res) =\u003e {\n    \tconst { token } = req.body;\n\n    \ttry {\n    \t\tconst decodedToken = await admin.auth().verifyIdToken(token);\n    \t\tconst { uid, name, email, picture } = decodedToken;\n\n    \t\t// Check if the user exists in MongoDB\n    \t\tlet user = await User.findOne({ userId: uid });\n    \t\tif (!user) {\n    \t\t\tuser = new User({\n    \t\t\t\tuserId: uid,\n    \t\t\t\tname,\n    \t\t\t\temail,\n    \t\t\t\tphotoURL: picture || \"https://placehold.co/400\",\n    \t\t\t});\n    \t\t\tawait user.save();\n    \t\t}\n\n    \t\treturn res.status(200).json({\n    \t\t\tstatus: 200,\n    \t\t\tdata: user,\n    \t\t\tmessage: \"User logged in successfully!\",\n    \t\t});\n    \t} catch (err) {\n    \t\tconsole.error(\"Error verifying token: \", err.message);\n    \t\treturn res.status(401).json({\n    \t\t\tstatus: 401,\n    \t\t\terror: \"Unauthorized\",\n    \t\t});\n    \t}\n    };\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakdevv%2Ffirebase-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakdevv%2Ffirebase-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakdevv%2Ffirebase-auth/lists"}