fix(elements): Pass sign up resource directly to child machine

.changeset/cyan-pets-relax.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Handle call to `hasTags` on undefined `state`

.changeset/small-bears-yell.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Pass resource directly to machine over getSnapshot to avoid empty context

.changeset/three-houses-deny.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Update XState from 5.13.x to 5.15.x

packages/elements/package.json

@@ -75,13 +75,13 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@xstate/react": "^4.1.1",
     "client-only": "^0.0.1",
-    "xstate": "^5.13.0"
+    "xstate": "^5.15.0"
   },
   "devDependencies": {
     "@clerk/clerk-react": "5.2.8",
     "@clerk/eslint-config-custom": "*",
     "@clerk/shared": "2.3.3",
-    "@statelyai/inspect": "^0.3.1",
+    "@statelyai/inspect": "^0.4.0",
     "@types/node": "^18.19.33",
     "@types/react": "*",
     "@types/react-dom": "*",

packages/elements/src/internals/machines/sign-up/router.machine.ts

@@ -359,9 +359,11 @@ export const SignUpRouterMachine = setup({
         id: 'verification',
         src: 'verificationMachine',
         input: ({ context, self }) => ({
+          attributes: context.clerk.__unstable__environment?.userSettings.attributes,
           basePath: context.router?.basePath,
           formRef: context.formRef,
           parent: self,
+          resource: context.clerk.client.signUp,
         }),
         onDone: {
           actions: 'raiseNext',

packages/elements/src/internals/machines/sign-up/verification.machine.ts

@@ -72,9 +72,15 @@ export type AttemptVerificationInput = {
 
 export const SignUpVerificationMachine = setup({
   actors: {
-    prepare: fromPromise<SignUpResource, PrepareVerificationInput>(({ input: { params, parent } }) =>
-      parent.getSnapshot().context.clerk.client.signUp.prepareVerification(params),
-    ),
+    prepare: fromPromise<SignUpResource, PrepareVerificationInput>(({ input: { params, parent } }) => {
+      const clerk = parent.getSnapshot().context.clerk;
+
+      if (params.strategy === 'email_link' && params.redirectUrl) {
+        params.redirectUrl = clerk.buildUrlWithAuth(params.redirectUrl);
+      }
+
+      return clerk.client.signUp.prepareVerification(params);
+    }),
     attempt: fromPromise<SignUpResource, AttemptVerificationInput>(async ({ input: { params, parent } }) =>
       parent.getSnapshot().context.clerk.client.signUp.attemptVerification(params),
     ),
@@ -93,7 +99,7 @@ export const SignUpVerificationMachine = setup({
 
               // Short-circuit if the sign-up resource is already complete
               if (signInStatus === 'complete') {
-                return sendBack({ type: `EMAIL_LINK.VERIFIED`, resource });
+                return sendBack({ type: 'EMAIL_LINK.VERIFIED', resource });
               }
 
               switch (verificationStatus) {
@@ -105,13 +111,13 @@ export const SignUpVerificationMachine = setup({
                 }
                 case 'failed': {
                   sendBack({
-                    type: `EMAIL_LINK.FAILED`,
+                    type: 'EMAIL_LINK.FAILED',
                     error: new ClerkElementsError('email-link-verification-failed', 'Email verification failed'),
                     resource,
                   });
                   break;
                 }
-                case 'unverified':
+                // case 'unverified':
                 default:
                   return;
               }
@@ -170,12 +176,7 @@ export const SignUpVerificationMachine = setup({
     isStrategyEnabled: (
       { context },
       { attribute, strategy }: { attribute: Attribute; strategy: VerificationStrategy },
-    ) =>
-      Boolean(
-        context.parent
-          .getSnapshot()
-          .context.clerk.__unstable__environment?.userSettings.attributes[attribute].verifications.includes(strategy),
-      ),
+    ) => Boolean(context.attributes?.[attribute].verifications.includes(strategy)),
     shouldVerifyPhoneCode: shouldVerify('phone_number'),
     shouldVerifyEmailLink: shouldVerify('email_address', 'email_link'),
     shouldVerifyEmailCode: shouldVerify('email_address', 'email_code'),
@@ -186,13 +187,14 @@ export const SignUpVerificationMachine = setup({
   id: SignUpVerificationMachineId,
   initial: 'Init',
   context: ({ input }) => ({
+    attributes: input.attributes,
     basePath: input.basePath || SIGN_UP_DEFAULT_BASE_PATH,
     loadingStep: 'verifications',
     formRef: input.formRef,
     parent: input.parent,
     resendable: false,
     resendableAfter: RESENDABLE_COUNTDOWN_DEFAULT,
-    resource: input.parent.getSnapshot().context.clerk.client.signUp,
+    resource: input.resource,
   }),
   on: {
     NEXT: [
@@ -284,9 +286,7 @@ export const SignUpVerificationMachine = setup({
               parent: context.parent,
               params: {
                 strategy: 'email_link',
-                redirectUrl: context.parent
-                  .getSnapshot()
-                  .context.clerk.buildUrlWithAuth(`${context.basePath}${MAGIC_LINK_VERIFY_PATH_ROUTE}`),
+                redirectUrl: `${context.basePath}${MAGIC_LINK_VERIFY_PATH_ROUTE}`,
               },
             }),
             onDone: {

packages/elements/src/internals/machines/sign-up/verification.types.ts

@@ -1,5 +1,5 @@
 import type { ClerkAPIResponseError } from '@clerk/shared/error';
-import type { SignUpResource } from '@clerk/types';
+import type { Attributes, SignUpResource } from '@clerk/types';
 import type { ActorRefFrom, DoneActorEvent, ErrorActorEvent } from 'xstate';
 
 import type { FormMachine } from '~/internals/machines/form';
@@ -63,9 +63,11 @@ export type SignUpVerificationEvents =
 // ---------------------------------- Input ---------------------------------- //
 
 export type SignUpVerificationInput = {
+  attributes: Attributes | undefined;
   basePath?: string;
   formRef: ActorRefFrom<typeof FormMachine>;
   parent: SignInRouterMachineActorRef;
+  resource: SignUpResource;
 };
 
 // ---------------------------------- Delays ---------------------------------- //
@@ -80,6 +82,7 @@ export type SignUpVerificationDelays = keyof typeof SignUpVerificationDelays;
 // ---------------------------------- Context ---------------------------------- //
 
 export interface SignUpVerificationContext {
+  attributes: Attributes | undefined;
   basePath: string;
   resource: SignUpResource;
   error?: Error | ClerkAPIResponseError;

packages/elements/src/react/hooks/use-active-tags.hook.ts

@@ -55,6 +55,10 @@ export function useActiveTags<TActor extends AnyActorRef, TTag extends TaggedAct
     (prev, next) => prev.tags === next.tags,
   );
 
+  if (!state) {
+    return false;
+  }
+
   if (typeof tags === 'string') {
     return state.hasTag(tags);
   }