I use Supabase for my auth, I previously used middleware to protect pages, based on this documentation: https://supabase.com/docs/guides/auth/server-side/creating-a-client

However, I recently learned/ read that middleware protection is not a 100% secure way to protect my pages. I also am using cacheComponents.

I have come up with this solution and wanted to run it by everyone here. I now use middleware + this solution below + user checking in my database calls. Feel free to give feedback on my solution, preferably security focused!

first, I have made a verifyAuth function similar to NextJs docs: https://nextjs.org/docs/app/guides/authentication#authorization

export const verifyAuth = cache(async () => {
    const supabase = await createSupabaseServerClient()
    const user = await supabase.auth.getUser()

    if (!user) {
        console.log("no user fail")
        redirect("/admin/login?=unauthorized")
    }
    if (user && user.data.user?.id !== "specific id, because for now I have only one user (admin) and if someone somehow made an account, this is extra protection") {
        console.log("incorrect user")
        await supabase.auth.signOut()
        redirect("/admin/login?=unauthorized")
    }
    console.log("authenticated!")
})

next, I have a simple component that calls my verifyAuth function, and passes down the children:

export default async function VerifyAuth({children}: { children: ReactNode }) {
    await verifyAuth()
    return <>{children}</>;
}

finally, In my protect pages suspense, I wrap the Components I want to protect in the VerifyAuth component:

export default async function AdminDashboard() {
    return (
        (
            <Stack align={"center"} p={"lg"}>
                <Suspense fallback={<TableLoading/>}>
                    <VerifyAuth>
                        <TableWrapper/>
                    </VerifyAuth>
                </Suspense>
            </Stack>
        )
    )
}