fix(nextjs,clerk-react,backend): Utility has is undefined when user is signed out

Author: panteliselef

packages/backend/src/tokens/authObjects.ts

@@ -14,6 +14,7 @@ import { createBackendApiClient } from '../api';
 type AuthObjectDebugData = Record<string, any>;
 type CreateAuthObjectDebug = (data?: AuthObjectDebugData) => AuthObjectDebug;
 type AuthObjectDebug = () => AuthObjectDebugData;
+type CheckAuthorizationSignedOut = undefined;
 
 export type SignedInAuthObjectOptions = CreateBackendApiOptions & {
   token: string;
@@ -52,7 +53,7 @@ export type SignedOutAuthObject = {
   orgPermissions: null;
   organization: null;
   getToken: ServerGetToken;
-  has: CheckAuthorizationWithCustomPermissions;
+  has: CheckAuthorizationSignedOut;
   debug: AuthObjectDebug;
 };
 
@@ -126,7 +127,7 @@ export function signedOutAuthObject(debugData?: AuthObjectDebugData): SignedOutA
     orgPermissions: null,
     organization: null,
     getToken: () => Promise.resolve(null),
-    has: () => false,
+    has: undefined,
     debug: createDebug(debugData),
   };
 }

packages/nextjs/src/app-router/server/controlComponents.tsx

@@ -47,13 +47,13 @@ export function Protect(props: ProtectServerComponentProps) {
    * Check against the results of `has` called inside the callback
    */
   if (typeof restAuthorizedParams.condition === 'function') {
-    if (restAuthorizedParams.condition(has)) {
+    if (userId && restAuthorizedParams.condition(has)) {
       return <>{children}</>;
     }
     return <>{fallback ?? null}</>;
   }
 
-  if (has(restAuthorizedParams)) {
+  if (userId && has(restAuthorizedParams)) {
     return <>{children}</>;
   }
 

packages/react/src/components/controlComponents.tsx

@@ -102,13 +102,13 @@ export const Protect = ({ children, fallback, ...restAuthorizedParams }: Protect
    * Check against the results of `has` called inside the callback
    */
   if (typeof restAuthorizedParams.condition === 'function') {
-    if (restAuthorizedParams.condition(has)) {
+    if (userId && restAuthorizedParams.condition(has)) {
       return <>{children}</>;
     }
     return <>{fallback ?? null}</>;
   }
 
-  if (has(restAuthorizedParams)) {
+  if (userId && has(restAuthorizedParams)) {
     return <>{children}</>;
   }
 

packages/react/src/hooks/useAuth.ts

@@ -13,7 +13,8 @@ import { invalidStateError, useAuthHasRequiresRoleOrPermission } from '../errors
 import { errorThrower } from '../utils';
 import { createGetToken, createSignOut } from './utils';
 
-type CheckAuthorizationSignedOut = (params?: Parameters<CheckAuthorizationWithCustomPermissions>[0]) => false;
+type CheckAuthorizationSignedOut = undefined;
+type CheckAuthorizationWithoutOrg = (params?: Parameters<CheckAuthorizationWithCustomPermissions>[0]) => false;
 
 type UseAuthReturn =
   | {
@@ -51,7 +52,7 @@ type UseAuthReturn =
       orgId: null;
       orgRole: null;
       orgSlug: null;
-      has: CheckAuthorizationSignedOut;
+      has: CheckAuthorizationWithoutOrg;
       signOut: SignOut;
       getToken: GetToken;
     }
@@ -147,7 +148,7 @@ export const useAuth: UseAuth = () => {
       orgId: undefined,
       orgRole: undefined,
       orgSlug: undefined,
-      has: () => false,
+      has: undefined,
       signOut,
       getToken,
     };
@@ -163,7 +164,7 @@ export const useAuth: UseAuth = () => {
       orgId: null,
       orgRole: null,
       orgSlug: null,
-      has: () => false,
+      has: undefined,
       signOut,
       getToken,
     };