How to check for auth with Clerk and Tanstack Start?
Hello,
I followed the guide from Clerk: https://clerk.com/docs/references/tanstack-start/get-auth
The way they are creating createServerFn, seems to be outdated now, and I'm not quite sure how to get the request:
import { createFileRoute, useRouter, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start'
import { getAuth } from '@clerk/tanstack-start/server'
const authStateFn = createServerFn('GET', async (_, { request }) => {
const { userId } = await getAuth(request)
if (!userId) {
// This might error if you're redirecting to a path that doesn't exist yet
// You can create a sign-in route to handle this
throw redirect({
to: '/sign-in/$',
})
}
return { userId }
})
export const Route = createFileRoute('/')({
component: Home,
beforeLoad: () => authStateFn(),
loader: async ({ context }) => {
return { userId: context.userId }
},
})
function Home() {
const state = Route.useLoaderData()
return <h1>Welcome! Your ID is {state.userId}!</h1>
}
Looking at the Tanstack documentation, it looks like we need to add handler and/or validation.
https://tanstack.com/router/latest/docs/framework/react/start/server-functions
How can I get the request into the new way of creating server functions?
TanStack Start: getAuth()
The getAuth() helper retrieves the authentication state allowing you to protect your API routes or gather relevant data.
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
3 Replies
correct-apricot•10mo ago
I think clerk have already updated the guide
correct-apricot•10mo ago
ambitious-aquaOP•10mo ago
That was fast. Really cool!