Merge branch 'release/core-2' into ss/add-types-waitlist-entry

Author: SarahSoutoul

.changeset/disable-console-transport.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Disable ConsoleTransport for debug logger by default

.changeset/fix-factor-two-infinite-spinner.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix infinite loading spinner when navigating to factor-two sign-in route without an active 2FA session

.changeset/legal-crabs-shout.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/backend': minor
+---
+
+Add `providerUserId` field to `ExternalAccount` resource as the preferred way to access the unique user ID from the OAuth provider. The existing `externalId` field is now deprecated in favor of `providerUserId` for better clarity and consistency across the API.

packages/backend/src/api/resources/ExternalAccount.ts

@@ -16,12 +16,17 @@ export class ExternalAccount {
      * The provider name (e.g., `google`).
      */
     readonly provider: string,
+    /**
+     * The unique ID of the user in the provider.
+     */
+    readonly providerUserId: string,
     /**
      * The identification with which this external account is associated.
      */
     readonly identificationId: string,
     /**
      * The unique ID of the user in the provider.
+     * @deprecated Use providerUserId instead
      */
     readonly externalId: string,
     /**
@@ -70,6 +75,7 @@ export class ExternalAccount {
     return new ExternalAccount(
       data.id,
       data.provider,
+      data.provider_user_id,
       data.identification_id,
       data.provider_user_id,
       data.approved_scopes,

packages/clerk-js/src/core/modules/debug/transports/console.ts

@@ -1,35 +1,10 @@
 import type { DebugLogEntry, DebugTransport } from '../types';
 
-/**
- * ANSI color codes for console output
- */
-const COLORS = {
-  blue: '\x1b[34m',
-  bright: '\x1b[1m',
-  cyan: '\x1b[36m',
-  dim: '\x1b[2m',
-  gray: '\x1b[90m',
-  green: '\x1b[32m',
-  magenta: '\x1b[35m',
-  red: '\x1b[31m',
-  reset: '\x1b[0m',
-  white: '\x1b[37m',
-  yellow: '\x1b[33m',
-} as const;
-
-/**
- * Color mapping for different log levels
- */
-const LEVEL_COLORS = {
-  debug: COLORS.green,
-  error: COLORS.red,
-  info: COLORS.blue,
-  warn: COLORS.yellow,
-} as const;
-
 /**
  * A transport that writes debug logs to the host environment's console
- * (e.g. browser devtools or Node.js stdout) with ANSI color accents.
+ * (e.g. browser devtools or Node.js stdout).
+ *
+ * Currently disabled by default (noop).
  *
  * @public
  */
@@ -40,40 +15,7 @@ export class ConsoleTransport implements DebugTransport {
    *
    * @param entry - The debug log entry to print
    */
-  send(entry: DebugLogEntry): Promise<void> {
-    const timestamp = new Date(entry.timestamp).toISOString();
-    const level = entry.level.toUpperCase();
-    const source = entry.source ? `[${entry.source}]` : '';
-    const context = entry.context ? ` ${JSON.stringify(entry.context)}` : '';
-
-    const levelColor = LEVEL_COLORS[entry.level] || COLORS.white;
-
-    const prefix = `${COLORS.bright}${COLORS.cyan}[Clerk Debug]${COLORS.reset}`;
-    const timestampColored = `${COLORS.dim}${timestamp}${COLORS.reset}`;
-    const levelColored = `${levelColor}${level}${COLORS.reset}`;
-    const sourceColored = source ? `${COLORS.gray}${source}${COLORS.reset}` : '';
-    const messageColored = `${COLORS.white}${entry.message}${COLORS.reset}`;
-    const contextColored = context ? `${COLORS.dim}${context}${COLORS.reset}` : '';
-
-    const message = `${prefix} ${timestampColored} ${levelColored}${sourceColored}: ${messageColored}${contextColored}`;
-
-    switch (entry.level) {
-      case 'error':
-        console.error(message);
-        break;
-      case 'warn':
-        console.warn(message);
-        break;
-      case 'info':
-        console.info(message);
-        break;
-      case 'debug':
-        console.debug(message);
-        break;
-      default:
-        console.log(message);
-    }
-
+  send(_entry: DebugLogEntry): Promise<void> {
     return Promise.resolve();
   }
 }

packages/clerk-js/src/core/resources/__tests__/ExternalAccount.test.ts

@@ -9,6 +9,8 @@ describe('External account', () => {
     const externalAccountJSON = {
       object: 'external_account',
       id: targetId,
+      provider_user_id: 'test_provider_user_id',
+      identification_id: 'test_identification_id',
     };
 
     // @ts-ignore
@@ -35,6 +37,8 @@ describe('External account', () => {
       object: 'external_account',
       id: targetId,
       deleted: true,
+      provider_user_id: 'test_provider_user_id',
+      identification_id: 'test_identification_id',
     };
 
     // @ts-ignore

packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx

@@ -1,3 +1,4 @@
+import { useClerk } from '@clerk/shared/react';
 import type { SignInFactor } from '@clerk/shared/types';
 import React from 'react';
 
@@ -6,6 +7,7 @@ import { LoadingCard } from '@/ui/elements/LoadingCard';
 
 import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';
 import { useCoreSignIn } from '../../contexts';
+import { useRouter } from '../../router';
 import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';
 import { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard';
 import { SignInFactorTwoEmailCodeCard } from './SignInFactorTwoEmailCodeCard';
@@ -26,7 +28,9 @@ const factorKey = (factor: SignInFactor | null | undefined) => {
 };
 
 function SignInFactorTwoInternal(): JSX.Element {
+  const { __internal_setActiveInProgress } = useClerk();
   const signIn = useCoreSignIn();
+  const router = useRouter();
   const availableFactors = signIn.supportedSecondFactors;
 
   const lastPreparedFactorKeyRef = React.useRef('');
@@ -45,6 +49,19 @@ function SignInFactorTwoInternal(): JSX.Element {
     toggleAllStrategies();
   };
 
+  React.useEffect(() => {
+    if (__internal_setActiveInProgress) {
+      return;
+    }
+
+    // If the sign-in was reset or doesn't exist, redirect back to the start.
+    // Don't redirect for 'complete' status - setActive will handle navigation.
+    if (signIn.status === null || signIn.status === 'needs_identifier' || signIn.status === 'needs_first_factor') {
+      void router.navigate('../');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Match SignInFactorOne pattern: only run on mount and when setActiveInProgress changes
+  }, [__internal_setActiveInProgress]);
+
   if (!currentFactor) {
     return <LoadingCard />;
   }