Step 1: Set Up a New React App

To start using Firebase Authentication in your React app, you'll first need to set up a new React application. You can use Create React App to set this up:

npx create-react-app firebase-auth-demo
cd firebase-auth-demo

Step 2: Install Firebase

Next, you'll need to install Firebase in your React app. This will allow you to use Firebase Authentication and other Firebase services:

npm install firebase

Step 3: Set Up a Firebase Project

1. Go to the Firebase Console.
2. Click "Add project" and follow the setup instructions to create a new Firebase project.
3. Once the project is created, navigate to the project dashboard.

Step 4: Configure Firebase in Your React App

1. In the Firebase Console, go to Project Settings.
2. Under the "Your apps" section, click on the web icon </> to register a new web app.
3. Follow the setup instructions to get your Firebase configuration.

Once you have the configuration, create a firebase-config.js file in your React app's src directory and add the following code:

// src/firebase-config.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

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"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Step 5: Create an Authentication Component

Create a new component called Auth.jsx to handle user authentication:

// src/Auth.jsx
import React, { useState } from "react";
import { auth } from "./firebase-config";
import { 
  createUserWithEmailAndPassword, 
  signInWithEmailAndPassword, 
  signOut 
} from "firebase/auth";

function Auth() {
  const [registerEmail, setRegisterEmail] = useState("");
  const [registerPassword, setRegisterPassword] = useState("");
  const [loginEmail, setLoginEmail] = useState("");
  const [loginPassword, setLoginPassword] = useState("");
  const [user, setUser] = useState(null);

  const register = async () => {
    try {
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        registerEmail,
        registerPassword
      );
      setUser(userCredential.user);
    } catch (error) {
      console.error(error.message);
    }
  };

  const login = async () => {
    try {
      const userCredential = await signInWithEmailAndPassword(
        auth,
        loginEmail,
        loginPassword
      );
      setUser(userCredential.user);
    } catch (error) {
      console.error(error.message);
    }
  };

  const logout = async () => {
    await signOut(auth);
    setUser(null);
  };

  return (
    

      
Register
       setRegisterEmail(event.target.value)}
      />
       setRegisterPassword(event.target.value)}
      />
      Create User

      
Login
       setLoginEmail(event.target.value)}
      />
       setLoginPassword(event.target.value)}
      />
      Login

      
User Logged In: 
      {user?.email}
      Logout
    
  );
}

export default Auth;

Step 6: Use the Authentication Component

Finally, use the Auth component in your App.js file:

// src/App.js
import React from "react";
import "./App.css";
import Auth from "./Auth";

function App() {
  return (
    

      
Firebase Auth with React
      
    
  );
}

export default App;

Now you have a working Firebase Authentication setup in your React app! You can expand upon this example by adding additional authentication providers, setting up password resets, or securing routes in your application.