Skip to content

Instantly share code, notes, and snippets.

@deanc
Forked from gragland/use-auth.jsx
Last active Dec 30, 2019
Embed
What would you like to do?
React Hook recipe from https://usehooks.com
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