Hey there,

I am trying to create an atom to determine if a user is authenticated before sending them to specific routes on my app. I seem to have an issue with my set up and I can't seem to figure out what is the error in the way I am handling my stores. In my browser I get an error stating

Server Error
TypeError: Cannot read properties of null (reading 'useContext')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
src\store\auth.tsx (5:42) @ authAtom

  3 | export const authAtom = atom({ isAuthenticated: false })
  4 |
> 5 | export const useAuth = () => useAtomValue(authAtom)
    |                                          ^
  6 |
Call Stack
useAuth
src\utils\auth.ts (4:22)
isAuthenticated
src\middleware.tsx (7:30)

I've tried scouring the internet for the reason as to why the value may be coming through as null, but to no avail. Any idea what might be causing this?
My files are as follows:
/store/auth.tsx

import { atom, useAtomValue } from "jotai"

export const authAtom = atom({ isAuthenticated: false })

export const useAuth = () => useAtomValue(authAtom)

/utils/auth.ts

import { useAuth } from "@store/auth"

export const isAuthenticated = () => {
  const auth = useAuth()
  if (!auth) return false
  return auth.isAuthenticated
}

middleware.tsx

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { isAuthenticated } from "@utils/auth"

export function middleware(request: NextRequest) {
  console.log("auth")
  const auth = isAuthenticated()
  if (!auth) {
    return NextResponse.redirect(new URL("/login", request.url))
  }
  return NextResponse.next()
}

// define routes that DO need authentication
export const config = {
  matcher: ["/dashboard"],
}

I am getting an error in my console as well telling me I might be using hooks incorrectly. Any idea how I could better implement this function?