custom auth hook

canonical · Jul 22, 2024 · e729508 · e729508
1 parent 9d0a568
commit e729508
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 32 deletions.
diff --git a/ui/src/app/auth/authContext.tsx b/ui/src/app/auth/authContext.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { createContext, useContext, useState, useEffect } from 'react';
+import { Dispatch, SetStateAction } from 'react';
+import { User } from '../types';
+import { useCookies } from 'react-cookie';
+import { jwtDecode } from 'jwt-decode';
+import { useRouter } from 'next/navigation';
+
+type AuthContextType = {
+    user: User | null
+    setUser: Dispatch<SetStateAction<User | null>>
+}
+
+const AuthContext = createContext<AuthContextType>({ user: null, setUser: () => { } });
+
+export const AuthProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
+    const [user, setUser] = useState<User | null>(null);
+    const router = useRouter();
+
+    useEffect(() => {
+        const token = cookies.user_token;
+        if (token) {
+            let userObject = jwtDecode(cookies.user_token) as User
+            setUser(userObject);
+        } else {
+            router.push('/login');
+        }
+    }, [cookies.user_token, router]);
+
+    return (
+        <AuthContext.Provider value={{ user, setUser }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/ui/src/app/globals.scss b/ui/src/app/globals.scss
@@ -58,9 +58,3 @@
 .certificate-info p {
     margin: 4px 0;
 }
-
-.sidenav-bottom-ul {
-  bottom: $spv--x-large;
-  position: absolute;
-  width: 15rem;
-}
diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import './globals.scss'
 import Navigation from "@/app/nav";
-
+import { AuthProvider } from "./auth/authContext";
 
 export const metadata: Metadata = {
   title: "GoCert",
@@ -19,9 +19,11 @@ export default function RootLayout({
         <link rel="icon" href="/favicon.ico" sizes="any" />
       </head>
       <body>
-        <Navigation>
-          {children}
-        </Navigation>
+        <AuthProvider>
+          <Navigation>
+            {children}
+          </Navigation>
+        </AuthProvider>
       </body>
     </html>
   );

diff --git a/ui/src/app/login.tsx b/ui/src/app/login.tsx
@@ -1,24 +1,25 @@
-import { jwtDecode } from "jwt-decode";
-import { useState } from "react";
-import { useCookies } from "react-cookie"
+import { useAuth } from "./auth/authContext";
 
-type UserObject = {
-    exp: number
-    id: number
-    permissions: number
-    username: string
-}
-
-export function Login() {
-    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
-    var userObject: UserObject | null = null
-    if (cookies.user_token) {
-        userObject = jwtDecode(cookies.user_token)
-    }
+export function AccountTab() {
+    const authDetails = useAuth()
     return (
         <>
             {
-                cookies.user_token ? <p>{userObject?.username}</p> : <a className="p-button u-float-right" style={{ marginRight: "5px" }} href="login">Login</a>
+                authDetails.user ?
+                    <div className="p-side-navigation__item" aria-current="false">
+                        <i className="p-icon--user is-light p-side-navigation__icon"></i>
+                        <span className="p-side-navigation__label">
+                            <span className="p-side-navigation__label">{authDetails.user.username}</span>
+                        </span>
+                        <i className="p-icon--menu" style={{ marginLeft: "auto", marginTop: "auto", marginBottom: "auto" }}></i>
+                    </div>
+                    :
+                    <a className="p-side-navigation__link" href="/login" aria-current="false">
+                        <i className="p-icon--user is-light p-side-navigation__icon"></i>
+                        <span className="p-side-navigation__label">
+                            <span className="p-side-navigation__label">Login</span>
+                        </span>
+                    </a>
             }
         </>)
 }
diff --git a/ui/src/app/login/page.tsx b/ui/src/app/login/page.tsx
@@ -4,8 +4,10 @@ import { useMutation } from "react-query"
 import { login } from "../queries"
 import { useState, ChangeEvent } from "react"
 import { useCookies } from "react-cookie"
+import { useRouter } from "next/navigation"
 
 export default function LoginPage() {
+    const router = useRouter()
     const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
     const mutation = useMutation(login, {
         onSuccess: (e) => {
@@ -15,6 +17,7 @@ export default function LoginPage() {
                 secure: true,
                 expires: new Date(new Date().getTime() + 60 * 60 * 1000),
             })
+            router.push('/certificate_requests')
         },
         onError: (e: Error) => {
             setErrorText(e.message)

diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx
@@ -4,7 +4,7 @@ import { SetStateAction, Dispatch, useState, useEffect } from "react"
 import { QueryClient, QueryClientProvider } from "react-query";
 import Image from "next/image";
 import { Aside, AsideContext } from "./aside";
-import { Login } from "./login"
+import { AccountTab } from "./login"
 
 export function SideBar({ sidebarVisible, setSidebarVisible }: { sidebarVisible: boolean, setSidebarVisible: Dispatch<SetStateAction<boolean>> }) {
     const [activeTab, setActiveTab] = useState<string>("");
@@ -27,7 +27,7 @@ export function SideBar({ sidebarVisible, setSidebarVisible }: { sidebarVisible:
                     <div className="p-panel__content">
                         <div className="p-side-navigation--icons" id="drawer-icons">
                             <nav aria-label="Main">
-                                <ul className="p-side-navigation__list sidenav-top-ul">
+                                <ul className="p-side-navigation__list">
                                     <li className="p-side-navigation__item">
                                         <a className="p-side-navigation__link" href="/certificate_requests" aria-current={activeTab === "certificate_requests" ? "page" : "false"} >
                                             <i className="p-icon--security is-light p-side-navigation__icon"></i>
@@ -37,9 +37,9 @@ export function SideBar({ sidebarVisible, setSidebarVisible }: { sidebarVisible:
                                         </a>
                                     </li>
                                 </ul>
-                                <ul className="p-side-navigation__list sidenav-bottom-ul">
-                                    <li className="p-side-navigation__item">
-                                        <Login />
+                                <ul className="p-side-navigation__list" style={{ bottom: 0, position: "absolute", width: "100%" }}>
+                                    <li className="p-side-navigation__item" >
+                                        <AccountTab />
                                     </li>
                                 </ul>
                             </nav>

diff --git a/ui/src/app/types.ts b/ui/src/app/types.ts
@@ -2,4 +2,11 @@ export type CSREntry = {
     id: number,
     csr: string,
     certificate: string
+}
+
+export type User = {
+    exp: number
+    id: number
+    permissions: number
+    username: string
 }