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

.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

@@ -334,6 +334,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

@@ -195,6 +195,9 @@ export const SignUpRouterMachine = setup({
  params: { strategy: 'saml' },
  }),
  },
+ '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',
+ },
+ },
+ },
  },
 });