CODEWITHSUNDEEP
reactjstypescriptauthenticationnext.jstrpc
dopez
dopez

Reputation: 1

TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON in Next.JS

I get this error in the authentication call back pag:TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON in Next.JS the code is in src/app/auth-callback/page.tsx and looks like this:

use client'

import { useRouter, useSearchParams } from 'next/navigation'
import { trpc } from '../_trpc/client'

const Page = () => {
  const router = useRouter()

  const searchParams = useSearchParams()
  const origin = searchParams.get('origin')

  trpc.authCallback.useQuery(undefined, {
    onSuccess: ({ success }) => {
      if (success) {
        router.push(origin ? `/${origin}` : '/dashboard')
      }
    },
    onError: err => {
      if (err.data?.code === 'UNAUTHORIZED') {
        router.push('/sign-in')
      }`your text`
    },
  })

  return (
    <div>
      <div>
        <p>You will be redirected automatically.</p>
      </div>
    </div>
  )
}

export default Page

the trpc authCallback function looks like this:

  authCallback: publicProcedure.query(async () => {
    const { getUser } = getKindeServerSession()
    const user = getUser()
    console.log('auth user', user)
    if (!user.id || !user.email) throw new TRPCError({ code: 'UNAUTHORIZED' })

    const dbUser = await db.user.findFirst({
      where: {
        id: user.id,
      },
    })

    if (!dbUser) {
      await db.user.create({
        data: {
          id: user.id,
          email: user.email,
        },
      })
    }

    return { success: true }
  }),

I'm expecting the auth page to redirect the the dashboard page or to the sign-in page if it fails, however the page stucks at loading state due to the error I mentioned.

Upvotes: -1

Views: 587

Answers (2)

ahmad hariri
ahmad hariri

Reputation: 1

I believe there is a typo in your code, I advise you to review everything relative to trpc line by line, I had the same error and after debugging all day I found out that I forgot to add the : to the httpBatchLink url

Upvotes: 0

MaxPower
MaxPower

Reputation: 161

You are getting back an html page response:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

check the network in dev tools to see where its coming from, could be the router.push() target response, but check the network tools first.

Also, not sure about doing the router.push() immediately on success without breaking out of the function, try doing the push then doing a return.

Upvotes: 0

Related Questions