Creating a Blog Website with React, Firebase, and Google Cloud

In this article, we will explore the code of a React app that handles user authentication. The app uses Firebase for authentication and React Router for navigating between pages. Let's see the complete code and a brief description of each part:

Firebase Configuration

To start, we configure Firebase in the app. Here's the code:

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from "firebase/auth";
import { getDatabase, set, ref, update, push, get, child, remove, onValue } from "firebase/database";
import { getStorage, uploadBytes, getDownloadURL, ref as sRef } from "firebase/storage";

// Firebase Configuration
const firebaseConfig = {
  apiKey: "Your_API_Key",
  authDomain: "Your_Domain.firebaseapp.com",
  databaseURL: "https://your-project-default-rtdb.firebaseio.com",
  projectId: "Your_Project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "Your_Messaging_ID",
  appId: "Your_App_ID"
};

// Initialize Firebase app
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const auth = getAuth();
const storage = getStorage();

// Export Firebase functions and objects
export {
  app,
  database,
  auth,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
  set,
  ref,
  update,
  push,
  get,
  child,
  remove,
  onValue,
  storage,
  uploadBytes,
  sRef,
  getDownloadURL
};
  

In this section, we configure Firebase in our React project. This configuration includes API keys and Firebase app information. Additionally, we initialize the Firebase app and export the necessary functions and objects for authentication, database, and storage.

App Component

Now, let's look at the main app component that manages routes and authentication:

import React, { useEffect, useState } from "react";
import Login from './components/Login/Login';
import './App.css';
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home/Home";
import { auth } from "./components/Firebase/Firebase";
import Profile from "./components/Profile/Profile";

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
    });

    return unsubscribe;
  }, []);

  return (
    <Routes>
      <Route
        path="/"
        element={user ? <Home user={user} /> : <Login />}
      />
      <Route
        path="/Profile"
        element={user ? <Profile user={user} /> : <Login />}
      />
    </Routes>
  );
}

export default App;
  

In this component, we define the app's routes using React Router. If the user is authenticated, we allow them access to the "Home" and "Profile" pages. Otherwise, we redirect them to the "Login" page. Authentication is handled using Firebase.

Login Component

Now, let's look at the login component, which allows users to log in using Google:

import React from "react";
import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from "../Firebase/Firebase";

function Login() {
  const handleLogin = () => {
    signInWithPopup(auth, provider)
    .then((result) => {
      const user = result.user;
      console.log(user);
      // Handle authenticated user
    }).catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(errorCode);
      console.log(errorMessage);
      // Handle errors
    });
  };

  return (
    <button onClick={handleLogin}>
      Log in with Google
    </button>
  );
}

export default Login;
  

In this component, we allow users to log in with their Google account using Firebase. Users can click the "Log in with Google" button to initiate the login process.

Other Components

In the complete app, there are other components like the "Home" and "Profile" components that handle specific pages and functionalities of the app.

Conclusion

In this article, we've looked at the basic code of a React app with user authentication. The app uses Firebase to manage authentication and React Router for navigating between different app pages. This is just the beginning, and there are many more features and enhancements you can add to this basic app. For example, you could add more pages, implement user profile management, or further customize the design.

It all depends on your creativity and the specific needs of your project. Using Firebase greatly simplifies implementing authentication and data management. It's a powerful tool for developing dynamic web apps.

If you want more details or want to explore the complete source code of the app, I encourage you to do so. You can find the source code on GitHub. Happy coding!