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:
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:
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.