{"id":25237403,"url":"https://github.com/agentnovax/agentnovax-webapp-authentication-react-firebase","last_synced_at":"2026-05-05T04:32:27.945Z","repository":{"id":276840641,"uuid":"923121571","full_name":"agentnovax/agentnovax-webapp-authentication-react-firebase","owner":"agentnovax","description":"agentnovax-webapp-authentication-react-firebase is a React web app that integrates Firebase authentication for secure user sign-up, login, and session management. This project provides an easy solution to implement authentication in web applications, enabling smooth and secure user access while leveraging Firebase's powerful authentication services","archived":false,"fork":false,"pushed_at":"2025-01-27T17:24:40.000Z","size":165,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T22:04:41.993Z","etag":null,"topics":["authentication","firebase","firebase-auth","react","springboot","webapp"],"latest_commit_sha":null,"homepage":"https://www.agentnovax.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agentnovax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2025-01-27T17:20:14.000Z","updated_at":"2025-02-22T15:39:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"26b1d7ee-a0dc-418f-b9f5-caf00d982aaf","html_url":"https://github.com/agentnovax/agentnovax-webapp-authentication-react-firebase","commit_stats":null,"previous_names":["agentnovax/agentnovax-webapp-authentication-react-firebase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/agentnovax/agentnovax-webapp-authentication-react-firebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentnovax%2Fagentnovax-webapp-authentication-react-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentnovax%2Fagentnovax-webapp-authentication-react-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentnovax%2Fagentnovax-webapp-authentication-react-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentnovax%2Fagentnovax-webapp-authentication-react-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agentnovax","download_url":"https://codeload.github.com/agentnovax/agentnovax-webapp-authentication-react-firebase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentnovax%2Fagentnovax-webapp-authentication-react-firebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32635495,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","springboot","webapp"],"created_at":"2025-02-11T16:00:41.834Z","updated_at":"2026-05-05T04:32:27.929Z","avatar_url":"https://github.com/agentnovax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# \u003cimg src=\"https://raw.githubusercontent.com/agentnovax/www.agentnovax.com/main/assets/banners/AgentNovaX-Banner.png\" alt=\"AgentNovaX Banner\" height=\"300\" width=\"100%\"\u003e\n\n---\n\n## AgentNovaX\n\nWelcome to **AgentNovaX**! 🌍✨\n\nAt [AgentNovaX](https://www.agentnovax.com/), our vision is to create a world where **innovation**, **collaboration**, **technology**, and **sustainability** work hand-in-hand to empower communities. We aim to provide tools that **simplify tasks**, **increase productivity**, and contribute to a **better planet**. Through **creativity**, **inclusivity**, and **environmental consciousness**, we strive to inspire a global movement toward shared success and continuous growth. 🌱💡\n\n---\n\n## **AgentNovaX-ReactFirebaseWebApp** - React JS Project with Firebase Authentication 🚀\n\n**AgentNovaX-ReactFirebaseWebApp** is a robust **React JS web application** that integrates **Firebase Authentication** to provide secure and scalable user authentication solutions. The project supports seamless user registration, generation of Firebase ID tokens, and integrates with multiple authentication providers like **Google**, **Microsoft**, **Apple**, and **Facebook**. Additionally(optional), it includes **JWT token generation** for secure session management, offering a simple yet powerful solution for building modern authentication systems using our [API](https://github.com/agentnovax/agentnovax-api-auth-springboot-firebase).\n\nPerfect for developers looking to integrate **Firebase authentication** into their **React JS** applications with [**API(optional)**](https://github.com/agentnovax/agentnovax-api-auth-springboot-firebase) as the backend data store and token generation, providing a complete **OAuth solution**.\n\n---\n\n## Features 🔑\n\n- User registration and login with **Firebase Authentication** 🔐\n- Supports multiple authentication providers (Google, Microsoft, Apple, Facebook) 🌐\n- Returns **ID Token** and session for the application\n- Valid ID token and stores user information in a database using [API](https://github.com/agentnovax/agentnovax-api-auth-springboot-firebase) 💾\n\n---\n\n## Prerequisites ⚙️\n\nBefore you start, ensure that you have the following installed:\n\n### Tools and Technologies 🛠️\n- [**Node.js**](https://nodejs.org/en/) (with npm)\n- [**Firebase Project**](https://console.firebase.google.com/) - You will need to create a Firebase project.\n- [**React**](https://reactjs.org/docs/create-a-new-react-app.html)\n\n---\n\n### Dependencies ⚙️\n\n- `react`\n- `firebase`\n- `react-dom`\n- `@react-firebase/auth`\n- `jwt-decode`\n- `axios`\n\n---\n\n## Installation 🏗️\n\n### Step 1: Set Up Firebase 🔥\n\n#### 1. Create a Google Account\n\n#### 2. Create a Firebase Account\n- Go to [Firebase Console](https://console.firebase.google.com/).\n- Log in with your Google account and create a new Firebase project.\n\n#### 3. Enable Authentication 🔑\n- Navigate to the **Authentication** section.\n- Enable the desired authentication providers (Google, Microsoft, Apple, Facebook).\n\n#### 4. Generate Firebase Admin SDK 🌐\n- Go to **Project Settings** \u003e **Service Accounts** and generate a new private key.\n- Download the **JSON** file and place it in the project's `resources` folder.\n\n#### 5. Enable authentication providers\n\nIn the Firebase Console:\n\n1. Navigate to the **Authentication** section.\n2. Under the **Sign-in method** tab, enable the following authentication providers:\n   - **Google**\n   - **GitHub**\n   - **Apple**\n   - **Microsoft**\n3. For each provider, you'll need to configure them. Follow Firebase's instructions for each provider to set up OAuth credentials, including setting up the redirect URLs as needed.\n\n#### 6. Obtain Firebase Config\n\n1. Go to the **Project settings** (gear icon) in the Firebase Console.\n2. Under the **General** tab, find your Firebase config object (it should look like this):\n\n```json\nconst firebaseConfig = {\n  apiKey: \"YOUR_API_KEY\",\n  authDomain: \"YOUR_AUTH_DOMAIN\",\n  projectId: \"YOUR_PROJECT_ID\",\n  storageBucket: \"YOUR_STORAGE_BUCKET\",\n  messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n  appId: \"YOUR_APP_ID\",\n  measurementId: \"YOUR_MEASUREMENT_ID\"\n};\n\nconst loginHost = \"YOUR_LOGIN_API_ENDPOINT\";\n```\n\nCopy this Firebase config object and paste it into the `src/firebase.js` file (explained in the next step).\n\n#### 7. Configure Firebase in your project\n\nCreate a new file called `firebase.js` inside the `src` directory and add your Firebase config object like this:\n\n```javascript\n// src/firebase.js\n// Import the functions you need from the SDKs you need\nimport { initializeApp } from \"firebase/app\";\nimport { getAuth, GoogleAuthProvider,\n    OAuthProvider, FacebookAuthProvider, GithubAuthProvider  } from \"firebase/auth\";\n// TODO: Add SDKs for Firebase products that you want to use\n// https://firebase.google.com/docs/web/setup#available-libraries\n// Your web app's Firebase configuration\n\nconst firebaseConfig = {\n    apiKey: \"YOUR_API_KEY\",\n    authDomain: \"YOUR_AUTH_DOMAIN\",\n    projectId: \"YOUR_PROJECT_ID\",\n    storageBucket: \"YOUR_STORAGE_BUCKET\",\n    messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n    appId: \"YOUR_APP_ID\",\n    measurementId: \"YOUR_MEASUREMENT_ID\"\n};\n\nconst loginHost = \"YOUR_LOGIN_API_ENDPOINT\";\n\n// Initialize Firebase\nconst app = initializeApp(firebaseConfig);\nexport const provider = async(type: string)=\u003e {\n    switch (type) {\n        case \"facebook\": return facebookProvider;\n        case \"google\": return googleProvider;\n        case \"microsoft\": return microsoftProvider;\n        case \"apple\": return appleProvider;\n        case \"github\": return githubProvider;\n        default: return googleProvider;\n    }\n}\n// Initialize Firebase Authentication and get a reference to the service\nexport const auth = getAuth(app);\nconst googleProvider = new GoogleAuthProvider();\nconst facebookProvider = new FacebookAuthProvider();\nconst microsoftProvider = new OAuthProvider('microsoft.com');\nconst appleProvider = new OAuthProvider('apple.com');\nconst githubProvider = new GithubAuthProvider();\nexport default loginHost;\n```\n\n---\n\n## Running the Project ⚡\n\n### 1. Clone the Repository\n```bash\ngit clone \u003crepository_url\u003e\ncd \u003crepository_name\u003e\n```\n\n### 2. Install dependencies 🛠️\n\n\nRun the following command to install the required dependencies:\n\n```bash\nnpm install\n```\n\n### 3. Build and Run 🚀\nNow that everything is set up, run the React application:\n\n```bash\nnpm start\n```\n\nThe app should open in your browser. You can log in using any of the configured providers (Google, GitHub, Apple, Microsoft) and see the authenticated user’s name after a successful login.\n\n---\n\n### 7. Deploy (optional) 🚀\n\nDeploying the Application\n\nTo deploy this app, you can use platforms like Firebase Hosting, Netlify, or Vercel.\n\n#### Firebase Hosting\n\n1. Install Firebase CLI:\n\n   ```bash\n   npm install -g firebase-tools\n\n\n---\n\n## Troubleshooting 📡\n\n- Make sure you have correctly set up the redirect URIs for each OAuth provider in the Firebase Console.\n- Ensure that the Firebase config in `firebase.js` is correctly copied from your Firebase project settings.\n- Check for any issues in the browser console or Firebase logs for more information about authentication errors.\n\n---\n\n## Adding Authentication Providers 🌍\n\n### Google Authentication\n- Go to Firebase Console \u003e **Authentication** \u003e **Sign-in Method**.\n- Enable **Google** and provide the OAuth 2.0 client ID.\n\n### Microsoft Authentication\n- Enable **Microsoft** in Firebase Console and provide OAuth credentials from **Azure Portal**.\n\n### Apple Authentication\n- Set up **Apple** authentication with the credentials from your **Apple Developer account**.\n\n### Facebook Authentication\n- Enable **Facebook** authentication and provide the credentials from **Facebook Developer Console**.\n\n---\n\n## Contributions ✨\n\nWe welcome contributions! Feel free to **open a pull request** or raise an **issue** for enhancements or bug fixes.\n\n---\n\n## Additional Notes 📋\n\n- **Testing**: Run this application locally using the instructions.\n- **Scaling**: Consider containerization with **Docker** for consistent deployment across environments.\n- **Providers**: Refer to the Firebase documentation for detailed setup for other authentication providers.\n- For more information, check out the [React](https://react.dev/) and [Firebase Authentication Docs](https://firebase.google.com/docs/auth/).\n\n---\n\n## License 📄\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.\n\n---\n\n## Contact 📧\n\nFor any queries, feel free to reach out via [agentnovaxp@gmail.com](mailto:agentnovaxp@gmail.com).\n\n---\n\n## Follow AgentNovaX 🌍\n\nStay connected with **AgentNovaX** through our social media channels:\n\n- [X (Twitter)](https://twitter.com/agentnovax) 🐦\n- [LinkedIn](https://linkedin.com/company/agentnovax) 🔗\n- [Instagram](https://www.instagram.com/agentnovax/) 📸\n- [Facebook](https://www.facebook.com/profile.php?id=61571252049491) 📘\n- [YouTube](https://www.youtube.com/@agentnovaxp) 🎥\n\n---\n\n## NovaLeaf Concept 🌱\n\n**NovaLeaf** is an initiative focused on environmental sustainability, aiming to contribute to a greener planet. Through this initiative, **AgentNovaX** is committed to planting trees, fostering green projects, and encouraging eco-friendly practices among individuals and communities.\n\n- **Plant a Tree, Empower a Community**: For every milestone achieved in our platform, a tree will be planted in a designated area.\n- **Green Nova Trees**: These trees represent our growth and commitment to sustainability, and each one is named for the cause it supports.\n- **Join the Movement**: Become part of the **NovaLeaf** family and help us plant the future, one tree at a time. 🌳\n\n🌟 **Please consider starring this repository to support the NovaLeaf initiative** 🌟\n\nFor more information, visit [NovaLeaf](https://novaleaf.agentnovax.com).\n\n---\n\n## DataFlux 🔄\n\n**DataFlux** provides free tools for data conversion, JSON/YAML beautification, and validation to help developers and data enthusiasts streamline their workflow.\n\n- Tools available: JSON/YAML Beautifiers and Validators, JSON/YAML conversion, Text Compare, JavaScript Validators, and more.\n- Visit [DataFlux](https://dataflux.agentnovax.com) to explore our tools and enhance your productivity.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagentnovax%2Fagentnovax-webapp-authentication-react-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagentnovax%2Fagentnovax-webapp-authentication-react-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagentnovax%2Fagentnovax-webapp-authentication-react-firebase/lists"}