KPC
Kevin Powell - Community•4d ago
jnakamura

Firebase Authentication

I'm trying to incorporate Firebase Authentication to handle simple email/password login to access members-only pages of a website, but although I've incorporated the code to block access to those pages for users who aren't logged in, I am still able to access those pages in a browser when not logged in. Anyone familiar with Firebase Authentication who could help walk me through it?
2 Replies
Kapteyn Universe
Kapteyn Universe•2d ago
I was following this to see if someone with a better knowledge respond since i am not good at backend. It is hard to say anything without seeing the code but are you checking if the user logged in and redirect them to a maybe sign in page if they are not?
clevermissfox
clevermissfox•2d ago
Im not too familiar with making multiple pages but in react we check if user is logged in, and if so show this component otherwise we show the login component Eg 
return (
{ user ? <p>you’re logged in !</p> : <form> <p> login </p> </form>
)
return (
{ user ? <p>you’re logged in !</p> : <form> <p> login </p> </form>
)
Where 
import { useEffect, useState } from "react";
// Firebase
import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from "../firebase-config";

Const [user, setUser] = useState(null);
  useEffect(() => {
    // Listen for authentication state changes
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser); // Set the user if logged in, null otherwise
    });
    // Cleanup subscription on component unmount
    return () => unsubscribe();
  }, []);

  {
    /* Handle user sign out */
  }
  function handleSignOut() {
    signOut(auth).catch((error) => {
      console.error("Error signing out:", error);
    });
  } 
import { useEffect, useState } from "react";
// Firebase
import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from "../firebase-config";

Const [user, setUser] = useState(null);
  useEffect(() => {
    // Listen for authentication state changes
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser); // Set the user if logged in, null otherwise
    });
    // Cleanup subscription on component unmount
    return () => unsubscribe();
  }, []);

  {
    /* Handle user sign out */
  }
  function handleSignOut() {
    signOut(auth).catch((error) => {
      console.error("Error signing out:", error);
    });
  }

Did you find this page helpful?