authenticationnext.jscorst3clerk

Clerk.dev Unhandled Runtime Error, TypeError: Failed to fetch


I am following the official T3 stack tutorial.

I am stuck at clerk authentication. I modified my _app.tsx to the following:

import { type AppType } from "next/app";

import { api } from "~/utils/api";

import "~/styles/globals.css";
import {ClerkProvider, SignedIn, SignedOut, SignIn} from "@clerk/nextjs";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
      <ClerkProvider {...pageProps}>
        <Component {...pageProps} />
      </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

And when I visit my home page: http://127.0.0.1:3000/ or http://localhost:3000/ I get the following error:

enter image description here

Checking the browser console the main (and first) error I see is the following:

Screenshot of the console: enter image description here

Which is a basic CORS block that I can do nothing about client side, it seems.

What am I missing? I am banging my head with this problem for days now and found nothing like this with Google.

This seems to cause clerk not to work at all.

Versions I use for context:

I tried the following so far:


Solution

  • I found an issue with my exact problem in another repo (t3-turbo-and-clerk):

    https://github.com/clerkinc/t3-turbo-and-clerk/issues/39

    The issue was caused by my HTTPSEverywhere issue. Disabling it on localhost solved my issue.

    Leaving it here for other people to find.