33 replies

Convex+Clerk: sign out unhandled runtime error

Hi Convex team, I've been battling this issue for a couple of weeks and have no idea what to try anymore.

I have the latest versions of everything: Clerk, Convex, Nextjs

For Convex, I combine RSC and client components, using fetchQuery for RSC and of course useQuery and useMutation on the client.

I setup everything according to both, Clerk and Convex documentation
in the middleware.ts I have:

// middleware.ts

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher(["/projects(.*)", "/waitlist(.*)"]);

export default clerkMiddleware((auth, req) => {
  const signInUrl = new URL("/sign-in", req.url).toString();
  if (isProtectedRoute(req)) {
    auth().protect({ unauthenticatedUrl: signInUrl });
  }

  return NextResponse.next();
});

export const config = {
  matcher: [
    // Exclude files with a "." followed by an extension, which are typically static files.
    // Exclude files in the _next directory, which are Next.js internals.
    "/((?!.+\\.[\\w]+$|_next|monitoring).*)",
    // Re-include any files in the api or trpc folders that might have an extension
    "/(api|trpc)(.*)",
  ],
};

// middleware.ts

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher(["/projects(.*)", "/waitlist(.*)"]);

export default clerkMiddleware((auth, req) => {
  const signInUrl = new URL("/sign-in", req.url).toString();
  if (isProtectedRoute(req)) {
    auth().protect({ unauthenticatedUrl: signInUrl });
  }

  return NextResponse.next();
});

export const config = {
  matcher: [
    // Exclude files with a "." followed by an extension, which are typically static files.
    // Exclude files in the _next directory, which are Next.js internals.
    "/((?!.+\\.[\\w]+$|_next|monitoring).*)",
    // Re-include any files in the api or trpc folders that might have an extension
    "/(api|trpc)(.*)",
  ],
};

in my authed layout I have:

  <ClerkLoaded>
    <Authenticated>{children}</Authenticated>
    <Unauthenticated>
      <RedirectToSignIn />
    </Unauthenticated>
  </ClerkLoaded>
  <ClerkLoading>
    <Loading />
  </ClerkLoading>

  <ClerkLoaded>
    <Authenticated>{children}</Authenticated>
    <Unauthenticated>
      <RedirectToSignIn />
    </Unauthenticated>
  </ClerkLoaded>
  <ClerkLoading>
    <Loading />
  </ClerkLoading>

And I return nullnull for all queries, when ctx.auth.getUserIdentity() is null.

The problem happens when I logout, the app just crashes with an "unhandled runtime error"

// browser console logs
clerk.browser.js:2 Uncaught (in promise) Error
    at o._fetch (clerk.browser.js:2:80700)
    at async ne.create (clerk.browser.js:2:118896)

// browser console logs
clerk.browser.js:2 Uncaught (in promise) Error
    at o._fetch (clerk.browser.js:2:80700)
    at async ne.create (clerk.browser.js:2:118896)

This is also happening on production

Convex Community•3y ago•

33 replies

Khalil

Convex+Clerk: sign out unhandled runtime error

// middleware.ts

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher(["/projects(.*)", "/waitlist(.*)"]);

export default clerkMiddleware((auth, req) => {
  const signInUrl = new URL("/sign-in", req.url).toString();
  if (isProtectedRoute(req)) {
    auth().protect({ unauthenticatedUrl: signInUrl });
  }

  return NextResponse.next();
});

export const config = {
  matcher: [
    // Exclude files with a "." followed by an extension, which are typically static files.
    // Exclude files in the _next directory, which are Next.js internals.
    "/((?!.+\\.[\\w]+$|_next|monitoring).*)",
    // Re-include any files in the api or trpc folders that might have an extension
    "/(api|trpc)(.*)",
  ],
};

// middleware.ts

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

const isProtectedRoute = createRouteMatcher(["/projects(.*)", "/waitlist(.*)"]);

export default clerkMiddleware((auth, req) => {
  const signInUrl = new URL("/sign-in", req.url).toString();
  if (isProtectedRoute(req)) {
    auth().protect({ unauthenticatedUrl: signInUrl });
  }

  return NextResponse.next();
});

export const config = {
  matcher: [
    // Exclude files with a "." followed by an extension, which are typically static files.
    // Exclude files in the _next directory, which are Next.js internals.
    "/((?!.+\\.[\\w]+$|_next|monitoring).*)",
    // Re-include any files in the api or trpc folders that might have an extension
    "/(api|trpc)(.*)",
  ],
};

in my authed layout I have:

  <ClerkLoaded>
    <Authenticated>{children}</Authenticated>
    <Unauthenticated>
      <RedirectToSignIn />
    </Unauthenticated>
  </ClerkLoaded>
  <ClerkLoading>
    <Loading />
  </ClerkLoading>

  <ClerkLoaded>
    <Authenticated>{children}</Authenticated>
    <Unauthenticated>
      <RedirectToSignIn />
    </Unauthenticated>
  </ClerkLoaded>
  <ClerkLoading>
    <Loading />
  </ClerkLoading>

And I return nullnull for all queries, when ctx.auth.getUserIdentity() is null.

The problem happens when I logout, the app just crashes with an "unhandled runtime error"

// browser console logs
clerk.browser.js:2 Uncaught (in promise) Error
    at o._fetch (clerk.browser.js:2:80700)
    at async ne.create (clerk.browser.js:2:118896)

// browser console logs
clerk.browser.js:2 Uncaught (in promise) Error
    at o._fetch (clerk.browser.js:2:80700)
    at async ne.create (clerk.browser.js:2:118896)

This is also happening on production

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Convex Community

Where Convex builders ask questions, share what they're building.

16,722 Members

Join

Convex+Clerk: sign out unhandled runtime error

Convex+Clerk: sign out unhandled runtime error

Continue the conversation

Convex Community

Similar Threads

Continue the conversation

Convex Community