on session exists, complete sign in

Author: brkalow

packages/clerk-js/src/core/constants.ts

@@ -27,6 +27,7 @@ export const ERROR_CODES = {
   SAML_USER_ATTRIBUTE_MISSING: 'saml_user_attribute_missing',
   USER_LOCKED: 'user_locked',
   EXTERNAL_ACCOUNT_NOT_FOUND: 'external_account_not_found',
+  SESSION_EXISTS: 'session_exists',
   SIGN_UP_MODE_RESTRICTED: 'sign_up_mode_restricted',
   SIGN_UP_MODE_RESTRICTED_WAITLIST: 'sign_up_restricted_waitlist',
   ENTERPRISE_SSO_USER_ATTRIBUTE_MISSING: 'enterprise_sso_user_attribute_missing',

packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx

@@ -1,7 +1,7 @@
+import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/shared/types';
 
-import { isClerkAPIResponseError } from '@/index.headless';
 import { sharedMainIdentifierSx } from '@/ui/common/organizations/OrganizationPreview';
 import { localizationKeys, useLocalizations } from '@/ui/customizables';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';

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

@@ -1,8 +1,11 @@
+import type { ClerkAPIError } from '@clerk/shared/error';
+import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { PhoneCodeChannel } from '@clerk/shared/types';
 import React from 'react';
 
-import { handleError } from '@/ui/utils/errorHandler';
+import { ERROR_CODES } from '@/core/constants';
+import { handleError as _handleError } from '@/ui/utils/errorHandler';
 import { originPrefersPopup } from '@/ui/utils/originPrefersPopup';
 import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
 
@@ -30,10 +33,29 @@ export const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps)
   const shouldUsePopup = ctx.oauthFlow === 'popup' || (ctx.oauthFlow === 'auto' && originPrefersPopup());
   const { onAlternativePhoneCodeProviderClick, ...rest } = props;
 
+  const handleError = (err: any) => {
+    if (isClerkAPIResponseError(err)) {
+      const sessionAlreadyExistsError: ClerkAPIError | undefined = err.errors.find(
+        (e: ClerkAPIError) => e.code === ERROR_CODES.SESSION_EXISTS,
+      );
+
+      if (sessionAlreadyExistsError) {
+        return clerk.setActive({
+          session: clerk.client.lastActiveSessionId,
+          navigate: async ({ session }) => {
+            await ctx.navigateOnSetActive({ session, redirectUrl: ctx.afterSignInUrl });
+          },
+        });
+      }
+    }
+
+    return _handleError(err, [], card.setError);
+  };
+
   return (
     <SocialButtons
       {...rest}
-      showLastAuthenticationStrategy={true}
+      showLastAuthenticationStrategy
       idleAfterDelay={!shouldUsePopup}
       oauthCallback={strategy => {
         if (shouldUsePopup) {
@@ -50,12 +72,12 @@ export const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps)
 
           return signIn
             .authenticateWithPopup({ strategy, redirectUrl, redirectUrlComplete, popup, oidcPrompt: ctx.oidcPrompt })
-            .catch(err => handleError(err, [], card.setError));
+            .catch(err => handleError(err));
         }
 
         return signIn
           .authenticateWithRedirect({ strategy, redirectUrl, redirectUrlComplete, oidcPrompt: ctx.oidcPrompt })
-          .catch(err => handleError(err, [], card.setError));
+          .catch(err => handleError(err));
       }}
       web3Callback={strategy => {
         return clerk

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

@@ -432,6 +432,9 @@ function SignInStartInternal(): JSX.Element {
         e.code === ERROR_CODES.FORM_PASSWORD_PWNED,
     );
 
+    const sessionAlreadyExistsError: ClerkAPIError = e.errors.find(
+      (e: ClerkAPIError) => e.code === ERROR_CODES.SESSION_EXISTS,
+    );
     const alreadySignedInError: ClerkAPIError = e.errors.find(
       (e: ClerkAPIError) => e.code === 'identifier_already_signed_in',
     );
@@ -442,6 +445,13 @@ function SignInStartInternal(): JSX.Element {
 
     if (instantPasswordError) {
       await signInWithFields(identifierField);
+    } else if (sessionAlreadyExistsError) {
+      await clerk.setActive({
+        session: clerk.client.lastActiveSessionId,
+        navigate: async ({ session }) => {
+          await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });
+        },
+      });
     } else if (alreadySignedInError) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const sid = alreadySignedInError.meta!.sessionId!;

packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@@ -1,9 +1,9 @@
 import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
+import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { PhoneCodeChannel, PhoneCodeChannelData, SignUpResource } from '@clerk/shared/types';
 import React from 'react';
 
-import { isClerkAPIResponseError } from '@/index.headless';
 import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Header } from '@/ui/elements/Header';