Theo's Typesafe Cult•8mo ago

Weird Clerk behavior(user is null) with new API

So I started a new personal project with T3 yesterday. I added Clerk for auth, and it looks like they've upgraded their API so their are a lot of new primatives. I'm trying to just fetch the user in my API, and it's being weirdly difficult. I feel like I'm following the clerk docs to the letter, but as you can see in the terminal console log, all the properties on the user are null(I'm obviously logged in when sending this request). The request is being cached since it's not taking in any params, but when I do a hard refresh it still console.logs the null user so I don't think that has anything to do with it 😕
Middleware.ts

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

const isRootRoute = createRouteMatcher(["/"]);

export default clerkMiddleware((auth, req) => {
  // Allow signed out users to access the specified routes:
  if (isRootRoute(req)) auth().protect();
});

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

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

const isRootRoute = createRouteMatcher(["/"]);

export default clerkMiddleware((auth, req) => {
  // Allow signed out users to access the specified routes:
  if (isRootRoute(req)) auth().protect();
});

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

route.ts

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

export async function GET(req: Request) {
  try {
    const user = auth();
    console.log(user);
    return new NextResponse("Authorized", { status: 200 });
  } catch (error) {
    console.error(error);
    return new NextResponse("Unauthorized", { status: 401 });
  }
}

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

export async function GET(req: Request) {
  try {
    const user = auth();
    console.log(user);
    return new NextResponse("Authorized", { status: 200 });
  } catch (error) {
    console.error(error);
    return new NextResponse("Unauthorized", { status: 401 });
  }
}

13 Replies

Yaki•7mo ago

Yeah I have the same issue This is the console log output of user at the middleware

 sessionId:'sess_2hAK5jvdGE1rN1H24YooVjYaQYn',
  userId: 'user_2hA91TfiE6EvNZxq8FbY9dD5s5Y',
  orgId: undefined,
  orgRole: undefined,
  orgSlug: undefined,
  orgPermissions: undefined,
  getToken: [Function],
  has: [Function],
  debug: [Function],
  protect: [Function],
  redirectToSignIn: [Function]

 sessionId:'sess_2hAK5jvdGE1rN1H24YooVjYaQYn',
  userId: 'user_2hA91TfiE6EvNZxq8FbY9dD5s5Y',
  orgId: undefined,
  orgRole: undefined,
  orgSlug: undefined,
  orgPermissions: undefined,
  getToken: [Function],
  has: [Function],
  debug: [Function],
  protect: [Function],
  redirectToSignIn: [Function]

middleware.ts:

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

const isProtectedRoute = createRouteMatcher(["/dashboard(.*)"]);

export default clerkMiddleware((auth, request) => {
  const user = auth();
  console.log(user);
  if (isProtectedRoute(request)) auth().protect();
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

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

const isProtectedRoute = createRouteMatcher(["/dashboard(.*)"]);

export default clerkMiddleware((auth, request) => {
  const user = auth();
  console.log(user);
  if (isProtectedRoute(request)) auth().protect();
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

Asked earlier on the Clerk discord but no response yet. I tried downgrading to an earlier version (4.30) and it didn't work. Read on SO that dropping turbo compiler could also help but nope. Hope I get a reply soon so I can keep moving with this :sigh: Woops my bad I just realized your issue is even worse since you're not even getting the user data. Mine is annoying because I'm trying to implement the Organizations feature to have roles and permissions to handle the auth but I'm gonna have to do it on the API layer it seems... Have you tried removing the auth().protect() on your middleware to check if that's the problem?

BenOP•7mo ago

Apparently my issue was because I was trying to hit the API from a server component. And it just doesn't work from Server to Server. So I had to make the call from a client component, or do everything directly in the RSC. In regards to role based auth, read this https://clerk.com/docs/guides/basic-rbac to make sure you actually need organizations and not just metadata based roles

Guides: Implement basic Role Based Access Control (RBAC) with metadata

Learn how to leverage Clerk's publicMetadata to implement your own basic Role Based Access Controls.

BenOP•7mo ago

@Yaki

Yaki•7mo ago

Neat! Glad you solved your issue. Man I love realizing I was doing it all wrong with 5 minutes of reading 🤡 Initially I was using metadata but then I saw "Roles and Permissions" on the dashboard and I was like yeah that makes more sense

BenOP•7mo ago

So you mean the right way is with RBAC as per the article above right? For your use case

Yaki•7mo ago

I also thought publicMetadata was modifiable on client side but apparently not so none of the server actions hacks I did were necessary LOL Yeah Support from Clerk's Discord suggested the exact same article with my issue

BenOP•7mo ago

Ya I agree, they have "Roles and Organizations" front and center on the dashboard, but for like 90% of people what they really need is the implentation in this article that's tucked away at the bottom of their docs :facepalm:

Yaki•7mo ago

Yeah idk if I'm getting dumber but sometimes I struggle finding what I need on docs nowdays

BenOP•7mo ago

I think docs are just getting worse lol

Yaki•7mo ago

At least the search function works most of the times

BenOP•7mo ago

I think Clerk docs specifically just aren't the best, especially made more confusing by the fact that they just had a total revamp of their API with Core 2

Yaki•7mo ago

Yeah I kept reading issue reports from like a couple months ago related to the new API on like SO and Github Anyhow glad both our issues got solved 😄

deme4447•2mo ago

Hello I’m getting this error also but I’m calling the tRPC route from a client side component and I keep getting userId = null It was working prior to updating to clerk 6 not sure what the issue is..

Gaming

Programming

Weird Clerk behavior(user is null) with new API