I have a next JS project and for the authentication it uses Clerk. Now I'm having a trouble I can't run clerk in Hosted and my Local environment both. So I have a Development instance of Clerk and I have used that one in my Website Hosted Environment, and I tried to use the same in my local environment.
I have used correct keys...
I got this error:
Clerk: unable to resolve handshake: Error: fetch failed
at context.fetch (C:\Users\xyz\Personal\afc-uni-web\node_modules\next\dist\server\web\sandbox\context.js:303:38)
at fetchJWKSFromBAPI (C:\Users\xyz\Personal\afc-uni-web\.next\server\edge\chunks\_9ad3ac._.js:10981:200)
Clerk: Refreshing the session token resulted in an infinite redirect loop. This usually means that your Clerk instance keys do not match - make sure to copy the correct publishable and secret keys from the Clerk dashboard.
Middleware
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
const isProtectedRoute = createRouteMatcher(['/dashboard(.*)'])
export default clerkMiddleware(async(auth, req) => {
if (isProtectedRoute(req)) await auth.protect();
})
Layout
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ClerkProvider>
<html lang="en" style={{ height: "100%", overflow: "hidden" }}>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
style={{
margin: 0,
height: "100%",
overflow: "hidden",
display: "flex",
flexDirection: "column",
}}
>
<header
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0.5rem 1rem",
borderBottom: "1px solid #eaeaea",
}}
>
<div></div>
<div>
<SignedOut>
<SignInButton mode="modal" />
</SignedOut>
<SignedIn>
<UserButton showName />
</SignedIn>
</div>
</header>
{/* Include the ClientRedirect component */}
<ClientRedirect />
<main style={{ flex: 1 }}>{children}</main>
<ToastContainer theme="colored" />
</body>
</html>
</ClerkProvider>
);
What I need is to run this one in my localhost.