https://github.com/agentnovax/agentnovax-webapp-authentication-react-firebase
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
https://github.com/agentnovax/agentnovax-webapp-authentication-react-firebase
authentication firebase firebase-auth react springboot webapp
Last synced: about 2 months ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/agentnovax/agentnovax-webapp-authentication-react-firebase
- Owner: agentnovax
- License: mit
- Created: 2025-01-27T17:20:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T17:24:40.000Z (over 1 year ago)
- Last Synced: 2025-10-10T22:04:41.993Z (9 months ago)
- Topics: authentication, firebase, firebase-auth, react, springboot, webapp
- Language: TypeScript
- Homepage: https://www.agentnovax.com
- Size: 161 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 
---
## AgentNovaX
Welcome to **AgentNovaX**! 🌍✨
At [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. 🌱💡
---
## **AgentNovaX-ReactFirebaseWebApp** - React JS Project with Firebase Authentication 🚀
**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).
Perfect 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**.
---
## Features 🔑
- User registration and login with **Firebase Authentication** 🔐
- Supports multiple authentication providers (Google, Microsoft, Apple, Facebook) 🌐
- Returns **ID Token** and session for the application
- Valid ID token and stores user information in a database using [API](https://github.com/agentnovax/agentnovax-api-auth-springboot-firebase) 💾
---
## Prerequisites ⚙️
Before you start, ensure that you have the following installed:
### Tools and Technologies 🛠️
- [**Node.js**](https://nodejs.org/en/) (with npm)
- [**Firebase Project**](https://console.firebase.google.com/) - You will need to create a Firebase project.
- [**React**](https://reactjs.org/docs/create-a-new-react-app.html)
---
### Dependencies ⚙️
- `react`
- `firebase`
- `react-dom`
- `@react-firebase/auth`
- `jwt-decode`
- `axios`
---
## Installation 🏗️
### Step 1: Set Up Firebase 🔥
#### 1. Create a Google Account
#### 2. Create a Firebase Account
- Go to [Firebase Console](https://console.firebase.google.com/).
- Log in with your Google account and create a new Firebase project.
#### 3. Enable Authentication 🔑
- Navigate to the **Authentication** section.
- Enable the desired authentication providers (Google, Microsoft, Apple, Facebook).
#### 4. Generate Firebase Admin SDK 🌐
- Go to **Project Settings** > **Service Accounts** and generate a new private key.
- Download the **JSON** file and place it in the project's `resources` folder.
#### 5. Enable authentication providers
In the Firebase Console:
1. Navigate to the **Authentication** section.
2. Under the **Sign-in method** tab, enable the following authentication providers:
- **Google**
- **GitHub**
- **Apple**
- **Microsoft**
3. 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.
#### 6. Obtain Firebase Config
1. Go to the **Project settings** (gear icon) in the Firebase Console.
2. Under the **General** tab, find your Firebase config object (it should look like this):
```json
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
};
const loginHost = "YOUR_LOGIN_API_ENDPOINT";
```
Copy this Firebase config object and paste it into the `src/firebase.js` file (explained in the next step).
#### 7. Configure Firebase in your project
Create a new file called `firebase.js` inside the `src` directory and add your Firebase config object like this:
```javascript
// src/firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider,
OAuthProvider, FacebookAuthProvider, GithubAuthProvider } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
};
const loginHost = "YOUR_LOGIN_API_ENDPOINT";
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const provider = async(type: string)=> {
switch (type) {
case "facebook": return facebookProvider;
case "google": return googleProvider;
case "microsoft": return microsoftProvider;
case "apple": return appleProvider;
case "github": return githubProvider;
default: return googleProvider;
}
}
// Initialize Firebase Authentication and get a reference to the service
export const auth = getAuth(app);
const googleProvider = new GoogleAuthProvider();
const facebookProvider = new FacebookAuthProvider();
const microsoftProvider = new OAuthProvider('microsoft.com');
const appleProvider = new OAuthProvider('apple.com');
const githubProvider = new GithubAuthProvider();
export default loginHost;
```
---
## Running the Project ⚡
### 1. Clone the Repository
```bash
git clone
cd
```
### 2. Install dependencies 🛠️
Run the following command to install the required dependencies:
```bash
npm install
```
### 3. Build and Run 🚀
Now that everything is set up, run the React application:
```bash
npm start
```
The 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.
---
### 7. Deploy (optional) 🚀
Deploying the Application
To deploy this app, you can use platforms like Firebase Hosting, Netlify, or Vercel.
#### Firebase Hosting
1. Install Firebase CLI:
```bash
npm install -g firebase-tools
---
## Troubleshooting 📡
- Make sure you have correctly set up the redirect URIs for each OAuth provider in the Firebase Console.
- Ensure that the Firebase config in `firebase.js` is correctly copied from your Firebase project settings.
- Check for any issues in the browser console or Firebase logs for more information about authentication errors.
---
## Adding Authentication Providers 🌍
### Google Authentication
- Go to Firebase Console > **Authentication** > **Sign-in Method**.
- Enable **Google** and provide the OAuth 2.0 client ID.
### Microsoft Authentication
- Enable **Microsoft** in Firebase Console and provide OAuth credentials from **Azure Portal**.
### Apple Authentication
- Set up **Apple** authentication with the credentials from your **Apple Developer account**.
### Facebook Authentication
- Enable **Facebook** authentication and provide the credentials from **Facebook Developer Console**.
---
## Contributions ✨
We welcome contributions! Feel free to **open a pull request** or raise an **issue** for enhancements or bug fixes.
---
## Additional Notes 📋
- **Testing**: Run this application locally using the instructions.
- **Scaling**: Consider containerization with **Docker** for consistent deployment across environments.
- **Providers**: Refer to the Firebase documentation for detailed setup for other authentication providers.
- For more information, check out the [React](https://react.dev/) and [Firebase Authentication Docs](https://firebase.google.com/docs/auth/).
---
## License 📄
This project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.
---
## Contact 📧
For any queries, feel free to reach out via [agentnovaxp@gmail.com](mailto:agentnovaxp@gmail.com).
---
## Follow AgentNovaX 🌍
Stay connected with **AgentNovaX** through our social media channels:
- [X (Twitter)](https://twitter.com/agentnovax) 🐦
- [LinkedIn](https://linkedin.com/company/agentnovax) 🔗
- [Instagram](https://www.instagram.com/agentnovax/) 📸
- [Facebook](https://www.facebook.com/profile.php?id=61571252049491) 📘
- [YouTube](https://www.youtube.com/@agentnovaxp) 🎥
---
## NovaLeaf Concept 🌱
**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.
- **Plant a Tree, Empower a Community**: For every milestone achieved in our platform, a tree will be planted in a designated area.
- **Green Nova Trees**: These trees represent our growth and commitment to sustainability, and each one is named for the cause it supports.
- **Join the Movement**: Become part of the **NovaLeaf** family and help us plant the future, one tree at a time. 🌳
🌟 **Please consider starring this repository to support the NovaLeaf initiative** 🌟
For more information, visit [NovaLeaf](https://novaleaf.agentnovax.com).
---
## DataFlux 🔄
**DataFlux** provides free tools for data conversion, JSON/YAML beautification, and validation to help developers and data enthusiasts streamline their workflow.
- Tools available: JSON/YAML Beautifiers and Validators, JSON/YAML conversion, Text Compare, JavaScript Validators, and more.
- Visit [DataFlux](https://dataflux.agentnovax.com) to explore our tools and enhance your productivity.
---