Is it possible to get clerk token without using server side function or client hook?

[leonardo-motta-deel]

I have a case where I use a nextjs app, but I do not fetch data from next api, I have an external server protected by clerk, and I have a page that is 'use client', but the data is prefetched by a server component, and I wanted an easier way to get clerk token for this use case.

example case:

I have getUsers function that will be used to dehydrate data from server component and also fetch data from client side

export async function getUsers() {
  const url = '...'
  // get clerk token some how, this function will rehydrate from server side, or be re fetched from client side
  const authToken = getToken()

  const response = await fetch(url, {
    headers: {
      Authorization: `Bearer ${authToken}`,
      'Content-Type': 'application/json',
    },
  })

  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`)
  }

  const data = await response.json()

  return {
    status: response.status,
    data,
  }
}

now I have my server component that use this function to pre fetch data

import { HydrationBoundary, dehydrate } from '@tanstack/react-query'

import getQueryClient from '@/lib/query-client'
import { Posts } from '@/components/posts/posts'
import { getUsers } from '@/lib/get-users'

export default async function Page() {
  const queryClient = getQueryClient()

  await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getUsers,
  })

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <Posts />
    </HydrationBoundary>
  )
}

and now I have my client component to render client page

'use client'

import { getUsers } from '@/lib/get-users'
import { useQuery } from '@tanstack/react-query'

const Posts = () => {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: getUsers,
  })

  return (
    <div>
      {data?.data?.map((user) => (
        <div key={user.id}>
          <p>{user.login}</p>
        </div>
      ))}
    </div>
  )
}

since it is called from both client side and server side, I can't use hooks or the server functions provided by clerk, I also tried @clerk/clerk-js but no success, the only approach I found so far was to create a higher order function to get token from client or server side and pass as param to getUsers function, but honestly there most be something better...

[leonardo-motta-deel]

the only solution I have for now is this, if you have something better let me know

import { auth } from '@clerk/nextjs'
import Clerk from '@clerk/clerk-js'

export async function getAuthToken() {
  const isServer = typeof window === 'undefined'

  if (isServer) {
    const { getToken } = auth()
    return await getToken()
  }

  const clerk = new Clerk(process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!)
  await clerk.load()
  return await clerk.session?.getToken()
}

and

import { getAuthToken } from './get-auth-token'

export async function authFetch(
  url: string,
  options?: RequestInit,
): Promise<Response> {
  const token = await getAuthToken()

  if (token) {
    options = {
      ...(options || {}),
      headers: {
        ...(options?.headers || {}),
        Authorization: `Bearer ${token}`,
      },
    }
  }

  return await fetch(url, options)
}

[florinkrasniqi]

I suppose doing "window.Clerk.session.getToken()" does the same thing so there would be no need of importing clerk-js at all or am I missing something?

[wobsoriano]

@florinkrasniqi I think that is correct. If you compare the token given by window.Clerk.session.getToken() and getToken(), they're exactly the same!

[mateussmohamed]

It's not working with import { auth } from '@clerk/nextjs/server'

[pagevault-michael]

@mateussmohamed did you find a work around?

[mateussmohamed]

@pagevault-michael I created two different fetch instances to handle it, one for client side and other to SSR requests.

[jescalan]

https://github.com/orgs/clerk/discussions/3829

[codezuma]

@leonardo-motta-deel did you find any better solution to this .

[ThallesP]

I wonder... could I get the token in the middleware.ts file:

  const response = NextResponse.next()
  const token = await getToken({ template: 'dashboard' }) // only uses the template for server-side auth (leaves the client-side with the default expiration time)

  if (!token || !userId) {
    protect()
  }

  response.headers.set('token', token as string)

and then pass it through headers to pages which have no issues with typeof window !=:

export async function getAuthToken() {
  if (typeof window == 'undefined') {
    const { headers } = await import('next/headers') // next/headers does not care about `typeof window !=`
    const token = headers().get('token')
    if (!token) {
      return undefined
    }
    return token
  }

  const token = window.Clerk.session?.getToken()

  if (!token) {
    return undefined
  }

  return token
}

This could potentially cause issues with expired tokens, but with a higher expiration time, it may be fine for my use case (requests won't take longer than 2-5 minutes, which I could accommodate by increasing the expiration time using JWT templates).