Created
May 24, 2023 19:47
-
-
Save ali-sabry/d49c0f3d6b95ba434c10ddd0d5d1bf21 to your computer and use it in GitHub Desktop.
This custom hook allows you a simple and convenient way to access Firebase auth features in your app.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect } from "react"; | |
import { initializeApp } from "firebase/app"; | |
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth"; | |
const firebaseConfig = { | |
//... Your config object here | |
}; | |
const app = initializeApp(firebaseConfig); | |
const auth = getAuth(app); | |
const useAuth = () => { | |
const [user, setUser] = useState(null); | |
const [loading, setLoading] = useState(true); | |
const [error, setError] = useState(null); | |
const signUp = (email, password) => { | |
setLoading(true); | |
createUserWithEmailAndPassword(auth, email, password) | |
.then((userCredential) => { | |
setUser(userCredential.user); | |
setLoading(false); | |
setError(null); | |
}) | |
.catch((error) => { | |
setUser(null); | |
setLoading(false); | |
setError(error.message); | |
}); | |
}; | |
const signIn = (email, password) => { | |
setLoading(true); | |
signInWithEmailAndPassword(auth, email, password) | |
.then((userCredential) => { | |
setUser(userCredential.user); | |
setLoading(false); | |
setError(null); | |
}) | |
.catch((error) => { | |
setUser(null); | |
setLoading(false); | |
setError(error.message); | |
}); | |
}; | |
const signOut = () => { | |
setLoading(true); | |
auth.signOut() | |
.then(() => { | |
setUser(null); | |
setLoading(false); | |
setError(null); | |
}) | |
.catch((error) => { | |
setUser(null); | |
setLoading(false); | |
setError(error.message); | |
}); | |
}; | |
useEffect(() => { | |
const unsubscribe = auth.onAuthStateChanged((user) => { | |
if (user) { | |
setUser(user); | |
} else { | |
setUser(null); | |
} | |
setLoading(false); | |
}); | |
return () => unsubscribe(); | |
}, [auth]); | |
return { user, loading, error, auth, signUp, signIn, signOut }; | |
}; | |
const App = () => { | |
const { user, loading, error, signUp, signIn, signOut } = useAuth(); | |
if (loading) { return <div>Loading...</div> }; | |
if (error) { return <div>Error: {error}</div> }; | |
if (user) { | |
return ( | |
<> | |
<h1>Welcome {user.displayName || user.email}</h1> | |
<button onClick={signOut}>Sign Out</button> | |
</> | |
); | |
} | |
const signingHandler = (e, action) => { | |
e.preventDefault(); | |
const email = e.target.email.value; | |
const password = e.target.password.value; | |
if (action === "signin") { | |
signIn(email, password) | |
} else if (action === "signup") { | |
signUp(email, password) | |
} else return; | |
} | |
return ( | |
<> | |
<h1>Please Sign In</h1> | |
<form onSubmit={(e) => signingHandler(e, "signin")}> | |
<label>Email:</label> | |
<input type="email" name="email" /> | |
<label>Password:</label> | |
<input type="password" name="password" /> | |
<button type="submit">Sign In</button> | |
</form> | |
<p>Don't have an account? Sign up below.</p> | |
<form onSubmit={(e) => signingHandler(e, "signup")}> | |
<label>Email:</label> | |
<input type="email" name="email" /> | |
<label>Password:</label> | |
<input type="password" name="password" /> | |
<button type="submit">Sign Up</button> | |
</form> | |
</> | |
); | |
}; | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment