import React, { createContext, useContext, useEffect, useState } from "react";
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
onAuthStateChanged,
} from "firebase/auth";
import { auth, firestore } from "../firebase";
import { createUserDocument } from "../firebase";
import { doc, getDoc } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import { browserSessionPersistence, setPersistence } from "firebase/auth";
const UserContext = createContext();
export const AuthContextProvider = ({ children }) => {
const [user, setUser] = useState(null);
const createUser = (email, password) => {
return createUserWithEmailAndPassword(auth, email, password);
};
async function getRole(uid) {
const docRef = doc(firestore, "users", uid);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
return docSnap.data().role;
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}
const signIn = async ({ email, password }) => {
try {
console.log(email, password);
const result = await signInWithEmailAndPassword(auth, email, password);
const userDocument = await firestore.doc(`users/${result.user.uid}`).get();
setUser({ ...userDocument.data(), uid: result.user.uid });
} catch (error) {
console.log("Error in user provider", error);
}
}
const logout = () => {
sessionStorage.removeItem("authUser");
setUser(null);
return signOut(auth);
};
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((currentUser) =>
setUser(currentUser || null)
);
return () => unsubscribe();
}, []);
return (
<UserContext.Provider value={{ createUser, user, logout, signIn }}>
{children}
</UserContext.Provider>
);
};
export const UserAuth = () => {
return useContext(UserContext);
};
// old user provider:
// import React, { Component, createContext } from "react";
// import { createUserDocument } from "../firebase";
// import { onAuthStateChanged } from "firebase/auth";
// import { auth } from "../firebase";
// export const UserContext = createContext({ user: null });
// class UserProvider extends Component {
// state = { user: null, loading: true };
// componentDidMount = async () => {
// try {
// console.log("UserProvider componentDidMount was called");
// this.unsubscribeFromAuth = onAuthStateChanged(auth, async (user) => {
// console.log("UserProvider onAuthStateChanged was called");
// console.log("user:", user);
// if (user) {
// console.log("UserProvider logging in...")
// sessionStorage.setItem("authUser", JSON.stringify(user));
// const userDocument = await createUserDocument(user);
// console.log("UserProvider userDocument:", userDocument);
// return this.setState({ user: userDocument, loading: false });
// }
// console.log("UserProvider logging out...")
// sessionStorage.removeItem("authUser");
// console.log("UserProvider logged out");
// this.setState({ user: null });
// });
// } catch (error) {
// console.log("Error in user provider", error);
// }
// };
// componentWillUnmount = () => {
// console.log("UserProvider componentWillUnmount was called");
// this.unsubscribeFromAuth();
// };
// render() {
// console.log("UserProvider render was called");
// const { children } = this.props;
// const { user, loading } = this.state;
// //if (loading) return <div>Loading...</div>;
// return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
// }
// }
// export default UserProvider;
