What is the best way to do session management with CLERK + CONVEX?
5 Replies
I think the video link got cut off there
you should hide information behind auth checks in convex (which all runs server side so it’s easy to hide info) and hiding any special UI is done with dynamic page handling - middleware etc.
in my experience, showing an authenticated UI skeleton that has no data is not my concern, it’s only a concern when you server render privileged content into it. So you should put those checks where you get the privileged data- which generally is convex functions which all have the privilege of being server-side. If you are server rendering content from elsewhere you need the server non-react code as the arbiter.
Jolly Coding
YouTube
STOP using Layouts for Authentication!
Layouts combined with Server Components are awesome, and allow us to make database calls right from out components. However, there is a common pitfall with them when it comes to how we think of their rendering order. This is critical if you are trying to hide specific content using a layout check, as you may find the content can still be exposed...
If you use Convex + Clerk and check for auth in your queries, that all you need to do. Allowing arbitrary access straight to a sql db from a component in nextjs is not what would recommend. I’d use convex with auth. Hope that helps 🙂
heeey buddy! Thanks a lot for your reply!
So... Today I am checking in that way on my (layout.tsx):
'use client'
import { Spinner } from '@/components/ui/spinner'
import { useConvexAuth } from 'convex/react'
import { redirect } from 'next/navigation'
const MainLayout = ({ children }: { children: React.ReactNode }) => {
const { isAuthenticated, isLoading } = useConvexAuth()
if (isLoading) {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-black">
<Spinner color={'white'} size={'lg'} />
</div>
)
}
if (!isAuthenticated) {
return redirect('/')
}
return (
<>
<div className="flex h-full dark:bg-[#1F1F1F]">
<main className="h-full flex-1 overflow-y-auto">{children}</main>
</div>
</>
)
}
export default MainLayout
===========================================================================
Is that right?? 🥹
Even if the client decides not to render certain children, the queries those children make could be made from any Convex client, even outside of your webpage. So you should authenticate your functions without assuming whether the clients are trusted or not