Integrating Firebase Authentication with React

This article demonstrates how to integrate Firebase Authentication into a simple React application. Users will be able to register and log in using their email and password.

Step 1: Create a React App

Use Create React App to set up your project:

bash

Copy code
npx create-react-app firebase-auth-example
cd firebase-auth-example

Step 2: Install Firebase

Install Firebase SDK:

bash

Copy code
npm install firebase

Step 3: Configure Firebase

Create a firebaseConfig.js file in the src directory with your Firebase credentials:

javascript

Copy code
// src/firebaseConfig.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);
const auth = getAuth(app);

export { auth };

Step 4: Create the Authentication Component

Create an Auth.js component to handle user registration and login:

javascript

Copy code
// src/Auth.js
import React, { useState } from 'react';
import { auth } from './firebaseConfig';
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';

const Auth = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSignUp = async () => {
        try {
            await createUserWithEmailAndPassword(auth, email, password);
            alert('User registered successfully!');
        } catch (error) {
            alert(error.message);
        }
    };

    const handleLogin = async () => {
        try {
            await signInWithEmailAndPassword(auth, email, password);
            alert('User logged in successfully!');
        } catch (error) {
            alert(error.message);
        }
    };

    return (
        <div>
            <h2>Firebase Authentication</h2>
            <input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button onClick={handleSignUp}>Sign Up</button>
            <button onClick={handleLogin}>Login</button>
        </div>
    );
};

export default Auth;

Step 5: Use the Auth Component

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

javascript

Copy code
// src/App.js
import React from 'react';
import Auth from './Auth';

const App = () => {
    return (
        <div className="App">
            <Auth />
        </div>
    );
};

export default App;