feat: Add next-auth middleware to protect pages

__tests__/middleware.test.js

@@ -0,0 +1,10 @@
+jest.mock('next-auth/middleware', () => ({}))
+
+import { config } from '../middleware'
+import { SETTINGS_ACCOUNT_PATH } from '../constants/index.ts'
+
+describe('Main Middleware', () => {
+  test('expect config to match correct paths', () => {
+    expect(config.matcher).toStrictEqual([SETTINGS_ACCOUNT_PATH])
+  })
+})

__tests__/pages/api/auth/[...nextauth].test.js

@@ -4,6 +4,7 @@
 
 jest.mock('next-auth')
 jest.mock('../../../../helpers/nextAuth.ts')
+import { LOGIN_PATH } from '../../../../constants'
 import { providers, signIn, jwt, session } from '../../../../helpers/nextAuth'
 import nextAuthMiddleware from '../../../../pages/api/auth/[...nextauth]'
 import NextAuth from 'next-auth'
@@ -26,7 +27,9 @@ describe('next-auth middleware', () => {
         jwt,
         session
       },
-      secret: process.env.SESSION_SECRET
+      pages: {
+        signIn: LOGIN_PATH
+      }
     }
 
     res.status.mockReturnValue(res)

constants/index.ts

@@ -10,6 +10,7 @@ export const DISCORD_PATH = 'https://discord.gg/c0d3'
 export const LOGIN_PATH = '/login'
 export const SIGNUP_PATH = '/signup'
 export const EXERCISES_PATH = '/exercises'
+export const SETTINGS_ACCOUNT_PATH = '/settings/account'
 
 // Color
 export const PRIMARY_COLOR_HEX = '#5440d8'

middleware.ts

@@ -0,0 +1,5 @@
+import { SETTINGS_ACCOUNT_PATH } from './constants'
+
+export { default } from 'next-auth/middleware'
+
+export const config = { matcher: [SETTINGS_ACCOUNT_PATH] }

pages/api/auth/[...nextauth].ts

@@ -3,6 +3,7 @@ import { NextApiResponse } from 'next'
 import { LoggedRequest } from '../../../@types/helpers'
 import { Request, Response } from 'express'
 import { signIn, providers, jwt, session } from '../../../helpers/nextAuth'
+import { LOGIN_PATH } from '../../../constants'
 
 export default (
   req: LoggedRequest & Request,
@@ -15,5 +16,7 @@ export default (
       jwt,
       session
     },
-    secret: process.env.SESSION_SECRET
+    pages: {
+      signIn: LOGIN_PATH
+    }
   })

pages/login.tsx

@@ -16,6 +16,7 @@ import { signIn, SignInResponse } from 'next-auth/react'
 import Image from 'next/image'
 import { withGetApp, GetAppProps } from '../graphql'
 import AlreadyLoggedIn from '../components/AlreadyLoggedIn'
+import { CURRICULUM_PATH } from '../constants'
 
 type Values = {
   username: string
@@ -38,7 +39,7 @@ const initialValues = {
 }
 
 const ErrorMessages: React.FC<ErrorDisplayProps> = ({ loginErrors }) => {
-  if (!loginErrors || !loginErrors.length) return <></>
+  if (!loginErrors?.length) return <></>
   const errorMessages = loginErrors.map((message, idx) => {
     return <Alert key={idx} alert={{ id: -1, text: message, type: 'urgent' }} />
   })
@@ -99,7 +100,7 @@ export const Login: React.FC<LoginFormProps> = ({
         </div>
       </Form>
     </Formik>
-    <div className={`d-grid mb-3`}>
+    <div className="d-grid mb-3">
       <div className={styles.orContainer}>
         <hr className={styles.lineLeft} />
         <span>OR</span>
@@ -153,8 +154,11 @@ const LoginPage: React.FC<GetAppProps> & WithLayout = ({
 
     if (ok && !error) {
       window.localStorage.setItem('loggedIn', 'true')
-      const { next } = router.query
-      router.push(next ? (next as string) : '/curriculum')
+      const { next, callbackUrl } = router.query
+      const path = next || callbackUrl
+      const redirectTo = path || CURRICULUM_PATH
+
+      router.push(redirectTo as string)
     }
 
     setIsLoading(false)