Firebase email password authentication in React web app

Author: Prasoon

package-lock.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "firebase": "^9.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"
   },

package.json

@@ -1,23 +1,14 @@
-import logo from './logo.svg';
-import './App.css';
+import Auth from "./components/auth";
+import Dashboard from "./components/dashboard";
+import { useUserContext } from "./context/userContext";
 
 function App() {
+  const { user, loading, error } = useUserContext();
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {error && <p className="error">{error}</p>}
+      {loading ? <h2>Loading...</h2> : <> {user ? <Dashboard /> : <Auth />} </>}
     </div>
   );
 }

src/App.css

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import Signin from "./signin";
+import Signup from "./signup";
+
+const Auth = () => {
+  const [index, setIndex] = useState(false);
+  const toggleIndex = () => {
+    setIndex((prevState) => !prevState);
+  };
+  return (
+    <div className="container">
+      {!index ? <Signin /> : <Signup />}
+      <p onClick={toggleIndex}>
+        {!index ? "New user? Click here " : "Already have an acount?"}
+      </p>
+    </div>
+  );
+};
+
+export default Auth;

src/App.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { useUserContext } from "../context/userContext";
+
+const Dashboard = () => {
+  const { user, logoutUser } = useUserContext();
+  return (
+    <div>
+      <h1>Dashboard </h1>
+      <h2>Name : {user.displayName}</h2>
+      <h2>Email : {user.email}</h2>
+      <button onClick={logoutUser}>Log out</button>
+    </div>
+  );
+};
+
+export default Dashboard;

src/App.test.js

@@ -0,0 +1,37 @@
+import React, { useRef } from "react";
+import { useUserContext } from "../context/userContext";
+
+const Signin = () => {
+  const emailRef = useRef();
+  const psdRef = useRef();
+  const { signInUser, forgotPassword } = useUserContext();
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const email = emailRef.current.value;
+    const password = psdRef.current.value;
+    if (email && password) signInUser(email, password);
+  };
+
+  const forgotPasswordHandler = () => {
+    const email = emailRef.current.value;
+    if (email)
+      forgotPassword(email).then(() => {
+        emailRef.current.value = "";
+      });
+  };
+
+  return (
+    <div className="form">
+      <h2> Login </h2>
+      <form onSubmit={onSubmit}>
+        <input placeholder="Email" type="email" ref={emailRef} />
+        <input placeholder="Password" type="password" ref={psdRef} />
+        <button type="submit">Sign In</button>
+        <p onClick={forgotPasswordHandler}>Forgot Password?</p>
+      </form>
+    </div>
+  );
+};
+
+export default Signin;

src/components/auth.js

@@ -0,0 +1,31 @@
+import React, { useRef } from "react";
+import { useUserContext } from "../context/userContext";
+
+const Signup = () => {
+  const emailRef = useRef();
+  const nameRef = useRef();
+  const psdRef = useRef();
+  const { registerUser } = useUserContext();
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const email = emailRef.current.value;
+    const name = nameRef.current.value;
+    const password = psdRef.current.value;
+    if (email && password && name) registerUser(email, password, name);
+  };
+
+  return (
+    <div className="form">
+      <h2> New User</h2>
+      <form onSubmit={onSubmit}>
+        <input placeholder="Email" type="email" ref={emailRef} />
+        <input placeholder="Name" type="name" ref={nameRef} />
+        <input placeholder="Password" type="password" ref={psdRef} />
+        <button type="submit">Register</button>
+      </form>
+    </div>
+  );
+};
+
+export default Signup;

src/components/dashboard.js

@@ -0,0 +1,78 @@
+import { createContext, useContext, useState } from "react";
+import {
+  signInWithEmailAndPassword,
+  createUserWithEmailAndPassword,
+  onAuthStateChanged,
+  signOut,
+  updateProfile,
+  sendPasswordResetEmail,
+} from "firebase/auth";
+import { auth } from "../firebase";
+
+export const UserContext = createContext({});
+
+export const useUserContext = () => {
+  return useContext(UserContext);
+};
+
+export const UserContextProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useState(() => {
+    setLoading(true);
+    const unsubscribe = onAuthStateChanged(auth, (res) => {
+      if (res) {
+        setUser(res);
+      } else {
+        setUser(null);
+      }
+      setError("");
+      setLoading(false);
+    });
+    return unsubscribe;
+  }, []);
+
+  const registerUser = (email, password, name) => {
+    setLoading(true);
+    createUserWithEmailAndPassword(auth, email, password)
+      .then(() =>
+        updateProfile(auth.currentUser, {
+          displayName: name,
+        })
+      )
+      .then((res) => console.log(res))
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  };
+
+  const signInUser = (email, password) => {
+    setLoading(true);
+    signInWithEmailAndPassword(auth, email, password)
+      .then((res) => console.log(res))
+      .catch((err) => setError(err.code))
+      .finally(() => setLoading(false));
+  };
+
+  const logoutUser = () => {
+    signOut(auth);
+  };
+
+  const forgotPassword = (email) => {
+    return sendPasswordResetEmail(auth, email);
+  };
+
+  const contextValue = {
+    user,
+    loading,
+    error,
+    signInUser,
+    registerUser,
+    logoutUser,
+    forgotPassword,
+  };
+  return (
+    <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>
+  );
+};

src/components/signin.js

@@ -0,0 +1,14 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyCzGKXxJ8IUpYRa5xqQkWZOmUChSAlVKMo",
+  authDomain: "fir-auth-react-e8399.firebaseapp.com",
+  projectId: "fir-auth-react-e8399",
+  storageBucket: "fir-auth-react-e8399.appspot.com",
+  messagingSenderId: "962605851630",
+  appId: "1:962605851630:web:8a54bce7d9047760a9e4ff",
+};
+
+export const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);

src/components/signup.js

@@ -1,13 +1,89 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.App {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+input {
+  padding: 12px;
+  margin: 12px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  box-shadow: 0 1px 4px #ccc;
+  border-radius: 6px;
+  font-size: 18px;
+  width: 93%;
+}
+
+button {
+  background-color: teal;
+  border: none;
+  color: white;
+  padding: 12px;
+  margin: 12px 0;
+  box-shadow: 0 1px 6px #ccc;
+  width: 100%;
+  border-radius: 6px;
+  font-size: 18px;
+}
+
+.container {
+  box-shadow: 0 1px 6px #ccc;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 400px;
+  padding: 22px;
+}
+
+.container > p {
+  cursor: pointer;
+  margin: 12px;
+}
+
+.form {
+  width: 100%;
+}
+
+.form > h2 {
+  text-align: center;
+}
+
+.form > form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.form > form > p {
+  cursor: pointer;
+}
+
+.error {
+  background-color: tomato;
+  color: white;
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-weight: bold;
+  max-width: 400px;
+  margin-bottom: 18px;
+}