feat(elements): Add sign up/sign in with Metamask (#3879)

Author: dstaley

.changeset/rich-parrots-crash.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": minor
+---
+
+Add Metamask (Web3) support for sign in and sign up

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

@@ -340,6 +340,9 @@ export const SignInRouterMachine = setup({
         'AUTHENTICATE.PASSKEY.AUTOFILL': {
           actions: sendTo('start', ({ event }) => event),
         },
+        'AUTHENTICATE.WEB3': {
+          actions: sendTo('start', ({ event }) => event),
+        },
         NEXT: [
           {
             guard: 'isComplete',

packages/elements/src/internals/machines/sign-in/start.machine.ts

@@ -1,7 +1,8 @@
-import type { SignInResource } from '@clerk/types';
-import { fromPromise, not, sendTo, setup } from 'xstate';
+import type { SignInResource, Web3Strategy } from '@clerk/types';
+import { assertEvent, fromPromise, not, sendTo, setup } from 'xstate';
 
 import { SIGN_IN_DEFAULT_BASE_PATH } from '~/internals/constants';
+import { ClerkElementsRuntimeError } from '~/internals/errors';
 import type { FormFields } from '~/internals/machines/form';
 import { sendToLoading } from '~/internals/machines/shared';
 import { assertActorEventError } from '~/internals/machines/utils/assert';
@@ -23,6 +24,14 @@ export const SignInStartMachine = setup({
         flow,
       });
     }),
+    attemptWeb3: fromPromise<SignInResource, { parent: SignInRouterMachineActorRef; strategy: Web3Strategy }>(
+      ({ input: { parent, strategy } }) => {
+        if (strategy === 'web3_metamask_signature') {
+          return parent.getSnapshot().context.clerk.client.signIn.authenticateWithMetamask();
+        }
+        throw new ClerkElementsRuntimeError(`Unsupported Web3 strategy: ${strategy}`);
+      },
+    ),
     attempt: fromPromise<SignInResource, { parent: SignInRouterMachineActorRef; fields: FormFields }>(
       ({ input: { fields, parent } }) => {
         const clerk = parent.getSnapshot().context.clerk;
@@ -94,6 +103,11 @@ export const SignInStartMachine = setup({
           target: 'AttemptingPasskeyAutoFill',
           reenter: false,
         },
+        'AUTHENTICATE.WEB3': {
+          guard: not('isExampleMode'),
+          target: 'AttemptingWeb3',
+          reenter: true,
+        },
       },
     },
     Attempting: {
@@ -163,5 +177,27 @@ export const SignInStartMachine = setup({
         },
       },
     },
+    AttemptingWeb3: {
+      tags: ['state:attempting', 'state:loading'],
+      entry: 'sendToLoading',
+      invoke: {
+        id: 'attemptWeb3',
+        src: 'attemptWeb3',
+        input: ({ context, event }) => {
+          assertEvent(event, 'AUTHENTICATE.WEB3');
+          return {
+            parent: context.parent,
+            strategy: event.strategy,
+          };
+        },
+        onDone: {
+          actions: ['sendToNext', 'sendToLoading'],
+        },
+        onError: {
+          actions: ['setFormErrors', 'sendToLoading'],
+          target: 'Pending',
+        },
+      },
+    },
   },
 });

packages/elements/src/internals/machines/sign-in/start.types.ts

@@ -1,4 +1,5 @@
 import type { ClerkAPIResponseError } from '@clerk/shared/error';
+import type { Web3Strategy } from '@clerk/types';
 import type { ActorRefFrom, DoneActorEvent, ErrorActorEvent } from 'xstate';
 
 import type { FormMachine } from '~/internals/machines/form';
@@ -14,12 +15,14 @@ export type SignInStartTags = 'state:pending' | 'state:attempting' | 'state:load
 export type SignInStartSubmitEvent = { type: 'SUBMIT' };
 export type SignInStartPasskeyEvent = { type: 'AUTHENTICATE.PASSKEY' };
 export type SignInStartPasskeyAutofillEvent = { type: 'AUTHENTICATE.PASSKEY.AUTOFILL' };
+export type SignInStartWeb3Event = { type: 'AUTHENTICATE.WEB3'; strategy: Web3Strategy };
 
 export type SignInStartEvents =
   | ErrorActorEvent
   | SignInStartSubmitEvent
   | SignInStartPasskeyEvent
   | SignInStartPasskeyAutofillEvent
+  | SignInStartWeb3Event
   | DoneActorEvent;
 
 // ---------------------------------- Input ---------------------------------- //

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

@@ -206,6 +206,9 @@ export const SignUpRouterMachine = setup({
         },
       })),
     },
+    'AUTHENTICATE.WEB3': {
+      actions: sendTo('start', ({ event }) => event),
+    },
     'FORM.ATTACH': {
       description: 'Attach/re-attach the form to the router.',
       actions: enqueueActions(({ enqueue, event }) => {

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

@@ -1,7 +1,8 @@
-import type { SignUpResource } from '@clerk/types';
-import { fromPromise, not, sendTo, setup } from 'xstate';
+import type { SignUpResource, Web3Strategy } from '@clerk/types';
+import { assertEvent, fromPromise, not, sendTo, setup } from 'xstate';
 
 import { SIGN_UP_DEFAULT_BASE_PATH } from '~/internals/constants';
+import { ClerkElementsRuntimeError } from '~/internals/errors';
 import type { FormFields } from '~/internals/machines/form';
 import { sendToLoading } from '~/internals/machines/shared';
 import { fieldsToSignUpParams } from '~/internals/machines/sign-up/utils';
@@ -29,6 +30,14 @@ export const SignUpStartMachine = setup({
         return parent.getSnapshot().context.clerk.client.signUp.create(params);
       },
     ),
+    attemptWeb3: fromPromise<SignUpResource, { parent: SignInRouterMachineActorRef; strategy: Web3Strategy }>(
+      ({ input: { parent, strategy } }) => {
+        if (strategy === 'web3_metamask_signature') {
+          return parent.getSnapshot().context.clerk.client.signUp.authenticateWithMetamask();
+        }
+        throw new ClerkElementsRuntimeError(`Unsupported Web3 strategy: ${strategy}`);
+      },
+    ),
     thirdParty: ThirdPartyMachine,
   },
   actions: {
@@ -84,6 +93,11 @@ export const SignUpStartMachine = setup({
           target: 'Attempting',
           reenter: true,
         },
+        'AUTHENTICATE.WEB3': {
+          guard: not('isExampleMode'),
+          target: 'AttemptingWeb3',
+          reenter: true,
+        },
       },
     },
     Attempting: {
@@ -105,5 +119,27 @@ export const SignUpStartMachine = setup({
         },
       },
     },
+    AttemptingWeb3: {
+      tags: ['state:attempting', 'state:loading'],
+      entry: 'sendToLoading',
+      invoke: {
+        id: 'attemptCreateWeb3',
+        src: 'attemptWeb3',
+        input: ({ context, event }) => {
+          assertEvent(event, 'AUTHENTICATE.WEB3');
+          return {
+            parent: context.parent,
+            strategy: event.strategy,
+          };
+        },
+        onDone: {
+          actions: ['sendToNext', 'sendToLoading'],
+        },
+        onError: {
+          actions: ['setFormErrors', 'sendToLoading'],
+          target: 'Pending',
+        },
+      },
+    },
   },
 });