Welcome to AgentNovaX! 🌍✨
At AgentNovaX, 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 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.
Perfect for developers looking to integrate Firebase authentication into their React JS applications with API(optional) as the backend data store and token generation, providing a complete OAuth solution.
- 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 💾
Before you start, ensure that you have the following installed:
- Node.js (with npm)
- Firebase Project - You will need to create a Firebase project.
- React
reactfirebasereact-dom@react-firebase/authjwt-decodeaxios
- Go to Firebase Console.
- Log in with your Google account and create a new Firebase project.
- Navigate to the Authentication section.
- Enable the desired authentication providers (Google, Microsoft, Apple, Facebook).
- Go to Project Settings > Service Accounts and generate a new private key.
- Download the JSON file and place it in the project's
resourcesfolder.
In the Firebase Console:
- Navigate to the Authentication section.
- Under the Sign-in method tab, enable the following authentication providers:
- GitHub
- Apple
- Microsoft
- 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.
- Go to the Project settings (gear icon) in the Firebase Console.
- Under the General tab, find your Firebase config object (it should look like this):
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).
Create a new file called firebase.js inside the src directory and add your Firebase config object like this:
// 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;git clone <repository_url>
cd <repository_name>Run the following command to install the required dependencies:
npm installNow that everything is set up, run the React application:
npm startThe 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.
Deploying the Application
To deploy this app, you can use platforms like Firebase Hosting, Netlify, or Vercel.
-
Install Firebase CLI:
npm install -g firebase-tools
- 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.jsis correctly copied from your Firebase project settings. - Check for any issues in the browser console or Firebase logs for more information about authentication errors.
- Go to Firebase Console > Authentication > Sign-in Method.
- Enable Google and provide the OAuth 2.0 client ID.
- Enable Microsoft in Firebase Console and provide OAuth credentials from Azure Portal.
- Set up Apple authentication with the credentials from your Apple Developer account.
- Enable Facebook authentication and provide the credentials from Facebook Developer Console.
We welcome contributions! Feel free to open a pull request or raise an issue for enhancements or bug fixes.
- 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 and Firebase Authentication Docs.
This project is licensed under the MIT License - see the LICENSE file for details.
For any queries, feel free to reach out via [email protected].
Stay connected with AgentNovaX through our social media channels:
- X (Twitter) 🐦
- LinkedIn 🔗
- Instagram 📸
- Facebook 📘
- YouTube 🎥
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.
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 to explore our tools and enhance your productivity.