Trying to implement a permissionless home and user profile page

[SolessChong]

Scenario

I'm trying to implement a placeholder user for home and user profile page.

auth-context.tsx

// ... (other imports)
import { useRouter } from 'next/router';
...
export function AuthContextProvider({
  children
}: AuthContextProviderProps): JSX.Element {
...

  // Use useRouter from next/router to determine the current route
  const router = useRouter();

  // Placeholder user object
  const placeholderUser: User = useMemo(() => ({
    id: 'placeholder',
  }), []);

  useEffect(() => {
    // Check if the current page is the homepage or user profile homepage
    const isHomeOrUserProfile = router.pathname === '/' || router.pathname === '/[id]';
    
    // If it is, set the user state to the placeholder user
    if (isHomeOrUserProfile) {
      setUser(placeholderUser);
      setLoading(false);
    }
  }, [router.pathname, placeholderUser]);

  // Modify the handleUserAuth function to update the placeholder user when explicitly logging in
  const handleUserAuth = (authUser: AuthUser | null): void => {
    setLoading(true);

    if (authUser) {
      manageUser(authUser);
    } else if (!router.pathname.startsWith('/[id]')) {
      // Only set to null if not on a user profile page
      setUser(null);
      setLoading(false);
    }
  };

...
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

Problem

It loads the placeholder successfully on homepage, yet the firebase auth throws 401.

Question

Could someone please point me to the right way get auth info out of this placeholder user for firebase?

[Ketchupchh]

You would need to update the firestore and storage rules to allow unauthorized/logged out users to have read permissions and then you would need to remove ProtectedLayout from the home and user page. This way you wouldn't need to load a dummy user.