add authentication feature

Author: ngjiayuan

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package-lock.json

@@ -14,8 +14,10 @@
     "@types/node": "^16.18.50",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "firebase": "^10.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

package.json

@@ -1,12 +1,12 @@
-import React from "react";
-import { Container } from "@mui/material";
+import { Box, Container, CssBaseline } from "@mui/material";
 import Navbar from "./components/Navbar";
 
 export default function App() {
   return (
-    <>
+    <Box>
+      <CssBaseline />
       <Navbar />
       <Container>hello world!</Container>
-    </>
+    </Box>
   );
 }

src/App.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "./auth.context";
+
+interface AuthGuardProps {
+  children: ReactNode;
+}
+
+export default function AuthGuard({ children }: AuthGuardProps) {
+  const { user } = useAuth();
+  if (!user) {
+    return <Navigate to="/login" />;
+  }
+  return <>{children}</>;
+}

src/auth/AuthGuard.tsx

@@ -0,0 +1,85 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  signOut,
+  User,
+} from "firebase/auth";
+import { auth } from "../firebase/firebase";
+import { useLocalStorage } from "./useLocalStorage";
+import { useNavigate } from "react-router-dom";
+
+interface AuthContextData {
+  user: User | undefined;
+  error: string;
+  signUp: (email: string, password: string) => void;
+  login: (email: string, password: string) => void;
+  logout: () => void;
+}
+
+interface AuthContextProviderProps {
+  children: ReactNode;
+}
+
+const AuthContext = createContext<AuthContextData>({
+  user: undefined,
+  error: "",
+  signUp: (email: string, password: string) => undefined,
+  login: (email: string, password: string) => undefined,
+  logout: () => undefined,
+});
+
+export function AuthContextProvider({ children }: AuthContextProviderProps) {
+  const navigate = useNavigate();
+  const [user, setUser] = useLocalStorage("user", undefined);
+  const [error, setError] = useState<string>("");
+
+  const signUp = useCallback(
+    (email: string, password: string) => {
+      createUserWithEmailAndPassword(auth, email, password)
+        .then((u) => setUser(u.user))
+        .catch((e) => setError(e.message));
+    },
+    [setUser]
+  );
+
+  const login = useCallback(
+    (email: string, password: string) => {
+      signInWithEmailAndPassword(auth, email, password)
+        .then((u) => {
+          setUser(u.user);
+          navigate("/");
+        })
+        .catch((e) => setError(e.message));
+    },
+    [setUser, navigate]
+  );
+
+  const logout = useCallback(() => {
+    signOut(auth)
+      .then(() => setUser(undefined))
+      .catch((e) => setError(e.message));
+  }, [setUser]);
+
+  const authContextProviderValue = useMemo(
+    () => ({ user, error, signUp, login, logout }),
+    [user, error, signUp, login, logout]
+  );
+
+  return (
+    <AuthContext.Provider value={authContextProviderValue}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

src/auth/auth.context.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { User } from "firebase/auth";
+
+export function useLocalStorage(
+  keyName: string,
+  defaultValue: User | undefined
+) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.localStorage.getItem(keyName);
+      if (value) {
+        return JSON.parse(value);
+      } else {
+        window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
+        return defaultValue;
+      }
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = (newValue: User | undefined) => {
+    try {
+      window.localStorage.setItem(keyName, JSON.stringify(newValue));
+    } catch (err) {}
+    setStoredValue(newValue);
+  };
+
+  return [storedValue, setValue];
+}

src/auth/useLocalStorage.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { Container } from "@mui/material";
+
+interface CenteredContainerProps {
+  children: ReactNode;
+}
+
+export default function CenteredContainer({
+  children,
+}: CenteredContainerProps) {
+  return (
+    <Container
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "90%",
+        flexDirection: "column",
+      }}
+    >
+      {children}
+    </Container>
+  );
+}

src/components/CenteredContainer.tsx

@@ -1,18 +1,29 @@
 import * as React from "react";
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import Menu from "@mui/material/Menu";
+import {
+  AppBar,
+  Box,
+  Button,
+  Container,
+  IconButton,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Typography,
+} from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
-import MenuItem from "@mui/material/MenuItem";
 import AdbIcon from "@mui/icons-material/Adb";
 
 const pages = ["Products", "Pricing", "Blog"];
-const authPages = ["Login", "Sign Up"];
+const authPages = [
+  {
+    name: "Login",
+    link: "/login",
+  },
+  {
+    name: "Sign Up",
+    link: "/signup",
+  },
+];
 const settings = ["Profile", "Account", "Dashboard", "Logout"];
 
 function Navbar() {
@@ -95,6 +106,11 @@ function Navbar() {
                   <Typography textAlign="center">{page}</Typography>
                 </MenuItem>
               ))}
+              {authPages.map((page) => (
+                <MenuItem key={page.name} href={page.link}>
+                  <Typography textAlign="center">{page.name}</Typography>
+                </MenuItem>
+              ))}
             </Menu>
           </Box>
           <AdbIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
@@ -132,11 +148,12 @@ function Navbar() {
             <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
               {authPages.map((page) => (
                 <Button
-                  key={page}
-                  onClick={handleCloseNavMenu}
+                  key={page.name}
+                  // onClick={handleCloseNavMenu}
+                  href={page.link}
                   sx={{ my: 2, color: "white", display: "block" }}
                 >
-                  {page}
+                  {page.name}
                 </Button>
               ))}
             </Box>

src/components/Navbar.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import {
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+} from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+
+interface PasswordFieldProps {
+  password: string;
+  setPassword: (password: string) => void;
+}
+
+export default function PasswordField({
+  password,
+  setPassword,
+}: PasswordFieldProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleClickShowPassword = () => setShowPassword(!showPassword);
+
+  return (
+    <FormControl sx={{ m: 1, width: "25ch" }} variant="outlined">
+      <InputLabel htmlFor="outlined-adornment-password">password</InputLabel>
+      <OutlinedInput
+        id="outlined-adornment-password"
+        type={showPassword ? "text" : "password"}
+        endAdornment={
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              edge="end"
+            >
+              {showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          </InputAdornment>
+        }
+        label="password"
+        value={password}
+        onChange={(e) => setPassword(e.currentTarget.value)}
+      />
+    </FormControl>
+  );
+}