import { useAuth } from "../../contexts/authContext";
import firebase from "firebase/compat/app";
import "firebase/compat/storage";
import "firebase/compat/firestore";

  async function getUser() {
    const userRef = firestore
      .collection("users")
      .doc(firebase.auth().currentUser.uid);
    userRef.get().then(function (doc) {
      if (!doc.exists) { 
        console.log("nothing");
      } else {
        console.log("document", doc.data().name);
      }
    });
  }
  useEffect(() => {
    getUser();
  }, [])
  

import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
User,
} from "firebase/auth";
import { doc, getDoc } from "firebase/firestore";
import React from "react";
import { auth, db } from "../config/firebase";
type ContextType = {
user: User | null;
loading: boolean;
login: (email: string, password: string) => Promise<User>;
register: (email: string, password: string) => Promise<User>;
logOut: () => Promise<void>;
getUserData: () => Promise<void>
};
const AuthContext = React.createContext({} as ContextType);
export function useAuth() {
return React.useContext(AuthContext);
}
export const AuthProvider = ({ children }: React.PropsWithChildren) => {
const [currentUser, setCurrentUser] = React.useState<User | null>(null);
const [loading, setLoading] = React.useState(true);
async function login(email: string, password: string) {
const userCredential = await signInWithEmailAndPassword(auth, email, password);
return userCredential.user;
}
async function register(email: string, password: string) {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
return userCredential.user;
}
async function getUserData() {
if(auth.currentUser) {
console.log("User: ", auth.currentUser);
const userRef = doc(db, "users", auth.currentUser?.uid);
const data = await getDoc(userRef);
if(!data.exists()) console.log("Not Found");
else console.log("User Data Found: ", data.data());
}else console.log("User Not Found");
}
function logOut() {
return signOut(auth);
}
React.useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((user) => {
setCurrentUser(user);
setLoading(false);
});
return unsubscribe;
}, []);
const value = {
user: currentUser,
loading: loading,
login: login,
register: register,
logOut: logOut,
getUserData: getUserData
};
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
);
};

import { useEffect } from "react";
import { useAuth } from "./contexts/AuthProvider";
export default function Data() {
const { login, getUserData, user, logOut, loading} = useAuth();
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
try{
const user = await login("john@email.com", "password");
console.log(user);
}catch(err){
console.log(err);
}
}
useEffect(() => {
getData(); //If user Logged in this will print UserData If not will print User Not Found
}, [user])
async function getData() {
await getUserData();
}
return (
<div>
<form onSubmit={onSubmit}>
<button type="submit" disabled={loading}>Login</button>
</form>
<br />
{user && JSON.stringify(user)}
<br />
<button onClick={getUserData}>Get Data</button>
<br />
<button onClick={logOut}>Logout</button>
</div>
);
};