feat(clerk-js,types): Rename to SignInFuture, use resource-agnostic events

Author: dstaley

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

@@ -1,27 +1,28 @@
 import { createEventBus } from '@clerk/shared/eventBus';
 import type { TokenResource } from '@clerk/types';
 
-import type { SignIn } from './resources';
+import { BaseResource } from './resources/Base';
 
 export const events = {
   TokenUpdate: 'token:update',
   UserSignOut: 'user:signOut',
   EnvironmentUpdate: 'environment:update',
   SessionTokenResolved: 'session:tokenResolved',
-  SignInUpdate: 'signin:update',
-  SignInError: 'signin:error',
+  ResourceUpdate: 'resource:update',
+  ResourceError: 'resource:error',
 } as const;
 
 type TokenUpdatePayload = { token: TokenResource | null };
-export type SignInUpdatePayload = { resource: SignIn };
+export type ResourceUpdatePayload = { resource: BaseResource };
+export type ResourceErrorPayload = { resource: BaseResource; error: unknown };
 
 type InternalEvents = {
   [events.TokenUpdate]: TokenUpdatePayload;
   [events.UserSignOut]: null;
   [events.EnvironmentUpdate]: null;
   [events.SessionTokenResolved]: null;
-  [events.SignInUpdate]: SignInUpdatePayload;
-  [events.SignInError]: any;
+  [events.ResourceUpdate]: ResourceUpdatePayload;
+  [events.ResourceError]: ResourceErrorPayload;
 };
 
 export const eventBus = createEventBus<InternalEvents>();

packages/clerk-js/src/core/resources/SignIn.ts

@@ -30,7 +30,7 @@ import type {
   SignInIdentifier,
   SignInJSON,
   SignInJSONSnapshot,
-  SignInBetaResource,
+  SignInFutureResource,
   SignInResource,
   SignInSecondFactor,
   SignInStartEmailLinkFlowParams,
@@ -39,6 +39,7 @@ import type {
   Web3Provider,
   Web3SignatureConfig,
   Web3SignatureFactor,
+  OAuthStrategy,
 } from '@clerk/types';
 
 import {
@@ -84,7 +85,7 @@ export class SignIn extends BaseResource implements SignInResource {
   createdSessionId: string | null = null;
   userData: UserData = new UserData(null);
 
-  __internal_beta: SignInBeta | null = new SignInBeta(this);
+  __internal_beta: SignInFuture | null = new SignInFuture(this);
   __internal_basePost;
 
   constructor(data: SignInJSON | SignInJSONSnapshot | null = null) {
@@ -459,7 +460,7 @@ export class SignIn extends BaseResource implements SignInResource {
       this.userData = new UserData(data.user_data);
     }
 
-    eventBus.emit('signin:update', { resource: this });
+    eventBus.emit('resource:update', { resource: this });
     return this;
   }
 
@@ -480,22 +481,128 @@ export class SignIn extends BaseResource implements SignInResource {
   }
 }
 
-class SignInBeta implements SignInBetaResource {
+class SignInFuture implements SignInFutureResource {
+  emailCode = {
+    sendCode: this.sendEmailCode.bind(this),
+    verifyCode: this.verifyEmailCode.bind(this),
+  };
+
   constructor(readonly resource: SignIn) {}
 
   get status() {
     return this.resource.status;
   }
 
+  async create(params: {
+    identifier?: string;
+    strategy?: OAuthStrategy | 'saml' | 'enterprise_sso';
+    redirectUrl?: string;
+    actionCompleteRedirectUrl?: string;
+  }): Promise<{ error: unknown }> {
+    eventBus.emit('resource:error', { resource: this.resource, error: null });
+    try {
+      await this.resource.__internal_basePost({
+        path: this.resource.pathRoot,
+        body: params,
+      });
+
+      return { error: null };
+    } catch (err) {
+      eventBus.emit('resource:error', { resource: this.resource, error: err });
+      return { error: err };
+    }
+  }
+
   async password({ identifier, password }: { identifier: string; password: string }): Promise<{ error: unknown }> {
-    eventBus.emit('signin:error', null);
+    eventBus.emit('resource:error', { resource: this.resource, error: null });
     try {
       await this.resource.__internal_basePost({
         path: this.resource.pathRoot,
         body: { identifier, password },
       });
     } catch (err) {
-      eventBus.emit('signin:error', err);
+      eventBus.emit('resource:error', { resource: this.resource, error: err });
+      return { error: err };
+    }
+
+    return { error: null };
+  }
+
+  async sendEmailCode({ email }: { email: string }): Promise<{ error: unknown }> {
+    eventBus.emit('resource:error', { resource: this.resource, error: null });
+    try {
+      if (!this.resource.id) {
+        await this.create({ identifier: email });
+      }
+
+      const emailCodeFactor = this.resource.supportedFirstFactors?.find(f => f.strategy === 'email_code');
+
+      if (!emailCodeFactor) {
+        throw new Error('Email code factor not found');
+      }
+
+      const { emailAddressId } = emailCodeFactor;
+      await this.resource.__internal_basePost({
+        body: { emailAddressId, strategy: 'email_code' },
+        action: 'prepare_first_factor',
+      });
+    } catch (err: unknown) {
+      eventBus.emit('resource:error', { resource: this.resource, error: err });
+      return { error: err };
+    }
+
+    return { error: null };
+  }
+
+  async verifyEmailCode({ code }: { code: string }): Promise<{ error: unknown }> {
+    eventBus.emit('resource:error', { resource: this.resource, error: null });
+    try {
+      await this.resource.__internal_basePost({
+        body: { code, strategy: 'email_code' },
+        action: 'attempt_first_factor',
+      });
+    } catch (err: unknown) {
+      eventBus.emit('resource:error', { resource: this.resource, error: err });
+      return { error: err };
+    }
+
+    return { error: null };
+  }
+
+  async sso({
+    flow = 'auto',
+    strategy,
+    redirectUrl,
+    redirectUrlComplete,
+  }: {
+    flow?: 'auto' | 'modal';
+    strategy: OAuthStrategy | 'saml' | 'enterprise_sso';
+    redirectUrl: string;
+    redirectUrlComplete: string;
+  }): Promise<{ error: unknown }> {
+    eventBus.emit('resource:error', { resource: this.resource, error: null });
+    try {
+      if (flow !== 'auto') {
+        throw new Error('modal flow is not supported yet');
+      }
+
+      const redirectUrlWithAuthToken = SignIn.clerk.buildUrlWithAuth(redirectUrl);
+
+      if (!this.resource.id) {
+        await this.create({
+          strategy,
+          redirectUrl: redirectUrlWithAuthToken,
+          actionCompleteRedirectUrl: redirectUrlComplete,
+        });
+      }
+
+      const { status, externalVerificationRedirectURL } = this.resource.firstFactorVerification;
+
+      if (status === 'unverified' && externalVerificationRedirectURL) {
+        windowNavigate(externalVerificationRedirectURL);
+      }
+    } catch (err: unknown) {
+      eventBus.emit('resource:error', { resource: this.resource, error: err });
       return { error: err };
     }
 

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

@@ -1,8 +1,10 @@
 import type { State as StateInterface } from '@clerk/types';
 import { computed, effect } from 'alien-signals';
 
-import { eventBus, type SignInUpdatePayload } from './events';
+import { eventBus } from './events';
 import { signInComputedSignal, signInErrorSignal, signInSignal } from './signals';
+import { BaseResource } from './resources/Base';
+import { SignIn } from './resources/SignIn';
 
 export class State implements StateInterface {
   signInResourceSignal = signInSignal;
@@ -13,15 +15,19 @@ export class State implements StateInterface {
   __internal_computed = computed;
 
   constructor() {
-    eventBus.on('signin:update', this.onSignInUpdated);
-    eventBus.on('signin:error', this.onSignInError);
+    eventBus.on('resource:update', this.onResourceUpdated);
+    eventBus.on('resource:error', this.onResourceError);
   }
 
-  private onSignInUpdated = (payload: SignInUpdatePayload) => {
-    this.signInResourceSignal({ resource: payload.resource });
+  private onResourceError = (payload: { resource: BaseResource; error: unknown }) => {
+    if (payload.resource instanceof SignIn) {
+      this.signInErrorSignal({ errors: payload.error });
+    }
   };
 
-  private onSignInError = (error: unknown) => {
-    this.signInErrorSignal({ errors: error });
+  private onResourceUpdated = (payload: { resource: BaseResource }) => {
+    if (payload.resource instanceof SignIn) {
+      this.signInResourceSignal({ resource: payload.resource });
+    }
   };
 }

packages/react/src/hooks/useClerkSignal.ts

@@ -1,10 +1,10 @@
-import type { SignInBetaResource } from '@clerk/types';
+import type { SignInFutureResource } from '@clerk/types';
 import { useCallback, useSyncExternalStore } from 'react';
 
 import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
 import { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvider';
 
-function useClerkSignal(signal: 'signIn'): { errors: unknown; signIn: SignInBetaResource | null } | null {
+function useClerkSignal(signal: 'signIn'): { errors: unknown; signIn: SignInFutureResource | null } | null {
   useAssertWrappedByClerkProvider('useSignInSignal');
 
   const clerk = useIsomorphicClerkContext();

packages/types/src/signIn.ts

@@ -125,9 +125,20 @@ export interface SignInResource extends ClerkResource {
   __internal_toSnapshot: () => SignInJSONSnapshot;
 }
 
-export interface SignInBetaResource {
+export interface SignInFutureResource {
   status: SignInStatus | null;
+  create: (params: { identifier: string }) => Promise<{ error: unknown }>;
   password: (params: { identifier: string; password: string }) => Promise<{ error: unknown }>;
+  emailCode: {
+    sendCode: (params: { email: string }) => Promise<{ error: unknown }>;
+    verifyCode: (params: { code: string }) => Promise<{ error: unknown }>;
+  };
+  sso: (params: {
+    flow?: 'auto' | 'modal';
+    strategy: OAuthStrategy | 'saml' | 'enterprise_sso';
+    redirectUrl: string;
+    redirectUrlComplete: string;
+  }) => Promise<{ error: unknown }>;
 }
 
 export type SignInStatus =

packages/types/src/state.ts

@@ -1,12 +1,12 @@
-import type { SignInBetaResource } from './signIn';
+import type { SignInFutureResource } from './signIn';
 
 export interface State {
   signInSignal: {
     (): {
       errors: unknown;
-      signIn: SignInBetaResource | null;
+      signIn: SignInFutureResource | null;
     };
-    (value: { errors: unknown; signIn: SignInBetaResource | null }): void;
+    (value: { errors: unknown; signIn: SignInFutureResource | null }): void;
   };
   __internal_effect: (callback: () => void) => () => void;
   __internal_computed: <T>(getter: (previousValue?: T) => T) => () => T;