Merge pull request #120 from arvish-codal/12_June

Authentication & Protected routes using React Router

Author: arvish-codal

react-router-demo/src/App.js

@@ -10,12 +10,16 @@ import { NewProducts } from './components/NewProducts';
 import { Users } from './components/Users';
 import { UserDetails } from './components/UserDetails';
 import { Admin } from './components/Admin';
+import { Profile } from './components/Profile';
+import { AuthProvider } from './components/Auth';
+import { Login } from './components/Login';
+import { RequireAuth } from './components/RequireAuth';
 
 function App() {
   return (
-    <>
+    <AuthProvider>
     <Navbar/>
-    <Routes>
+     <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='about' element={<About />}></Route>
        <Route path='order-summary' element={<OrderSummary />}></Route>
@@ -30,10 +34,18 @@ function App() {
           <Route path=':userId' element={<UserDetails />} />
           <Route path='admin' element={<Admin />} />
        </Route>
-
+       <Route 
+         path='profile' 
+         element={
+           <RequireAuth> 
+              <Profile /> 
+            </RequireAuth>
+          } 
+        />
+       <Route path='login' element={<Login />} />
        <Route path='*' element={<NoMatch />}></Route>
-    </Routes>
-    </>
+     </Routes>
+    </AuthProvider>
   );
 }
 

react-router-demo/src/components/Auth.js

@@ -0,0 +1,26 @@
+import { useState, createContext, useContext } from "react"
+
+const AuthContext = createContext(null)
+
+export const AuthProvider = ({ children }) => {
+    const [user, setUser] = useState(null)
+
+    const login = (user) => {
+        setUser(user)
+    }
+
+    const logout = () => {
+        setUser(null)
+    }
+
+    return (
+        <AuthContext.Provider value = {{ user, login, logout }}>
+            {children}
+        </AuthContext.Provider>
+    )
+}
+
+// Function that returns the value of Auth Context
+export const useAuth = () => {
+    return useContext(AuthContext)
+}

react-router-demo/src/components/Login.js

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { useAuth } from './Auth'
+
+export const Login = () => {
+
+  const [user, setUser] = useState('')
+  const auth = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const redirectPath = location.state?.path || '/'
+
+  const handleLogin = () => {
+    auth.login(user)
+    // Once we set the username, we navigate the user to the home page.
+    navigate(redirectPath, { replace:true })
+  }
+
+  return (
+    <div>
+      <label>
+         Username: 
+         <input type='text' onChange={(e) => setUser(e.target.value)} />
+      </label>
+      <button onClick={handleLogin}>Login</button>
+    </div>
+  )
+}
+

react-router-demo/src/components/Navbar.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
+import { useAuth } from './Auth'
 
 export const Navbar = () => {
 
@@ -10,6 +11,8 @@ export const Navbar = () => {
     }
   }
 
+  const auth = useAuth()
+
 
   return (
     <nav className='primary-nav'>
@@ -22,6 +25,16 @@ export const Navbar = () => {
       <NavLink style = {navLinkStyles}to='products'>
         Products
       </NavLink>
+      <NavLink style = {navLinkStyles}to='profile'>
+        Profile
+      </NavLink>
+      {
+        !auth.user && ( 
+         <NavLink style = {navLinkStyles}to='login'>
+           Login
+         </NavLink>
+        )
+      }
     </nav>
   )
 }

react-router-demo/src/components/Profile.js

@@ -0,0 +1,22 @@
+// Let's display the logged in username in the profile component & also addd a logout button.
+
+import React from 'react'
+import { useAuth } from './Auth'
+import { useNavigate } from 'react-router-dom'
+
+export const Profile = () => {
+
+  const auth = useAuth()
+  const navigate = useNavigate()
+
+  const handleLogout = () => {
+    auth.logout()
+    // After logging out, we redirect the user to the home page
+    navigate('/')
+  }
+
+  return <div>Welcome {auth.user}
+  <button onClick={handleLogout}>Logout</button></div>
+}
+
+

react-router-demo/src/components/RequireAuth.js

@@ -0,0 +1,23 @@
+// NOTE - This file ensures that the Profile component is protected.
+  // Below, we're creating a reusable wrapper component that decides 
+  // if the component can be rendered or if the user has to login first.
+
+import { useAuth } from "./Auth";
+import { Navigate, useLocation } from "react-router-dom";
+
+
+
+export const RequireAuth = ({ children }) => {
+
+  const auth = useAuth()
+  const location = useLocation()
+
+  // If the user is not logged in, it redirects to the login route.   
+  if (!auth.user) {
+    return <Navigate to='/login' state={{ path:location.pathname }} />
+  }
+
+  // If the user is logged in, it renders the children prop   
+  return children
+}
+