Authentication implementation (#108)

* feat: basic nextauth integration * feat: login, logout and session implemented in nextauth * feat(security) stubbed out singup feature. still needs input box validation * fix: removed not-yet-implemented security features - only login is implemented * fix(lint): allowing any type * ui: change iconButton to Button and adjust placements for popovers * ui: add show/hide adornments and add a maxWidth --------- Co-authored-by: Matthew Stankiewicz <[email protected]>
onc-healthit · Aug 12, 2024 · e8e326d · e8e326d
1 parent 7e45900
commit e8e326d
Show file tree

Hide file tree

Showing 17 changed files with 408 additions and 60 deletions.
diff --git a/next-auth.d.ts b/next-auth.d.ts
@@ -0,0 +1,14 @@
+import 'next-auth/jwt'
+
+declare module 'next-auth' {
+  /**
+   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+   */
+  interface Session {
+    user: {
+      /** The user's postal address. */
+      address: string
+    } & DefaultSession['user']
+    jsessionid: string
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "cypress:open:dev": "cypress open --config-file cypress/config/cypress.config.dev.ts",
     "test": "npm run cypress:open:dev",
     "cypress:run:dev": "cypress run --config-file cypress/config/cypress.config.dev.ts",
-    "test:dev": "npm run cypress:run:dev"
+    "test:dev": "npm run cypress:run:dev",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
@@ -24,6 +25,8 @@
     "lodash": "^4.17.21",
     "marked": "^12.0.2",
     "next": "14.2.3",
+    "next-auth": "^4.24.7",
+    "nookies": "^2.5.2",
     "react": "^18",
     "react-countup": "^6.5.3",
     "react-dom": "^18",

diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,6 @@
+import NextAuth from 'next-auth'
+import { authOptions } from '@/lib/auth'
+
+const handler = NextAuth(authOptions)
+
+export { handler as GET, handler as POST }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,9 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'
 import type { Metadata } from 'next'
 import React from 'react'
 import Script from 'next/script'
+import SessionProvider from '@/components/SessionProvider'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
 
 export const metadata: Metadata = {
   title: 'SITE UI 4.0',
@@ -32,7 +35,8 @@ const footer = {
   marginTop: 'auto',
 }
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const session = await getServerSession(authOptions)
   return (
     <html lang="en">
       <head>
@@ -51,22 +55,24 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         />
       </head>
       <body>
-        <ThemeProvider theme={lightTheme}>
-          <CssBaseline>
-            <AppRouterCacheProvider>
-              <Box sx={content}>
-                <CombinedNavAndAppBar />
-                <Box role="main" sx={pageContainer}>
-                  {children}
-                  <Box sx={footer}>
-                    <Ankle />
-                    <Footer />
+        <SessionProvider session={session}>
+          <ThemeProvider theme={lightTheme}>
+            <CssBaseline>
+              <AppRouterCacheProvider>
+                <Box sx={content}>
+                  <CombinedNavAndAppBar />
+                  <Box role="main" sx={pageContainer}>
+                    {children}
+                    <Box sx={footer}>
+                      <Ankle />
+                      <Footer />
+                    </Box>
                   </Box>
                 </Box>
-              </Box>
-            </AppRouterCacheProvider>
-          </CssBaseline>
-        </ThemeProvider>
+              </AppRouterCacheProvider>
+            </CssBaseline>
+          </ThemeProvider>
+        </SessionProvider>
       </body>
     </html>
   )

diff --git a/src/components/SessionProvider.tsx b/src/components/SessionProvider.tsx
@@ -0,0 +1,3 @@
+'use client'
+import { SessionProvider } from 'next-auth/react'
+export default SessionProvider
diff --git a/src/components/shared/nav/CombinedNavAndAppBar.tsx b/src/components/shared/nav/CombinedNavAndAppBar.tsx
@@ -8,9 +8,8 @@ import SiteAppBar from '@/components/shared/nav/app-bar/SiteAppBar'
 import Nav from '@/components/shared/nav/nav/Nav'
 
 export default function CombinedNavAndAppBar() {
-  const [auth, setAuth] = React.useState(false)
   const handleAuthChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setAuth(event.target.checked)
+    //setAuth(event.target.checked)
   }
 
   // TODO: default to false based on DEV_MODE env var
@@ -25,8 +24,8 @@ export default function CombinedNavAndAppBar() {
   return (
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
-      <SiteAppBar open={open} handleDrawerOpen={handleDrawerOpen} auth={auth} />
-      <Nav open={open} handleDrawerClose={handleDrawerClose} auth={auth} handleAuthChange={handleAuthChange} />
+      <SiteAppBar open={open} handleDrawerOpen={handleDrawerOpen} />
+      <Nav open={open} handleDrawerClose={handleDrawerClose} handleAuthChange={handleAuthChange} />
     </Box>
   )
 }