code: "\/\/ Top level App component\r\nimport React from \"react\";\r\nimport { ProvideAuth } from \".\/use-auth.js\";\r\n\r\nfunction App(props) {\r\n return (\r\n <ProvideAuth>\r\n {\/* \r\n Route components here, depending on how your app is structured.\r\n If using Next.js this would be \/pages\/_app.js\r\n *\/}\r\n <\/ProvideAuth>\r\n );\r\n}\r\n\r\n\/\/ Any component that wants auth state\r\nimport React from \"react\";\r\nimport { useAuth } from \".\/use-auth.js\";\r\n\r\nfunction Navbar(props) {\r\n \/\/ Get auth state and re-render anytime it changes\r\n const auth = useAuth();\r\n\r\n return (\r\n <NavbarContainer>\r\n <Logo \/>\r\n <Menu>\r\n <Link to=\"\/about\">About<\/Link>\r\n <Link to=\"\/contact\">Contact<\/Link>\r\n {auth.user ? (\r\n <Fragment>\r\n <Link to=\"\/account\">Account ({auth.user.email})<\/Link>\r\n <Button onClick={() => auth.signout()}>Signout<\/Button>\r\n <\/Fragment>\r\n ) : (\r\n <Link to=\"\/signin\">Signin<\/Link>\r\n )}\r\n <\/Menu>\r\n <\/NavbarContainer>\r\n );\r\n}\r\n\r\n\/\/ Hook (use-auth.js)\r\nimport React, { useState, useEffect, useContext, createContext } from \"react\";\r\nimport * as firebase from \"firebase\/app\";\r\nimport \"firebase\/auth\";\r\n\r\n\/\/ Add your Firebase credentials\r\nfirebase.initializeApp({\r\n apiKey: \"\",\r\n authDomain: \"\",\r\n projectId: \"\",\r\n appID: \"\"\r\n});\r\n\r\nconst authContext = createContext();\r\n\r\n\/\/ Provider component that wraps your app and makes auth object ...\r\n\/\/ ... available to any child component that calls useAuth().\r\nexport function ProvideAuth({ children }) {\r\n const auth = useProvideAuth();\r\n return <authContext.Provider value={auth}>{children}<\/authContext.Provider>;\r\n}\r\n\r\n\/\/ Hook for child components to get the auth object ...\r\n\/\/ ... and re-render when it changes.\r\nexport const useAuth = () => {\r\n return useContext(authContext);\r\n};\r\n\r\n\/\/ Provider hook that creates auth object and handles state\r\nfunction useProvideAuth() {\r\n const [user, setUser] = useState(null);\r\n \r\n \/\/ Wrap any Firebase methods we want to use making sure ...\r\n \/\/ ... to save the user to state.\r\n const signin = (email, password) => {\r\n return firebase\r\n .auth()\r\n .signInWithEmailAndPassword(email, password)\r\n .then(response => {\r\n setUser(response.user);\r\n return response.user;\r\n });\r\n };\r\n\r\n const signup = (email, password) => {\r\n return firebase\r\n .auth()\r\n .createUserWithEmailAndPassword(email, password)\r\n .then(response => {\r\n setUser(response.user);\r\n return response.user;\r\n });\r\n };\r\n\r\n const signout = () => {\r\n return firebase\r\n .auth()\r\n .signOut()\r\n .then(() => {\r\n setUser(false);\r\n });\r\n };\r\n\r\n const sendPasswordResetEmail = email => {\r\n return firebase\r\n .auth()\r\n .sendPasswordResetEmail(email)\r\n .then(() => {\r\n return true;\r\n });\r\n };\r\n\r\n const confirmPasswordReset = (code, password) => {\r\n return firebase\r\n .auth()\r\n .confirmPasswordReset(code, password)\r\n .then(() => {\r\n return true;\r\n });\r\n };\r\n\r\n \/\/ Subscribe to user on mount\r\n \/\/ Because this sets state in the callback it will cause any ...\r\n \/\/ ... component that utilizes this hook to re-render with the ...\r\n \/\/ ... latest auth object.\r\n useEffect(() => {\r\n const unsubscribe = firebase.auth().onAuthStateChanged(user => {\r\n if (user) {\r\n setUser(user);\r\n } else {\r\n setUser(false);\r\n }\r\n });\r\n\r\n \/\/ Cleanup subscription on unmount\r\n return () => unsubscribe();\r\n }, []);\r\n \r\n \/\/ Return the user object and auth methods\r\n return {\r\n user,\r\n signin,\r\n signup,\r\n signout,\r\n sendPasswordResetEmail,\r\n confirmPasswordReset\r\n };\r\n}"
0 commit comments