CODEWITHSUNDEEP
next.jscorsclerk
user21930883
user21930883

Reputation: 11

NextJs with Clerk Auth. Uncaught (in promise) Error: Clerk: Failed to load Clerk

I have been trying to set up Clerk for my NextJS project but I keep having Errors. I am using NextJS 13 with the app directory in a src folder, Clerk middleware is located in src also. Firefox console error "(Reason: CORS request did not succeed). Status code: (null).", "Uncaught (in promise) Error: Clerk: Failed to load Clerk"

I also can't get the user info from the auth()/currentUser(), it always returns undefined even if I sign-in correctly.

I haven't been able to find many posts that talked about this issue, but some mentioned: -,,Enable URL-based session syncing,, in settings of the project on the Clerk website, but that is turned off by default. -One recommendation was to disable HTTPS everywhere but i don't even have it.

EDIT: changed my browser to Edge and the CORS problem went away. I can sign in correctly and stuff, but I still have no access to currentUser() function from Clerk, I can be logged in and still receive undefined.

Upvotes: 1

Views: 4305

Answers (2)

HEV Pro
HEV Pro

Reputation: 156

I use this method, and it seems that work fine. I hope it could helps you :)

import { authMiddleware } from '@clerk/nextjs';
import createMiddleware from 'next-intl/middleware';
const locales = ['en', 'es', 'ca'];
const localesRoutes = locales.map((locale) => '/' + locale);
const publicRoutes = ['/', '/:locale/signup', '/:locale/signin'].concat(
    localesRoutes
);

const intlMiddleware = createMiddleware({
    // A list of all locales that are supported
    locales: locales,

    // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
    defaultLocale: '',
    localeDetection: false,
});
export default authMiddleware({
    beforeAuth: (req) => {
        // Execute next-intl middleware before Clerk's auth middleware
        return intlMiddleware(req);
    },

    // Ensure that locale specific sign-in pages are public
    publicRoutes: publicRoutes,
});

export const config = {
    // Skip all paths that should not be internationalized. This example skips the
    // folders "api", "_next" and all files with an extension (e.g. favicon.ico)
    matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Moe
Moe

Reputation: 3

I am not sure if this might be of any help but I'm working on a next.js project and I got clerk set up correctly and this is the content of my middleware.ts file that lives in the root directory:

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export default withClerkMiddleware(() => {
  //console.log("middleware running...");
  return NextResponse.next();
});

export const config = {
  matcher: ["/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)", "/"],
};

My little knowledge about Clerk comes from Theo's video here (https://youtu.be/YkOSUVzOAA4?t=690) and I think his version of the code from that video wouldn't run and I had to use this version of the middleware to get the user auth with Clerk to work. In that application, he didn't have to use currentUser() as far as I can remember.

Upvotes: 0

Related Questions