[Bugfix]: Patch Auth Checks in Routing (#7)

Author: Jibola

{{cookiecutter.project_slug}}/frontend/app/lib/slices/authSlice.ts

@@ -117,6 +117,7 @@ export default function Page() {
   const {
     register,
     handleSubmit,
+    unregister,
     formState: { errors },
   } = useForm()
 
@@ -126,14 +127,20 @@ export default function Page() {
     )
   }
 
+  const toggleOauth = (e: any) => {
+    // If previous state enabled oauth, unregister password valdiation
+    if (oauth) unregister('password')
+    setOauth(e)
+  }
+
   useEffect(() => {
     if (searchParams && searchParams.get("oauth")) setOauth(true)
   }, [searchParams])
 
   useEffect(() => {
     if (isLoggedIn) return redirectTo(redirectAfterLogin)
-    if (accessToken && tokenIsTOTP(accessToken)) return redirectTo(redirectTOTP)
-    if (accessToken && tokenParser(accessToken).hasOwnProperty("fingerprint"))
+    if (accessToken && tokenIsTOTP(accessToken) && !oauth) return redirectTo(redirectTOTP)
+    if (accessToken && tokenParser(accessToken).hasOwnProperty("fingerprint") && !oauth)
       return redirectTo(redirectAfterMagic)
   }, [isLoggedIn, accessToken]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -197,7 +204,7 @@ export default function Page() {
             </p>
             <Switch
               checked={oauth}
-              onChange={setOauth}
+              onChange={toggleOauth}
               className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-rose-600 focus:ring-offset-2"
             >
               <span className="sr-only">Use setting</span>

{{cookiecutter.project_slug}}/frontend/app/login/page.tsx

@@ -4,25 +4,37 @@ import { LinkIcon, EnvelopeIcon } from "@heroicons/react/24/outline"
 import { tokenParser } from "../lib/utilities"
 import { token } from "../lib/slices/tokensSlice"
 import { useEffect } from "react"
-import { useAppSelector } from "../lib/hooks"
+import { useAppDispatch, useAppSelector } from "../lib/hooks"
 import Link from "next/link"
 import { RootState } from "../lib/store"
 import { useRouter } from "next/navigation"
+import { loggedIn, logout } from "../lib/slices/authSlice"
 
 const redirectRoute = "/login"
 
 export default function Magic() {
   const router = useRouter()
   const accessToken = useAppSelector((state: RootState) => token(state))
+  const isLoggedIn = useAppSelector((state: RootState) => loggedIn(state))
+  const dispatch = useAppDispatch()
 
   useEffect(() => {
-    if (
-      accessToken &&
-      !tokenParser(accessToken).hasOwnProperty("fingerprint")
-    ) {
-      router.push(redirectRoute)
+    async function checkCredentials(): Promise<void> {
+      if (isLoggedIn) {
+        router.push("/")
+      }
+      if (
+        !(accessToken && tokenParser(accessToken).hasOwnProperty("fingerprint"))
+      ) {
+        router.push(redirectRoute)
+      }
     }
-  }) // eslint-disable-line react-hooks/exhaustive-deps
+    checkCredentials()
+  }, [])
+
+  const removeFingerprint = async () => {
+    await dispatch(logout())
+  }
 
   return (
     <main className="flex min-h-full">
@@ -46,7 +58,7 @@ export default function Magic() {
             </p>
           </div>
 
-          <Link href="/login?oauth=true" className="mt-8 flex">
+          <Link href="/login?oauth=true" className="mt-8 flex" onClick={removeFingerprint}>
             <LinkIcon
               className="text-rose-500 h-4 w-4 mr-1"
               aria-hidden="true"

{{cookiecutter.project_slug}}/frontend/app/magic/page.tsx

@@ -6,19 +6,20 @@ import {
   UserPlusIcon,
 } from "@heroicons/react/24/outline"
 import { useRouter } from "next/navigation"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import UserTable from "../components/moderation/UserTable"
 import CreateUser from "../components/moderation/CreateUser"
+import { useAppSelector } from "../lib/hooks"
+import { isAdmin } from "../lib/slices/authSlice"
 
 const navigation = [
   { name: "Users", id: "USERS", icon: UsersIcon },
   { name: "Create", id: "CREATE", icon: UserPlusIcon },
 ]
-const title = "User moderation"
-const description = "Create, delete and update individual user settings."
 
 export default function Moderation() {
   const [selected, changeSelection] = useState("USERS")
+  const isValidAdmin = useAppSelector((state) => isAdmin(state))
 
   const router = useRouter()
 
@@ -52,6 +53,13 @@ export default function Moderation() {
     ))
   }
 
+  useEffect(() => {
+    async function checkAdmin() {
+      if (!isValidAdmin) redirectTo("/settings")
+    }
+    checkAdmin()
+  }, [])
+
   return (
     <main className="flex min-h-full mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
       <div className="p-5">

{{cookiecutter.project_slug}}/frontend/app/moderation/page.tsx

@@ -1,11 +1,12 @@
 "use client"
 
 import Link from "next/link"
-import { useAppDispatch } from "../lib/hooks"
+import { useAppDispatch, useAppSelector } from "../lib/hooks"
 import { useForm } from "react-hook-form"
-import { recoverPassword } from "../lib/slices/authSlice"
+import { loggedIn, recoverPassword } from "../lib/slices/authSlice"
 import { useRouter } from "next/navigation"
-import Image from "next/image"
+import { useEffect } from "react"
+import { RootState } from "../lib/store"
 
 const redirectRoute = "/"
 const schema = {
@@ -14,6 +15,7 @@ const schema = {
 
 export default function RecoverPassword() {
   const dispatch = useAppDispatch()
+  const isLoggedIn = useAppSelector((state: RootState) => loggedIn(state))
 
   const router = useRouter()
 
@@ -33,6 +35,10 @@ export default function RecoverPassword() {
     router.push(redirectRoute)
   }
 
+  useEffect(() => {
+    if (isLoggedIn) router.push(redirectRoute)
+  })
+
   return (
     <main className="flex min-h-full">
       <div className="flex flex-1 flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">

{{cookiecutter.project_slug}}/frontend/app/recover-password/page.tsx

@@ -48,7 +48,6 @@ export default function ResetPassword() {
   } = useForm()
 
   async function submit(values: any) {
-    console.log(values.password, query)
     await dispatch(resetPassword(values.password, query.get("token") as string))
     await new Promise((resolve) => {
       setTimeout(() => {

{{cookiecutter.project_slug}}/frontend/app/reset-password/page.tsx

@@ -4,24 +4,25 @@ import { KeyIcon, UserCircleIcon, UsersIcon } from "@heroicons/react/24/outline"
 import ValidateEmailButton from "../components/settings/ValidateEmailButton"
 import Profile from "../components/settings/Profile"
 import Security from "../components/settings/Security"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { useAppSelector } from "../lib/hooks"
 import { RootState } from "../lib/store"
-import { profile } from "../lib/slices/authSlice"
+import { loggedIn, profile } from "../lib/slices/authSlice"
 
 const navigation = [
   { name: "Account", id: "ACCOUNT", icon: UserCircleIcon },
   { name: "Security", id: "SECURITY", icon: KeyIcon },
 ]
-const title = "Settings"
-const description = "Update your personal settings, or delete your account."
 
 export default function Settings() {
   const [selected, changeSelection] = useState("ACCOUNT")
   const currentProfile = useAppSelector((state: RootState) => profile(state))
+  const isLoggedIn = useAppSelector((state: RootState) => loggedIn(state))
 
   const router = useRouter()
+  const redirectTo = (to: string) => router.push(to)
+
 
   const renderNavigation = () => {
     return navigation.map((item) => (
@@ -49,6 +50,14 @@ export default function Settings() {
     ))
   }
 
+  useEffect(() => {
+    async function checkLoggedIn() {
+      if (!isLoggedIn) redirectTo("/")
+    }
+    checkLoggedIn()
+  }, [])
+
+
   return (
     <main className="flex min-h-full mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
       <div className="p-5">