Step 1: Set up Firebase in Your Project

 

To get started with Firebase authentication in your project, you'll first need to set up Firebase. If you haven't already done so, follow these steps:

1. Go to the Firebase console.
2. Click on "Add project" and follow the instructions to create a new project.
3. Once your project is created, click on the "Web" icon to add Firebase to your web application. You'll receive a configuration object that you will need to use in your project.

 

Step 2: Install Firebase SDK

 

Add Firebase to your project by installing the Firebase SDK. If you are using npm, you can do this with the following command:

npm install firebase

 

Step 3: Initialize Firebase in Your Application

 

In your application, initialize Firebase using the configuration details provided in the Firebase console. Create a firebase.js or firebaseConfig.js file and add the following code:

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);

Remember to replace the placeholders with your actual Firebase project config values.

 

Step 4: Set Up Authentication in Firebase Console

 

Make sure to enable the authentication methods you want to use:

1. In the Firebase console, select "Authentication" from the left navigation.
2. Click "Get Started" and then "Sign-in Method".
3. Enable your preferred sign-in providers (e.g., Email/Password, Google, Facebook, etc.).

 

Step 5: Implement Login/Signup Functionality

 

Create a simple authentication flow in your application using Firebase's authentication services. Here's an example using Email/Password authentication:

import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebaseConfig";

// Signup function
const signupUser = async (email, password) => {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log("User signed up:", userCredential.user);
  } catch (error) {
    console.error("Error signing up:", error.message);
  }
};

// Login function
const loginUser = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("User logged in:", userCredential.user);
  } catch (error) {
    console.error("Error logging in:", error.message);
  }
};

Integrate these functions into your frontend as needed.

 

Step 6: Restrict Access to Logged-in Users Only

 

Now you need to restrict access to certain parts of your application to only logged-in users. You can achieve this by checking the authentication state in your components or application.

Here's an example using React:

import React, { useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./firebaseConfig";

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

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  if (user) {
    return 
Welcome, {user.email}
;
  } else {
    return 
Please Log In to access this page
;
  }
}

export default App;

This example listens for changes in authentication state using onAuthStateChanged and updates the UI accordingly.

 

Step 7: Test Your Implementation

 

Finally, test your application to ensure that only logged-in users can access restricted areas. Log in and log out using your implemented functions and confirm the different behaviors in your application.

By following these steps, you can effectively restrict access to logged-in users in your Firebase-enabled application.