-
-
Save deanc/76a3de4592c70b36627eb3eb33dca011 to your computer and use it in GitHub Desktop.
React Hook recipe from https://usehooks.com
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 React, { useState, useEffect, useContext, createContext } from "react"; | |
import * as firebase from "firebase/app"; | |
import "firebase/auth"; | |
import firebaseConfig from "../config/firebase"; | |
// Add your Firebase credentials | |
firebase.initializeApp(firebaseConfig); | |
const AuthContext = createContext(); | |
// Provider component that wraps your app and makes auth object ... | |
// ... available to any child component that calls useAuth(). | |
export function ProvideAuth({ children }) { | |
const auth = useProvideAuth(); | |
return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>; | |
} | |
// Hook for child components to get the auth object ... | |
// ... and re-render when it changes. | |
export const useAuth = () => { | |
return useContext(AuthContext); | |
}; | |
// Provider hook that creates auth object and handles state | |
function useProvideAuth() { | |
const [user, setUser] = useState(null); | |
const [initialized, setInitialized] = useState(false); | |
// Wrap any Firebase methods we want to use making sure ... | |
// ... to save the user to state. | |
const signIn = (email, password) => { | |
return firebase | |
.auth() | |
.signInWithEmailAndPassword(email, password) | |
.then(response => { | |
setUser(response.user); | |
return response.user; | |
}); | |
}; | |
const signInWithGoogle = () => { | |
firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider()); | |
}; | |
const signUp = (email, password) => { | |
return firebase | |
.auth() | |
.createUserWithEmailAndPassword(email, password) | |
.then(response => { | |
setUser(response.user); | |
return response.user; | |
}); | |
}; | |
const signOut = () => { | |
return firebase | |
.auth() | |
.signOut() | |
.then(() => { | |
setUser(false); | |
}); | |
}; | |
const sendPasswordResetEmail = email => { | |
return firebase | |
.auth() | |
.sendPasswordResetEmail(email) | |
.then(() => { | |
return true; | |
}); | |
}; | |
const confirmPasswordReset = (code, password) => { | |
return firebase | |
.auth() | |
.confirmPasswordReset(code, password) | |
.then(() => { | |
return true; | |
}); | |
}; | |
// Subscribe to user on mount | |
// Because this sets state in the callback it will cause any ... | |
// ... component that utilizes this hook to re-render with the ... | |
// ... latest auth object. | |
useEffect(() => { | |
const unsubscribe = firebase.auth().onAuthStateChanged(user => { | |
if (user) { | |
setUser(user); | |
} else { | |
setUser(false); | |
} | |
setInitialized(true); | |
}); | |
// Cleanup subscription on unmount | |
return () => unsubscribe(); | |
}, []); | |
// Return the user object and auth methods | |
return { | |
initialized, | |
user, | |
signIn, | |
signInWithGoogle, | |
signUp, | |
signOut, | |
sendPasswordResetEmail, | |
confirmPasswordReset | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment