Nextjs Clerk: The component is not configured correctly

I tried to solve the problems mentioned in the below error message but I failed. How do I solve this error and do “auth-callback with clerk”? – I have used Nextjs & Nextjs Actions, Clerk and Prisma.

Console Error Message
Clerk Error Image

Clerk Error Text:

Uncaught (in promise) Error:
Clerk: The component is not configured correctly. The most likely reasons for this error are:

1. The “/olustur/onizleme” route is not a catch-all route.
   It is recommended to convert this route to a catch-all route, eg: “/olustur/onizleme/[[…rest]]/page.tsx”. Alternatively, you can update the component to use hash-based routing by setting the “routing” prop to “hash”.

2. The component is mounted in a catch-all route, but all routes under “/olustur/onizleme” are protected by the middleware.
   To resolve this, ensure that the middleware does not protect the catch-all route or any of its children. If you are using the “createRouteMatcher” helper, consider adding “(.)” to the end of the route pattern, eg: “/olustur/onizleme(.)”. For more information, see: https://clerk.com/docs/references/nextjs/clerk-middleware#create-route-matcher

---

LoginModal.jsx

import { X } from "lucide-react"
import { SignIn } from "@clerk/nextjs"

export default function LoginModal({ isOpen, setIsOpen }) {
  return (
    <div className={`w-full h-full flex items-center justify-center fixed inset-0 z-[999] bg-[#000] bg-opacity-35 overflow-hidden ${isOpen ? 'flex' : 'hidden'}`}>
      <div className="relative">
        <SignIn />
        <X className="absolute top-4 z-10 right-4 w-4 h-4 cursor-pointer" onClick={() => setIsOpen(false)} />
      </div>
    </div>
  )
}

---

page.jsx (app/auth-callback/page.jsx)

'use client'

import { Loader2 } from "lucide-react"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { useQuery } from "@tanstack/react-query"
import { getAuthStatus } from "./_actions/actions"

export default function Page() {
  const router = useRouter()

  const [configId, setConfigId] = useState(null)

  useEffect(() => {
    const configurationId = localStorage.getItem('configurationId')

    if(configurationId) {
      setConfigId(configurationId)
    }
  }, [])

  const { data } = useQuery({
    queryKey: ['auth-callback'],
    queryFn: async() => await getAuthStatus(),
    retry: true,
    retryDelay: 500,
  })

  console.log(data)

  if(data?.success) {
    if(configId) {
      localStorage.removeItem('configurationId')
      router.push(`/olustur/onizleme?id=${configId}`)
    } else {
      router.push('/')
    }
  }

  return (
    <div className="w-full h-[94vh] flex items-center justify-center text-center">
      <div className="gap-0.5 flex flex-col items-center">
        <Loader2 className="w-8 h-8 animate-spin text-[#4e4e53]" />
        <h2 className="text-xl font-semibold">Giris yapildi..</h2>
        <p className="text-sm">Otomatik olarak yonledirileceksiniz..</p>
      </div>
    </div>
  )
}

---

actions.js app/auth-callback/_actions/actions.js

'use server'

import { db } from '@/app/db'
import { currentUser } from '@clerk/nextjs/server'

export const getAuthStatus = async() => {
  const user = await currentUser()
  console.log(user)

  try {
    if (!user?.id || !user.emailAddresses[0].emailAddress) {
      throw new Error('Gecersiz kullanici bilgileri!')
    }
  
    const existingUser = await db.user.findFirst({
      where: { id: user.id },
    })
  
    if (!existingUser) {
      await db.user.create({
        data: {
          id: user.id,
          email: user.emailAddresses[0].emailAddress,
        },
      })
    }
  
    return { success: true }
  } catch (error) {
    console.log('Error:', error)
    return { success: false }
  }
}