feat(clerk-expo): Support expo passkeys

.changeset/late-camels-talk.md

@@ -0,0 +1,50 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+"@clerk/clerk-expo": minor
+"@clerk/expo-passkeys": patch
+---
+
+Introduce experimental support for passkeys in Expo (iOS, Android, and Web).
+
+To use passkeys in Expo projects, pass the `__experimental_passkeys` object, which can be imported from `@clerk/clerk-expo/passkeys`, to the `ClerkProvider` component:
+
+```tsx
+
+import { ClerkProvider } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
+
+<ClerkProvider __experimental_passkeys={passkeys}>
+ {/* Your app here */}
+</ClerkProvider>
+```
+
+The API for using passkeys in Expo projects is the same as the one used in web apps:
+
+```tsx
+// passkey creation
+const { user } = useUser();
+
+const handleCreatePasskey = async () => {
+ if (!user) return;
+ try {
+ return await user.createPasskey();
+ } catch (e: any) {
+ // handle error
+ }
+ };
+
+
+// passkey authentication
+const { signIn, setActive } = useSignIn();
+
+const handlePasskeySignIn = async () => {
+ try {
+ const signInResponse = await signIn.authenticateWithPasskey();
+ await setActive({ session: signInResponse.createdSessionId });
+ } catch (err: any) {
+ //handle error
+ }
+ };
+```

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

@@ -21,6 +21,7 @@ import type {
  ClientResource,
  CreateOrganizationParams,
  CreateOrganizationProps,
+ CredentialReturn,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentResource,
@@ -36,6 +37,10 @@ import type {
  OrganizationProfileProps,
  OrganizationResource,
  OrganizationSwitcherProps,
+ PublicKeyCredentialCreationOptionsWithoutExtensions,
+ PublicKeyCredentialRequestOptionsWithoutExtensions,
+ PublicKeyCredentialWithAuthenticatorAssertionResponse,
+ PublicKeyCredentialWithAuthenticatorAttestationResponse,
  RedirectOptions,
  Resources,
  SDKMetadata,
@@ -185,6 +190,24 @@ export class Clerk implements ClerkInterface {
  #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
  #touchThrottledUntil = 0;
 
+ public __internal_createPublicCredentials:
+ | ((
+ publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+ ) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>>)
+ | undefined;
+
+ public __internal_getPublicCredentials:
+ | (({
+ publicKeyOptions,
+ }: {
+ publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+ }) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>>)
+ | undefined;
+
+ public __internal_isWebAuthnSupported: (() => boolean) | undefined;
+ public __internal_isWebAuthnAutofillSupported: (() => Promise<boolean>) | undefined;
+ public __internal_isWebAuthnPlatformAuthenticatorSupported: (() => Promise<boolean>) | undefined;
+
  get publishableKey(): string {
  return this.#publishableKey;
  }

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

@@ -1,4 +1,8 @@
-import { isWebAuthnPlatformAuthenticatorSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import {
+ isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  DeletedObjectJSON,
  DeletedObjectResource,
@@ -10,7 +14,10 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { ClerkWebAuthnError, serializePublicKeyCredential, webAuthnCreateCredential } from '../../utils/passkeys';
+import {
+ serializePublicKeyCredential,
+ webAuthnCreateCredential as webAuthnCreateCredentialOnWindow,
+} from '../../utils/passkeys';
 import { clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { BaseResource, DeletedObject, PasskeyVerification } from './internal';
 
@@ -55,6 +62,13 @@ export class Passkey extends BaseResource implements PasskeyResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+ const isWebAuthnSupported = Passkey.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnCreateCredential =
+ Passkey.clerk.__internal_createPublicCredentials || webAuthnCreateCredentialOnWindow;
+ const isWebAuthnPlatformAuthenticatorSupported =
+ Passkey.clerk.__internal_isWebAuthnPlatformAuthenticatorSupported ||
+ isWebAuthnPlatformAuthenticatorSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported on this device.', {
  code: 'passkey_not_supported',
@@ -89,7 +103,6 @@ export class Passkey extends BaseResource implements PasskeyResource {
  if (!publicKeyCredential) {
  throw error;
  }
-
  return this.attemptVerification(passkey.id, publicKeyCredential);
  }
 

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

@@ -1,6 +1,10 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import { Poller } from '@clerk/shared/poller';
 import { deepSnakeToCamel } from '@clerk/shared/underscore';
-import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import {
+ isWebAuthnAutofillSupported as isWebAuthnAutofillSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
@@ -41,10 +45,9 @@ import {
  windowNavigate,
 } from '../../utils';
 import {
- ClerkWebAuthnError,
  convertJSONToPublicKeyRequestOptions,
  serializePublicKeyCredentialAssertion,
- webAuthnGetCredential,
+ webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '../../utils/passkeys';
 import { createValidatePassword } from '../../utils/passwords/password';
 import {
@@ -304,6 +307,12 @@ export class SignIn extends BaseResource implements SignInResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+
+ const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow;
+ const isWebAuthnAutofillSupported =
+ SignIn.clerk.__internal_isWebAuthnAutofillSupported || isWebAuthnAutofillSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported', {
  code: 'passkey_not_supported',

packages/clerk-js/src/utils/passkeys.ts

@@ -1,5 +1,7 @@
-import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkRuntimeError } from '@clerk/shared/error';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import type {
+ CredentialReturn,
  PublicKeyCredentialCreationOptionsJSON,
  PublicKeyCredentialCreationOptionsWithoutExtensions,
  PublicKeyCredentialRequestOptionsJSON,
@@ -8,33 +10,9 @@ import type {
  PublicKeyCredentialWithAuthenticatorAttestationResponse,
 } from '@clerk/types';
 
-type CredentialReturn<T> =
- | {
- publicKeyCredential: T;
- error: null;
- }
- | {
- publicKeyCredential: null;
- error: ClerkWebAuthnError | Error;
- };
-
 type WebAuthnCreateCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>;
 type WebAuthnGetCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>;
 
-type ClerkWebAuthnErrorCode =
- // Generic
- | 'passkey_not_supported'
- | 'passkey_pa_not_supported'
- | 'passkey_invalid_rpID_or_domain'
- | 'passkey_already_exists'
- | 'passkey_operation_aborted'
- // Retrieval
- | 'passkey_retrieval_cancelled'
- | 'passkey_retrieval_failed'
- // Registration
- | 'passkey_registration_cancelled'
- | 'passkey_registration_failed';
-
 class Base64Converter {
  static encode(buffer: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
@@ -243,18 +221,6 @@ function serializePublicKeyCredentialAssertion(pkc: PublicKeyCredentialWithAuthe
 const bufferToBase64Url = Base64Converter.encode.bind(Base64Converter);
 const base64UrlToBuffer = Base64Converter.decode.bind(Base64Converter);
 
-export class ClerkWebAuthnError extends ClerkRuntimeError {
- /**
- * A unique code identifying the error, can be used for localization.
- */
- code: ClerkWebAuthnErrorCode;
-
- constructor(message: string, { code }: { code: ClerkWebAuthnErrorCode }) {
- super(message, { code });
- this.code = code;
- }
-}
-
 export {
  base64UrlToBuffer,
  bufferToBase64Url,

packages/expo-passkeys/README.md

@@ -41,7 +41,7 @@
 import { ClerkProvider } from '@clerk/clerk-expo';
 import { passkeys } from '@clerk/clerk-expo/passkeys';
 
-<ClerkProvider passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
+<ClerkProvider __experimental_passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
 ```
 
 ### 🔑 Creating a Passkey

packages/expo-passkeys/example/App.tsx

@@ -1,10 +1,9 @@
 import { ClerkProvider, SignedIn, SignedOut, useAuth, useSignIn, useUser } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
 import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { passkeys } from '../src';
-
 const tokenCache = {
  async getToken(key: string) {
  try {
@@ -143,7 +142,7 @@ export default function App() {
  <ClerkProvider
  publishableKey={publishableKey}
  tokenCache={tokenCache}
-passkeys={passkeys}
+__experimental_passkeys={passkeys}
  >
  <View style={styles.container}>
  <SignedIn>

.changeset/late-camels-talk.md

@@ -0,0 +1,50 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+"@clerk/clerk-expo": minor
+"@clerk/expo-passkeys": patch
+---
+
+Introduce experimental support for passkeys in Expo (iOS, Android, and Web).
+
+To use passkeys in Expo projects, pass the `__experimental_passkeys` object, which can be imported from `@clerk/clerk-expo/passkeys`, to the `ClerkProvider` component:
+
+```tsx
+
+import { ClerkProvider } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
+
+<ClerkProvider __experimental_passkeys={passkeys}>
+ {/* Your app here */}
+</ClerkProvider>
+```
+
+The API for using passkeys in Expo projects is the same as the one used in web apps:
+
+```tsx
+// passkey creation
+const { user } = useUser();
+
+const handleCreatePasskey = async () => {
+ if (!user) return;
+ try {
+ return await user.createPasskey();
+ } catch (e: any) {
+ // handle error
+ }
+ };
+
+
+// passkey authentication
+const { signIn, setActive } = useSignIn();
+
+const handlePasskeySignIn = async () => {
+ try {
+ const signInResponse = await signIn.authenticateWithPasskey();
+ await setActive({ session: signInResponse.createdSessionId });
+ } catch (err: any) {
+ //handle error
+ }
+ };
+```

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

@@ -21,6 +21,7 @@ import type {
  ClientResource,
  CreateOrganizationParams,
  CreateOrganizationProps,
+ CredentialReturn,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentResource,
@@ -36,6 +37,10 @@ import type {
  OrganizationProfileProps,
  OrganizationResource,
  OrganizationSwitcherProps,
+ PublicKeyCredentialCreationOptionsWithoutExtensions,
+ PublicKeyCredentialRequestOptionsWithoutExtensions,
+ PublicKeyCredentialWithAuthenticatorAssertionResponse,
+ PublicKeyCredentialWithAuthenticatorAttestationResponse,
  RedirectOptions,
  Resources,
  SDKMetadata,
@@ -185,6 +190,24 @@ export class Clerk implements ClerkInterface {
  #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
  #touchThrottledUntil = 0;
 
+ public __internal_createPublicCredentials:
+ | ((
+ publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+ ) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>>)
+ | undefined;
+
+ public __internal_getPublicCredentials:
+ | (({
+ publicKeyOptions,
+ }: {
+ publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+ }) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>>)
+ | undefined;
+
+ public __internal_isWebAuthnSupported: (() => boolean) | undefined;
+ public __internal_isWebAuthnAutofillSupported: (() => Promise<boolean>) | undefined;
+ public __internal_isWebAuthnPlatformAuthenticatorSupported: (() => Promise<boolean>) | undefined;
+
  get publishableKey(): string {
  return this.#publishableKey;
  }

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

@@ -1,4 +1,8 @@
-import { isWebAuthnPlatformAuthenticatorSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import {
+ isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  DeletedObjectJSON,
  DeletedObjectResource,
@@ -10,7 +14,10 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { ClerkWebAuthnError, serializePublicKeyCredential, webAuthnCreateCredential } from '../../utils/passkeys';
+import {
+ serializePublicKeyCredential,
+ webAuthnCreateCredential as webAuthnCreateCredentialOnWindow,
+} from '../../utils/passkeys';
 import { clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { BaseResource, DeletedObject, PasskeyVerification } from './internal';
 
@@ -55,6 +62,13 @@ export class Passkey extends BaseResource implements PasskeyResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+ const isWebAuthnSupported = Passkey.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnCreateCredential =
+ Passkey.clerk.__internal_createPublicCredentials || webAuthnCreateCredentialOnWindow;
+ const isWebAuthnPlatformAuthenticatorSupported =
+ Passkey.clerk.__internal_isWebAuthnPlatformAuthenticatorSupported ||
+ isWebAuthnPlatformAuthenticatorSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported on this device.', {
  code: 'passkey_not_supported',
@@ -89,7 +103,6 @@ export class Passkey extends BaseResource implements PasskeyResource {
  if (!publicKeyCredential) {
  throw error;
  }
-
  return this.attemptVerification(passkey.id, publicKeyCredential);
  }
 

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

@@ -1,6 +1,10 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import { Poller } from '@clerk/shared/poller';
 import { deepSnakeToCamel } from '@clerk/shared/underscore';
-import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import {
+ isWebAuthnAutofillSupported as isWebAuthnAutofillSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
@@ -41,10 +45,9 @@ import {
  windowNavigate,
 } from '../../utils';
 import {
- ClerkWebAuthnError,
  convertJSONToPublicKeyRequestOptions,
  serializePublicKeyCredentialAssertion,
- webAuthnGetCredential,
+ webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '../../utils/passkeys';
 import { createValidatePassword } from '../../utils/passwords/password';
 import {
@@ -304,6 +307,12 @@ export class SignIn extends BaseResource implements SignInResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+
+ const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow;
+ const isWebAuthnAutofillSupported =
+ SignIn.clerk.__internal_isWebAuthnAutofillSupported || isWebAuthnAutofillSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported', {
  code: 'passkey_not_supported',

packages/clerk-js/src/utils/passkeys.ts

@@ -1,5 +1,7 @@
-import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkRuntimeError } from '@clerk/shared/error';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import type {
+ CredentialReturn,
  PublicKeyCredentialCreationOptionsJSON,
  PublicKeyCredentialCreationOptionsWithoutExtensions,
  PublicKeyCredentialRequestOptionsJSON,
@@ -8,33 +10,9 @@ import type {
  PublicKeyCredentialWithAuthenticatorAttestationResponse,
 } from '@clerk/types';
 
-type CredentialReturn<T> =
- | {
- publicKeyCredential: T;
- error: null;
- }
- | {
- publicKeyCredential: null;
- error: ClerkWebAuthnError | Error;
- };
-
 type WebAuthnCreateCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>;
 type WebAuthnGetCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>;
 
-type ClerkWebAuthnErrorCode =
- // Generic
- | 'passkey_not_supported'
- | 'passkey_pa_not_supported'
- | 'passkey_invalid_rpID_or_domain'
- | 'passkey_already_exists'
- | 'passkey_operation_aborted'
- // Retrieval
- | 'passkey_retrieval_cancelled'
- | 'passkey_retrieval_failed'
- // Registration
- | 'passkey_registration_cancelled'
- | 'passkey_registration_failed';
-
 class Base64Converter {
  static encode(buffer: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
@@ -243,18 +221,6 @@ function serializePublicKeyCredentialAssertion(pkc: PublicKeyCredentialWithAuthe
 const bufferToBase64Url = Base64Converter.encode.bind(Base64Converter);
 const base64UrlToBuffer = Base64Converter.decode.bind(Base64Converter);
 
-export class ClerkWebAuthnError extends ClerkRuntimeError {
- /**
- * A unique code identifying the error, can be used for localization.
- */
- code: ClerkWebAuthnErrorCode;
-
- constructor(message: string, { code }: { code: ClerkWebAuthnErrorCode }) {
- super(message, { code });
- this.code = code;
- }
-}
-
 export {
  base64UrlToBuffer,
  bufferToBase64Url,

packages/expo-passkeys/README.md

@@ -41,7 +41,7 @@
 import { ClerkProvider } from '@clerk/clerk-expo';
 import { passkeys } from '@clerk/clerk-expo/passkeys';
 
-<ClerkProvider passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
+<ClerkProvider __experimental_passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
 ```
 
 ### 🔑 Creating a Passkey

packages/expo-passkeys/example/App.tsx

@@ -1,10 +1,9 @@
 import { ClerkProvider, SignedIn, SignedOut, useAuth, useSignIn, useUser } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
 import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { passkeys } from '../src';
-
 const tokenCache = {
  async getToken(key: string) {
  try {
@@ -143,7 +142,7 @@ export default function App() {
  <ClerkProvider
  publishableKey={publishableKey}
  tokenCache={tokenCache}
-passkeys={passkeys}
+__experimental_passkeys={passkeys}
  >
  <View style={styles.container}>
  <SignedIn>

.changeset/late-camels-talk.md

@@ -0,0 +1,50 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+"@clerk/clerk-expo": minor
+"@clerk/expo-passkeys": patch
+---
+
+Introduce experimental support for passkeys in Expo (iOS, Android, and Web).
+
+To use passkeys in Expo projects, pass the `__experimental_passkeys` object, which can be imported from `@clerk/clerk-expo/passkeys`, to the `ClerkProvider` component:
+
+```tsx
+
+import { ClerkProvider } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
+
+<ClerkProvider __experimental_passkeys={passkeys}>
+ {/* Your app here */}
+</ClerkProvider>
+```
+
+The API for using passkeys in Expo projects is the same as the one used in web apps:
+
+```tsx
+// passkey creation
+const { user } = useUser();
+
+const handleCreatePasskey = async () => {
+ if (!user) return;
+ try {
+ return await user.createPasskey();
+ } catch (e: any) {
+ // handle error
+ }
+ };
+
+
+// passkey authentication
+const { signIn, setActive } = useSignIn();
+
+const handlePasskeySignIn = async () => {
+ try {
+ const signInResponse = await signIn.authenticateWithPasskey();
+ await setActive({ session: signInResponse.createdSessionId });
+ } catch (err: any) {
+ //handle error
+ }
+ };
+```

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

@@ -21,6 +21,7 @@ import type {
  ClientResource,
  CreateOrganizationParams,
  CreateOrganizationProps,
+ CredentialReturn,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentResource,
@@ -36,6 +37,10 @@ import type {
  OrganizationProfileProps,
  OrganizationResource,
  OrganizationSwitcherProps,
+ PublicKeyCredentialCreationOptionsWithoutExtensions,
+ PublicKeyCredentialRequestOptionsWithoutExtensions,
+ PublicKeyCredentialWithAuthenticatorAssertionResponse,
+ PublicKeyCredentialWithAuthenticatorAttestationResponse,
  RedirectOptions,
  Resources,
  SDKMetadata,
@@ -185,6 +190,24 @@ export class Clerk implements ClerkInterface {
  #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
  #touchThrottledUntil = 0;
 
+ public __internal_createPublicCredentials:
+ | ((
+ publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+ ) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>>)
+ | undefined;
+
+ public __internal_getPublicCredentials:
+ | (({
+ publicKeyOptions,
+ }: {
+ publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+ }) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>>)
+ | undefined;
+
+ public __internal_isWebAuthnSupported: (() => boolean) | undefined;
+ public __internal_isWebAuthnAutofillSupported: (() => Promise<boolean>) | undefined;
+ public __internal_isWebAuthnPlatformAuthenticatorSupported: (() => Promise<boolean>) | undefined;
+
  get publishableKey(): string {
  return this.#publishableKey;
  }

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

@@ -1,4 +1,8 @@
-import { isWebAuthnPlatformAuthenticatorSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import {
+ isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  DeletedObjectJSON,
  DeletedObjectResource,
@@ -10,7 +14,10 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { ClerkWebAuthnError, serializePublicKeyCredential, webAuthnCreateCredential } from '../../utils/passkeys';
+import {
+ serializePublicKeyCredential,
+ webAuthnCreateCredential as webAuthnCreateCredentialOnWindow,
+} from '../../utils/passkeys';
 import { clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { BaseResource, DeletedObject, PasskeyVerification } from './internal';
 
@@ -55,6 +62,13 @@ export class Passkey extends BaseResource implements PasskeyResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+ const isWebAuthnSupported = Passkey.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnCreateCredential =
+ Passkey.clerk.__internal_createPublicCredentials || webAuthnCreateCredentialOnWindow;
+ const isWebAuthnPlatformAuthenticatorSupported =
+ Passkey.clerk.__internal_isWebAuthnPlatformAuthenticatorSupported ||
+ isWebAuthnPlatformAuthenticatorSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported on this device.', {
  code: 'passkey_not_supported',
@@ -89,7 +103,6 @@ export class Passkey extends BaseResource implements PasskeyResource {
  if (!publicKeyCredential) {
  throw error;
  }
-
  return this.attemptVerification(passkey.id, publicKeyCredential);
  }
 

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

@@ -1,6 +1,10 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import { Poller } from '@clerk/shared/poller';
 import { deepSnakeToCamel } from '@clerk/shared/underscore';
-import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import {
+ isWebAuthnAutofillSupported as isWebAuthnAutofillSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
@@ -41,10 +45,9 @@ import {
  windowNavigate,
 } from '../../utils';
 import {
- ClerkWebAuthnError,
  convertJSONToPublicKeyRequestOptions,
  serializePublicKeyCredentialAssertion,
- webAuthnGetCredential,
+ webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '../../utils/passkeys';
 import { createValidatePassword } from '../../utils/passwords/password';
 import {
@@ -304,6 +307,12 @@ export class SignIn extends BaseResource implements SignInResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+
+ const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow;
+ const isWebAuthnAutofillSupported =
+ SignIn.clerk.__internal_isWebAuthnAutofillSupported || isWebAuthnAutofillSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported', {
  code: 'passkey_not_supported',

packages/clerk-js/src/utils/passkeys.ts

@@ -1,5 +1,7 @@
-import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkRuntimeError } from '@clerk/shared/error';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import type {
+ CredentialReturn,
  PublicKeyCredentialCreationOptionsJSON,
  PublicKeyCredentialCreationOptionsWithoutExtensions,
  PublicKeyCredentialRequestOptionsJSON,
@@ -8,33 +10,9 @@ import type {
  PublicKeyCredentialWithAuthenticatorAttestationResponse,
 } from '@clerk/types';
 
-type CredentialReturn<T> =
- | {
- publicKeyCredential: T;
- error: null;
- }
- | {
- publicKeyCredential: null;
- error: ClerkWebAuthnError | Error;
- };
-
 type WebAuthnCreateCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>;
 type WebAuthnGetCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>;
 
-type ClerkWebAuthnErrorCode =
- // Generic
- | 'passkey_not_supported'
- | 'passkey_pa_not_supported'
- | 'passkey_invalid_rpID_or_domain'
- | 'passkey_already_exists'
- | 'passkey_operation_aborted'
- // Retrieval
- | 'passkey_retrieval_cancelled'
- | 'passkey_retrieval_failed'
- // Registration
- | 'passkey_registration_cancelled'
- | 'passkey_registration_failed';
-
 class Base64Converter {
  static encode(buffer: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
@@ -243,18 +221,6 @@ function serializePublicKeyCredentialAssertion(pkc: PublicKeyCredentialWithAuthe
 const bufferToBase64Url = Base64Converter.encode.bind(Base64Converter);
 const base64UrlToBuffer = Base64Converter.decode.bind(Base64Converter);
 
-export class ClerkWebAuthnError extends ClerkRuntimeError {
- /**
- * A unique code identifying the error, can be used for localization.
- */
- code: ClerkWebAuthnErrorCode;
-
- constructor(message: string, { code }: { code: ClerkWebAuthnErrorCode }) {
- super(message, { code });
- this.code = code;
- }
-}
-
 export {
  base64UrlToBuffer,
  bufferToBase64Url,

packages/expo-passkeys/README.md

@@ -41,7 +41,7 @@
 import { ClerkProvider } from '@clerk/clerk-expo';
 import { passkeys } from '@clerk/clerk-expo/passkeys';
 
-<ClerkProvider passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
+<ClerkProvider __experimental_passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
 ```
 
 ### 🔑 Creating a Passkey

packages/expo-passkeys/example/App.tsx

@@ -1,10 +1,9 @@
 import { ClerkProvider, SignedIn, SignedOut, useAuth, useSignIn, useUser } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
 import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { passkeys } from '../src';
-
 const tokenCache = {
  async getToken(key: string) {
  try {
@@ -143,7 +142,7 @@ export default function App() {
  <ClerkProvider
  publishableKey={publishableKey}
  tokenCache={tokenCache}
-passkeys={passkeys}
+__experimental_passkeys={passkeys}
  >
  <View style={styles.container}>
  <SignedIn>

.changeset/late-camels-talk.md

@@ -0,0 +1,50 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+"@clerk/clerk-expo": minor
+"@clerk/expo-passkeys": patch
+---
+
+Introduce experimental support for passkeys in Expo (iOS, Android, and Web).
+
+To use passkeys in Expo projects, pass the `__experimental_passkeys` object, which can be imported from `@clerk/clerk-expo/passkeys`, to the `ClerkProvider` component:
+
+```tsx
+
+import { ClerkProvider } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
+
+<ClerkProvider __experimental_passkeys={passkeys}>
+ {/* Your app here */}
+</ClerkProvider>
+```
+
+The API for using passkeys in Expo projects is the same as the one used in web apps:
+
+```tsx
+// passkey creation
+const { user } = useUser();
+
+const handleCreatePasskey = async () => {
+ if (!user) return;
+ try {
+ return await user.createPasskey();
+ } catch (e: any) {
+ // handle error
+ }
+ };
+
+
+// passkey authentication
+const { signIn, setActive } = useSignIn();
+
+const handlePasskeySignIn = async () => {
+ try {
+ const signInResponse = await signIn.authenticateWithPasskey();
+ await setActive({ session: signInResponse.createdSessionId });
+ } catch (err: any) {
+ //handle error
+ }
+ };
+```

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

@@ -21,6 +21,7 @@ import type {
  ClientResource,
  CreateOrganizationParams,
  CreateOrganizationProps,
+ CredentialReturn,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentResource,
@@ -36,6 +37,10 @@ import type {
  OrganizationProfileProps,
  OrganizationResource,
  OrganizationSwitcherProps,
+ PublicKeyCredentialCreationOptionsWithoutExtensions,
+ PublicKeyCredentialRequestOptionsWithoutExtensions,
+ PublicKeyCredentialWithAuthenticatorAssertionResponse,
+ PublicKeyCredentialWithAuthenticatorAttestationResponse,
  RedirectOptions,
  Resources,
  SDKMetadata,
@@ -185,6 +190,24 @@ export class Clerk implements ClerkInterface {
  #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
  #touchThrottledUntil = 0;
 
+ public __internal_createPublicCredentials:
+ | ((
+ publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+ ) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>>)
+ | undefined;
+
+ public __internal_getPublicCredentials:
+ | (({
+ publicKeyOptions,
+ }: {
+ publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+ }) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>>)
+ | undefined;
+
+ public __internal_isWebAuthnSupported: (() => boolean) | undefined;
+ public __internal_isWebAuthnAutofillSupported: (() => Promise<boolean>) | undefined;
+ public __internal_isWebAuthnPlatformAuthenticatorSupported: (() => Promise<boolean>) | undefined;
+
  get publishableKey(): string {
  return this.#publishableKey;
  }

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

@@ -1,4 +1,8 @@
-import { isWebAuthnPlatformAuthenticatorSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import {
+ isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  DeletedObjectJSON,
  DeletedObjectResource,
@@ -10,7 +14,10 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { ClerkWebAuthnError, serializePublicKeyCredential, webAuthnCreateCredential } from '../../utils/passkeys';
+import {
+ serializePublicKeyCredential,
+ webAuthnCreateCredential as webAuthnCreateCredentialOnWindow,
+} from '../../utils/passkeys';
 import { clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { BaseResource, DeletedObject, PasskeyVerification } from './internal';
 
@@ -55,6 +62,13 @@ export class Passkey extends BaseResource implements PasskeyResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+ const isWebAuthnSupported = Passkey.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnCreateCredential =
+ Passkey.clerk.__internal_createPublicCredentials || webAuthnCreateCredentialOnWindow;
+ const isWebAuthnPlatformAuthenticatorSupported =
+ Passkey.clerk.__internal_isWebAuthnPlatformAuthenticatorSupported ||
+ isWebAuthnPlatformAuthenticatorSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported on this device.', {
  code: 'passkey_not_supported',
@@ -89,7 +103,6 @@ export class Passkey extends BaseResource implements PasskeyResource {
  if (!publicKeyCredential) {
  throw error;
  }
-
  return this.attemptVerification(passkey.id, publicKeyCredential);
  }
 

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

@@ -1,6 +1,10 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import { Poller } from '@clerk/shared/poller';
 import { deepSnakeToCamel } from '@clerk/shared/underscore';
-import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import {
+ isWebAuthnAutofillSupported as isWebAuthnAutofillSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
@@ -41,10 +45,9 @@ import {
  windowNavigate,
 } from '../../utils';
 import {
- ClerkWebAuthnError,
  convertJSONToPublicKeyRequestOptions,
  serializePublicKeyCredentialAssertion,
- webAuthnGetCredential,
+ webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '../../utils/passkeys';
 import { createValidatePassword } from '../../utils/passwords/password';
 import {
@@ -304,6 +307,12 @@ export class SignIn extends BaseResource implements SignInResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+
+ const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow;
+ const isWebAuthnAutofillSupported =
+ SignIn.clerk.__internal_isWebAuthnAutofillSupported || isWebAuthnAutofillSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported', {
  code: 'passkey_not_supported',

packages/clerk-js/src/utils/passkeys.ts

@@ -1,5 +1,7 @@
-import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkRuntimeError } from '@clerk/shared/error';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import type {
+ CredentialReturn,
  PublicKeyCredentialCreationOptionsJSON,
  PublicKeyCredentialCreationOptionsWithoutExtensions,
  PublicKeyCredentialRequestOptionsJSON,
@@ -8,33 +10,9 @@ import type {
  PublicKeyCredentialWithAuthenticatorAttestationResponse,
 } from '@clerk/types';
 
-type CredentialReturn<T> =
- | {
- publicKeyCredential: T;
- error: null;
- }
- | {
- publicKeyCredential: null;
- error: ClerkWebAuthnError | Error;
- };
-
 type WebAuthnCreateCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>;
 type WebAuthnGetCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>;
 
-type ClerkWebAuthnErrorCode =
- // Generic
- | 'passkey_not_supported'
- | 'passkey_pa_not_supported'
- | 'passkey_invalid_rpID_or_domain'
- | 'passkey_already_exists'
- | 'passkey_operation_aborted'
- // Retrieval
- | 'passkey_retrieval_cancelled'
- | 'passkey_retrieval_failed'
- // Registration
- | 'passkey_registration_cancelled'
- | 'passkey_registration_failed';
-
 class Base64Converter {
  static encode(buffer: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
@@ -243,18 +221,6 @@ function serializePublicKeyCredentialAssertion(pkc: PublicKeyCredentialWithAuthe
 const bufferToBase64Url = Base64Converter.encode.bind(Base64Converter);
 const base64UrlToBuffer = Base64Converter.decode.bind(Base64Converter);
 
-export class ClerkWebAuthnError extends ClerkRuntimeError {
- /**
- * A unique code identifying the error, can be used for localization.
- */
- code: ClerkWebAuthnErrorCode;
-
- constructor(message: string, { code }: { code: ClerkWebAuthnErrorCode }) {
- super(message, { code });
- this.code = code;
- }
-}
-
 export {
  base64UrlToBuffer,
  bufferToBase64Url,

packages/expo-passkeys/README.md

@@ -41,7 +41,7 @@
 import { ClerkProvider } from '@clerk/clerk-expo';
 import { passkeys } from '@clerk/clerk-expo/passkeys';
 
-<ClerkProvider passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
+<ClerkProvider __experimental_passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
 ```
 
 ### 🔑 Creating a Passkey

packages/expo-passkeys/example/App.tsx

@@ -1,10 +1,9 @@
 import { ClerkProvider, SignedIn, SignedOut, useAuth, useSignIn, useUser } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
 import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { passkeys } from '../src';
-
 const tokenCache = {
  async getToken(key: string) {
  try {
@@ -143,7 +142,7 @@ export default function App() {
  <ClerkProvider
  publishableKey={publishableKey}
  tokenCache={tokenCache}
-passkeys={passkeys}
+__experimental_passkeys={passkeys}
  >
  <View style={styles.container}>
  <SignedIn>

.changeset/late-camels-talk.md

@@ -0,0 +1,50 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+"@clerk/clerk-expo": minor
+"@clerk/expo-passkeys": patch
+---
+
+Introduce experimental support for passkeys in Expo (iOS, Android, and Web).
+
+To use passkeys in Expo projects, pass the `__experimental_passkeys` object, which can be imported from `@clerk/clerk-expo/passkeys`, to the `ClerkProvider` component:
+
+```tsx
+
+import { ClerkProvider } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
+
+<ClerkProvider __experimental_passkeys={passkeys}>
+ {/* Your app here */}
+</ClerkProvider>
+```
+
+The API for using passkeys in Expo projects is the same as the one used in web apps:
+
+```tsx
+// passkey creation
+const { user } = useUser();
+
+const handleCreatePasskey = async () => {
+ if (!user) return;
+ try {
+ return await user.createPasskey();
+ } catch (e: any) {
+ // handle error
+ }
+ };
+
+
+// passkey authentication
+const { signIn, setActive } = useSignIn();
+
+const handlePasskeySignIn = async () => {
+ try {
+ const signInResponse = await signIn.authenticateWithPasskey();
+ await setActive({ session: signInResponse.createdSessionId });
+ } catch (err: any) {
+ //handle error
+ }
+ };
+```

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

@@ -21,6 +21,7 @@ import type {
  ClientResource,
  CreateOrganizationParams,
  CreateOrganizationProps,
+ CredentialReturn,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentResource,
@@ -36,6 +37,10 @@ import type {
  OrganizationProfileProps,
  OrganizationResource,
  OrganizationSwitcherProps,
+ PublicKeyCredentialCreationOptionsWithoutExtensions,
+ PublicKeyCredentialRequestOptionsWithoutExtensions,
+ PublicKeyCredentialWithAuthenticatorAssertionResponse,
+ PublicKeyCredentialWithAuthenticatorAttestationResponse,
  RedirectOptions,
  Resources,
  SDKMetadata,
@@ -185,6 +190,24 @@ export class Clerk implements ClerkInterface {
  #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
  #touchThrottledUntil = 0;
 
+ public __internal_createPublicCredentials:
+ | ((
+ publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+ ) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>>)
+ | undefined;
+
+ public __internal_getPublicCredentials:
+ | (({
+ publicKeyOptions,
+ }: {
+ publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+ }) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>>)
+ | undefined;
+
+ public __internal_isWebAuthnSupported: (() => boolean) | undefined;
+ public __internal_isWebAuthnAutofillSupported: (() => Promise<boolean>) | undefined;
+ public __internal_isWebAuthnPlatformAuthenticatorSupported: (() => Promise<boolean>) | undefined;
+
  get publishableKey(): string {
  return this.#publishableKey;
  }

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

@@ -1,4 +1,8 @@
-import { isWebAuthnPlatformAuthenticatorSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import {
+ isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  DeletedObjectJSON,
  DeletedObjectResource,
@@ -10,7 +14,10 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { ClerkWebAuthnError, serializePublicKeyCredential, webAuthnCreateCredential } from '../../utils/passkeys';
+import {
+ serializePublicKeyCredential,
+ webAuthnCreateCredential as webAuthnCreateCredentialOnWindow,
+} from '../../utils/passkeys';
 import { clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { BaseResource, DeletedObject, PasskeyVerification } from './internal';
 
@@ -55,6 +62,13 @@ export class Passkey extends BaseResource implements PasskeyResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+ const isWebAuthnSupported = Passkey.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnCreateCredential =
+ Passkey.clerk.__internal_createPublicCredentials || webAuthnCreateCredentialOnWindow;
+ const isWebAuthnPlatformAuthenticatorSupported =
+ Passkey.clerk.__internal_isWebAuthnPlatformAuthenticatorSupported ||
+ isWebAuthnPlatformAuthenticatorSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported on this device.', {
  code: 'passkey_not_supported',
@@ -89,7 +103,6 @@ export class Passkey extends BaseResource implements PasskeyResource {
  if (!publicKeyCredential) {
  throw error;
  }
-
  return this.attemptVerification(passkey.id, publicKeyCredential);
  }
 

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

@@ -1,6 +1,10 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import { Poller } from '@clerk/shared/poller';
 import { deepSnakeToCamel } from '@clerk/shared/underscore';
-import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import {
+ isWebAuthnAutofillSupported as isWebAuthnAutofillSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
@@ -41,10 +45,9 @@ import {
  windowNavigate,
 } from '../../utils';
 import {
- ClerkWebAuthnError,
  convertJSONToPublicKeyRequestOptions,
  serializePublicKeyCredentialAssertion,
- webAuthnGetCredential,
+ webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '../../utils/passkeys';
 import { createValidatePassword } from '../../utils/passwords/password';
 import {
@@ -304,6 +307,12 @@ export class SignIn extends BaseResource implements SignInResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+
+ const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow;
+ const isWebAuthnAutofillSupported =
+ SignIn.clerk.__internal_isWebAuthnAutofillSupported || isWebAuthnAutofillSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported', {
  code: 'passkey_not_supported',

packages/clerk-js/src/utils/passkeys.ts

@@ -1,5 +1,7 @@
-import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkRuntimeError } from '@clerk/shared/error';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import type {
+ CredentialReturn,
  PublicKeyCredentialCreationOptionsJSON,
  PublicKeyCredentialCreationOptionsWithoutExtensions,
  PublicKeyCredentialRequestOptionsJSON,
@@ -8,33 +10,9 @@ import type {
  PublicKeyCredentialWithAuthenticatorAttestationResponse,
 } from '@clerk/types';
 
-type CredentialReturn<T> =
- | {
- publicKeyCredential: T;
- error: null;
- }
- | {
- publicKeyCredential: null;
- error: ClerkWebAuthnError | Error;
- };
-
 type WebAuthnCreateCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>;
 type WebAuthnGetCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>;
 
-type ClerkWebAuthnErrorCode =
- // Generic
- | 'passkey_not_supported'
- | 'passkey_pa_not_supported'
- | 'passkey_invalid_rpID_or_domain'
- | 'passkey_already_exists'
- | 'passkey_operation_aborted'
- // Retrieval
- | 'passkey_retrieval_cancelled'
- | 'passkey_retrieval_failed'
- // Registration
- | 'passkey_registration_cancelled'
- | 'passkey_registration_failed';
-
 class Base64Converter {
  static encode(buffer: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
@@ -243,18 +221,6 @@ function serializePublicKeyCredentialAssertion(pkc: PublicKeyCredentialWithAuthe
 const bufferToBase64Url = Base64Converter.encode.bind(Base64Converter);
 const base64UrlToBuffer = Base64Converter.decode.bind(Base64Converter);
 
-export class ClerkWebAuthnError extends ClerkRuntimeError {
- /**
- * A unique code identifying the error, can be used for localization.
- */
- code: ClerkWebAuthnErrorCode;
-
- constructor(message: string, { code }: { code: ClerkWebAuthnErrorCode }) {
- super(message, { code });
- this.code = code;
- }
-}
-
 export {
  base64UrlToBuffer,
  bufferToBase64Url,

packages/expo-passkeys/README.md

@@ -41,7 +41,7 @@
 import { ClerkProvider } from '@clerk/clerk-expo';
 import { passkeys } from '@clerk/clerk-expo/passkeys';
 
-<ClerkProvider passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
+<ClerkProvider __experimental_passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
 ```
 
 ### 🔑 Creating a Passkey

packages/expo-passkeys/example/App.tsx

@@ -1,10 +1,9 @@
 import { ClerkProvider, SignedIn, SignedOut, useAuth, useSignIn, useUser } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
 import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { passkeys } from '../src';
-
 const tokenCache = {
  async getToken(key: string) {
  try {
@@ -143,7 +142,7 @@ export default function App() {
  <ClerkProvider
  publishableKey={publishableKey}
  tokenCache={tokenCache}
-passkeys={passkeys}
+__experimental_passkeys={passkeys}
  >
  <View style={styles.container}>
  <SignedIn>

.changeset/late-camels-talk.md

@@ -0,0 +1,50 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+"@clerk/clerk-expo": minor
+"@clerk/expo-passkeys": patch
+---
+
+Introduce experimental support for passkeys in Expo (iOS, Android, and Web).
+
+To use passkeys in Expo projects, pass the `__experimental_passkeys` object, which can be imported from `@clerk/clerk-expo/passkeys`, to the `ClerkProvider` component:
+
+```tsx
+
+import { ClerkProvider } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
+
+<ClerkProvider __experimental_passkeys={passkeys}>
+ {/* Your app here */}
+</ClerkProvider>
+```
+
+The API for using passkeys in Expo projects is the same as the one used in web apps:
+
+```tsx
+// passkey creation
+const { user } = useUser();
+
+const handleCreatePasskey = async () => {
+ if (!user) return;
+ try {
+ return await user.createPasskey();
+ } catch (e: any) {
+ // handle error
+ }
+ };
+
+
+// passkey authentication
+const { signIn, setActive } = useSignIn();
+
+const handlePasskeySignIn = async () => {
+ try {
+ const signInResponse = await signIn.authenticateWithPasskey();
+ await setActive({ session: signInResponse.createdSessionId });
+ } catch (err: any) {
+ //handle error
+ }
+ };
+```

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

@@ -21,6 +21,7 @@ import type {
  ClientResource,
  CreateOrganizationParams,
  CreateOrganizationProps,
+ CredentialReturn,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentResource,
@@ -36,6 +37,10 @@ import type {
  OrganizationProfileProps,
  OrganizationResource,
  OrganizationSwitcherProps,
+ PublicKeyCredentialCreationOptionsWithoutExtensions,
+ PublicKeyCredentialRequestOptionsWithoutExtensions,
+ PublicKeyCredentialWithAuthenticatorAssertionResponse,
+ PublicKeyCredentialWithAuthenticatorAttestationResponse,
  RedirectOptions,
  Resources,
  SDKMetadata,
@@ -185,6 +190,24 @@ export class Clerk implements ClerkInterface {
  #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
  #touchThrottledUntil = 0;
 
+ public __internal_createPublicCredentials:
+ | ((
+ publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+ ) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>>)
+ | undefined;
+
+ public __internal_getPublicCredentials:
+ | (({
+ publicKeyOptions,
+ }: {
+ publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+ }) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>>)
+ | undefined;
+
+ public __internal_isWebAuthnSupported: (() => boolean) | undefined;
+ public __internal_isWebAuthnAutofillSupported: (() => Promise<boolean>) | undefined;
+ public __internal_isWebAuthnPlatformAuthenticatorSupported: (() => Promise<boolean>) | undefined;
+
  get publishableKey(): string {
  return this.#publishableKey;
  }

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

@@ -1,4 +1,8 @@
-import { isWebAuthnPlatformAuthenticatorSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import {
+ isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  DeletedObjectJSON,
  DeletedObjectResource,
@@ -10,7 +14,10 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { ClerkWebAuthnError, serializePublicKeyCredential, webAuthnCreateCredential } from '../../utils/passkeys';
+import {
+ serializePublicKeyCredential,
+ webAuthnCreateCredential as webAuthnCreateCredentialOnWindow,
+} from '../../utils/passkeys';
 import { clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { BaseResource, DeletedObject, PasskeyVerification } from './internal';
 
@@ -55,6 +62,13 @@ export class Passkey extends BaseResource implements PasskeyResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+ const isWebAuthnSupported = Passkey.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnCreateCredential =
+ Passkey.clerk.__internal_createPublicCredentials || webAuthnCreateCredentialOnWindow;
+ const isWebAuthnPlatformAuthenticatorSupported =
+ Passkey.clerk.__internal_isWebAuthnPlatformAuthenticatorSupported ||
+ isWebAuthnPlatformAuthenticatorSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported on this device.', {
  code: 'passkey_not_supported',
@@ -89,7 +103,6 @@ export class Passkey extends BaseResource implements PasskeyResource {
  if (!publicKeyCredential) {
  throw error;
  }
-
  return this.attemptVerification(passkey.id, publicKeyCredential);
  }
 

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

@@ -1,6 +1,10 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import { Poller } from '@clerk/shared/poller';
 import { deepSnakeToCamel } from '@clerk/shared/underscore';
-import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import {
+ isWebAuthnAutofillSupported as isWebAuthnAutofillSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
@@ -41,10 +45,9 @@ import {
  windowNavigate,
 } from '../../utils';
 import {
- ClerkWebAuthnError,
  convertJSONToPublicKeyRequestOptions,
  serializePublicKeyCredentialAssertion,
- webAuthnGetCredential,
+ webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '../../utils/passkeys';
 import { createValidatePassword } from '../../utils/passwords/password';
 import {
@@ -304,6 +307,12 @@ export class SignIn extends BaseResource implements SignInResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+
+ const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow;
+ const isWebAuthnAutofillSupported =
+ SignIn.clerk.__internal_isWebAuthnAutofillSupported || isWebAuthnAutofillSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported', {
  code: 'passkey_not_supported',

packages/clerk-js/src/utils/passkeys.ts

@@ -1,5 +1,7 @@
-import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkRuntimeError } from '@clerk/shared/error';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import type {
+ CredentialReturn,
  PublicKeyCredentialCreationOptionsJSON,
  PublicKeyCredentialCreationOptionsWithoutExtensions,
  PublicKeyCredentialRequestOptionsJSON,
@@ -8,33 +10,9 @@ import type {
  PublicKeyCredentialWithAuthenticatorAttestationResponse,
 } from '@clerk/types';
 
-type CredentialReturn<T> =
- | {
- publicKeyCredential: T;
- error: null;
- }
- | {
- publicKeyCredential: null;
- error: ClerkWebAuthnError | Error;
- };
-
 type WebAuthnCreateCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>;
 type WebAuthnGetCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>;
 
-type ClerkWebAuthnErrorCode =
- // Generic
- | 'passkey_not_supported'
- | 'passkey_pa_not_supported'
- | 'passkey_invalid_rpID_or_domain'
- | 'passkey_already_exists'
- | 'passkey_operation_aborted'
- // Retrieval
- | 'passkey_retrieval_cancelled'
- | 'passkey_retrieval_failed'
- // Registration
- | 'passkey_registration_cancelled'
- | 'passkey_registration_failed';
-
 class Base64Converter {
  static encode(buffer: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
@@ -243,18 +221,6 @@ function serializePublicKeyCredentialAssertion(pkc: PublicKeyCredentialWithAuthe
 const bufferToBase64Url = Base64Converter.encode.bind(Base64Converter);
 const base64UrlToBuffer = Base64Converter.decode.bind(Base64Converter);
 
-export class ClerkWebAuthnError extends ClerkRuntimeError {
- /**
- * A unique code identifying the error, can be used for localization.
- */
- code: ClerkWebAuthnErrorCode;
-
- constructor(message: string, { code }: { code: ClerkWebAuthnErrorCode }) {
- super(message, { code });
- this.code = code;
- }
-}
-
 export {
  base64UrlToBuffer,
  bufferToBase64Url,

packages/expo-passkeys/README.md

@@ -41,7 +41,7 @@
 import { ClerkProvider } from '@clerk/clerk-expo';
 import { passkeys } from '@clerk/clerk-expo/passkeys';
 
-<ClerkProvider passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
+<ClerkProvider __experimental_passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
 ```
 
 ### 🔑 Creating a Passkey

packages/expo-passkeys/example/App.tsx

@@ -1,10 +1,9 @@
 import { ClerkProvider, SignedIn, SignedOut, useAuth, useSignIn, useUser } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
 import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { passkeys } from '../src';
-
 const tokenCache = {
  async getToken(key: string) {
  try {
@@ -143,7 +142,7 @@ export default function App() {
  <ClerkProvider
  publishableKey={publishableKey}
  tokenCache={tokenCache}
-passkeys={passkeys}
+__experimental_passkeys={passkeys}
  >
  <View style={styles.container}>
  <SignedIn>

.changeset/late-camels-talk.md

@@ -0,0 +1,50 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+"@clerk/clerk-expo": minor
+"@clerk/expo-passkeys": patch
+---
+
+Introduce experimental support for passkeys in Expo (iOS, Android, and Web).
+
+To use passkeys in Expo projects, pass the `__experimental_passkeys` object, which can be imported from `@clerk/clerk-expo/passkeys`, to the `ClerkProvider` component:
+
+```tsx
+
+import { ClerkProvider } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
+
+<ClerkProvider __experimental_passkeys={passkeys}>
+ {/* Your app here */}
+</ClerkProvider>
+```
+
+The API for using passkeys in Expo projects is the same as the one used in web apps:
+
+```tsx
+// passkey creation
+const { user } = useUser();
+
+const handleCreatePasskey = async () => {
+ if (!user) return;
+ try {
+ return await user.createPasskey();
+ } catch (e: any) {
+ // handle error
+ }
+ };
+
+
+// passkey authentication
+const { signIn, setActive } = useSignIn();
+
+const handlePasskeySignIn = async () => {
+ try {
+ const signInResponse = await signIn.authenticateWithPasskey();
+ await setActive({ session: signInResponse.createdSessionId });
+ } catch (err: any) {
+ //handle error
+ }
+ };
+```

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

@@ -21,6 +21,7 @@ import type {
  ClientResource,
  CreateOrganizationParams,
  CreateOrganizationProps,
+ CredentialReturn,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentResource,
@@ -36,6 +37,10 @@ import type {
  OrganizationProfileProps,
  OrganizationResource,
  OrganizationSwitcherProps,
+ PublicKeyCredentialCreationOptionsWithoutExtensions,
+ PublicKeyCredentialRequestOptionsWithoutExtensions,
+ PublicKeyCredentialWithAuthenticatorAssertionResponse,
+ PublicKeyCredentialWithAuthenticatorAttestationResponse,
  RedirectOptions,
  Resources,
  SDKMetadata,
@@ -185,6 +190,24 @@ export class Clerk implements ClerkInterface {
  #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
  #touchThrottledUntil = 0;
 
+ public __internal_createPublicCredentials:
+ | ((
+ publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+ ) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>>)
+ | undefined;
+
+ public __internal_getPublicCredentials:
+ | (({
+ publicKeyOptions,
+ }: {
+ publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+ }) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>>)
+ | undefined;
+
+ public __internal_isWebAuthnSupported: (() => boolean) | undefined;
+ public __internal_isWebAuthnAutofillSupported: (() => Promise<boolean>) | undefined;
+ public __internal_isWebAuthnPlatformAuthenticatorSupported: (() => Promise<boolean>) | undefined;
+
  get publishableKey(): string {
  return this.#publishableKey;
  }

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

@@ -1,4 +1,8 @@
-import { isWebAuthnPlatformAuthenticatorSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import {
+ isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  DeletedObjectJSON,
  DeletedObjectResource,
@@ -10,7 +14,10 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { ClerkWebAuthnError, serializePublicKeyCredential, webAuthnCreateCredential } from '../../utils/passkeys';
+import {
+ serializePublicKeyCredential,
+ webAuthnCreateCredential as webAuthnCreateCredentialOnWindow,
+} from '../../utils/passkeys';
 import { clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { BaseResource, DeletedObject, PasskeyVerification } from './internal';
 
@@ -55,6 +62,13 @@ export class Passkey extends BaseResource implements PasskeyResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+ const isWebAuthnSupported = Passkey.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnCreateCredential =
+ Passkey.clerk.__internal_createPublicCredentials || webAuthnCreateCredentialOnWindow;
+ const isWebAuthnPlatformAuthenticatorSupported =
+ Passkey.clerk.__internal_isWebAuthnPlatformAuthenticatorSupported ||
+ isWebAuthnPlatformAuthenticatorSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported on this device.', {
  code: 'passkey_not_supported',
@@ -89,7 +103,6 @@ export class Passkey extends BaseResource implements PasskeyResource {
  if (!publicKeyCredential) {
  throw error;
  }
-
  return this.attemptVerification(passkey.id, publicKeyCredential);
  }
 

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

@@ -1,6 +1,10 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import { Poller } from '@clerk/shared/poller';
 import { deepSnakeToCamel } from '@clerk/shared/underscore';
-import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import {
+ isWebAuthnAutofillSupported as isWebAuthnAutofillSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
@@ -41,10 +45,9 @@ import {
  windowNavigate,
 } from '../../utils';
 import {
- ClerkWebAuthnError,
  convertJSONToPublicKeyRequestOptions,
  serializePublicKeyCredentialAssertion,
- webAuthnGetCredential,
+ webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '../../utils/passkeys';
 import { createValidatePassword } from '../../utils/passwords/password';
 import {
@@ -304,6 +307,12 @@ export class SignIn extends BaseResource implements SignInResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+
+ const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow;
+ const isWebAuthnAutofillSupported =
+ SignIn.clerk.__internal_isWebAuthnAutofillSupported || isWebAuthnAutofillSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported', {
  code: 'passkey_not_supported',

packages/clerk-js/src/utils/passkeys.ts

@@ -1,5 +1,7 @@
-import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkRuntimeError } from '@clerk/shared/error';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import type {
+ CredentialReturn,
  PublicKeyCredentialCreationOptionsJSON,
  PublicKeyCredentialCreationOptionsWithoutExtensions,
  PublicKeyCredentialRequestOptionsJSON,
@@ -8,33 +10,9 @@ import type {
  PublicKeyCredentialWithAuthenticatorAttestationResponse,
 } from '@clerk/types';
 
-type CredentialReturn<T> =
- | {
- publicKeyCredential: T;
- error: null;
- }
- | {
- publicKeyCredential: null;
- error: ClerkWebAuthnError | Error;
- };
-
 type WebAuthnCreateCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>;
 type WebAuthnGetCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>;
 
-type ClerkWebAuthnErrorCode =
- // Generic
- | 'passkey_not_supported'
- | 'passkey_pa_not_supported'
- | 'passkey_invalid_rpID_or_domain'
- | 'passkey_already_exists'
- | 'passkey_operation_aborted'
- // Retrieval
- | 'passkey_retrieval_cancelled'
- | 'passkey_retrieval_failed'
- // Registration
- | 'passkey_registration_cancelled'
- | 'passkey_registration_failed';
-
 class Base64Converter {
  static encode(buffer: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
@@ -243,18 +221,6 @@ function serializePublicKeyCredentialAssertion(pkc: PublicKeyCredentialWithAuthe
 const bufferToBase64Url = Base64Converter.encode.bind(Base64Converter);
 const base64UrlToBuffer = Base64Converter.decode.bind(Base64Converter);
 
-export class ClerkWebAuthnError extends ClerkRuntimeError {
- /**
- * A unique code identifying the error, can be used for localization.
- */
- code: ClerkWebAuthnErrorCode;
-
- constructor(message: string, { code }: { code: ClerkWebAuthnErrorCode }) {
- super(message, { code });
- this.code = code;
- }
-}
-
 export {
  base64UrlToBuffer,
  bufferToBase64Url,

packages/expo-passkeys/README.md

@@ -41,7 +41,7 @@
 import { ClerkProvider } from '@clerk/clerk-expo';
 import { passkeys } from '@clerk/clerk-expo/passkeys';
 
-<ClerkProvider passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
+<ClerkProvider __experimental_passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
 ```
 
 ### 🔑 Creating a Passkey

packages/expo-passkeys/example/App.tsx

@@ -1,10 +1,9 @@
 import { ClerkProvider, SignedIn, SignedOut, useAuth, useSignIn, useUser } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
 import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { passkeys } from '../src';
-
 const tokenCache = {
  async getToken(key: string) {
  try {
@@ -143,7 +142,7 @@ export default function App() {
  <ClerkProvider
  publishableKey={publishableKey}
  tokenCache={tokenCache}
-passkeys={passkeys}
+__experimental_passkeys={passkeys}
  >
  <View style={styles.container}>
  <SignedIn>

.changeset/late-camels-talk.md

@@ -0,0 +1,50 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+"@clerk/types": minor
+"@clerk/clerk-expo": minor
+"@clerk/expo-passkeys": patch
+---
+
+Introduce experimental support for passkeys in Expo (iOS, Android, and Web).
+
+To use passkeys in Expo projects, pass the `__experimental_passkeys` object, which can be imported from `@clerk/clerk-expo/passkeys`, to the `ClerkProvider` component:
+
+```tsx
+
+import { ClerkProvider } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
+
+<ClerkProvider __experimental_passkeys={passkeys}>
+ {/* Your app here */}
+</ClerkProvider>
+```
+
+The API for using passkeys in Expo projects is the same as the one used in web apps:
+
+```tsx
+// passkey creation
+const { user } = useUser();
+
+const handleCreatePasskey = async () => {
+ if (!user) return;
+ try {
+ return await user.createPasskey();
+ } catch (e: any) {
+ // handle error
+ }
+ };
+
+
+// passkey authentication
+const { signIn, setActive } = useSignIn();
+
+const handlePasskeySignIn = async () => {
+ try {
+ const signInResponse = await signIn.authenticateWithPasskey();
+ await setActive({ session: signInResponse.createdSessionId });
+ } catch (err: any) {
+ //handle error
+ }
+ };
+```

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

@@ -21,6 +21,7 @@ import type {
  ClientResource,
  CreateOrganizationParams,
  CreateOrganizationProps,
+ CredentialReturn,
  DomainOrProxyUrl,
  EnvironmentJSON,
  EnvironmentResource,
@@ -36,6 +37,10 @@ import type {
  OrganizationProfileProps,
  OrganizationResource,
  OrganizationSwitcherProps,
+ PublicKeyCredentialCreationOptionsWithoutExtensions,
+ PublicKeyCredentialRequestOptionsWithoutExtensions,
+ PublicKeyCredentialWithAuthenticatorAssertionResponse,
+ PublicKeyCredentialWithAuthenticatorAttestationResponse,
  RedirectOptions,
  Resources,
  SDKMetadata,
@@ -185,6 +190,24 @@ export class Clerk implements ClerkInterface {
  #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
  #touchThrottledUntil = 0;
 
+ public __internal_createPublicCredentials:
+ | ((
+ publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+ ) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>>)
+ | undefined;
+
+ public __internal_getPublicCredentials:
+ | (({
+ publicKeyOptions,
+ }: {
+ publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+ }) => Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>>)
+ | undefined;
+
+ public __internal_isWebAuthnSupported: (() => boolean) | undefined;
+ public __internal_isWebAuthnAutofillSupported: (() => Promise<boolean>) | undefined;
+ public __internal_isWebAuthnPlatformAuthenticatorSupported: (() => Promise<boolean>) | undefined;
+
  get publishableKey(): string {
  return this.#publishableKey;
  }

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

@@ -1,4 +1,8 @@
-import { isWebAuthnPlatformAuthenticatorSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import {
+ isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  DeletedObjectJSON,
  DeletedObjectResource,
@@ -10,7 +14,10 @@ import type {
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { ClerkWebAuthnError, serializePublicKeyCredential, webAuthnCreateCredential } from '../../utils/passkeys';
+import {
+ serializePublicKeyCredential,
+ webAuthnCreateCredential as webAuthnCreateCredentialOnWindow,
+} from '../../utils/passkeys';
 import { clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { BaseResource, DeletedObject, PasskeyVerification } from './internal';
 
@@ -55,6 +62,13 @@ export class Passkey extends BaseResource implements PasskeyResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+ const isWebAuthnSupported = Passkey.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnCreateCredential =
+ Passkey.clerk.__internal_createPublicCredentials || webAuthnCreateCredentialOnWindow;
+ const isWebAuthnPlatformAuthenticatorSupported =
+ Passkey.clerk.__internal_isWebAuthnPlatformAuthenticatorSupported ||
+ isWebAuthnPlatformAuthenticatorSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported on this device.', {
  code: 'passkey_not_supported',
@@ -89,7 +103,6 @@ export class Passkey extends BaseResource implements PasskeyResource {
  if (!publicKeyCredential) {
  throw error;
  }
-
  return this.attemptVerification(passkey.id, publicKeyCredential);
  }
 

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

@@ -1,6 +1,10 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import { Poller } from '@clerk/shared/poller';
 import { deepSnakeToCamel } from '@clerk/shared/underscore';
-import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
+import {
+ isWebAuthnAutofillSupported as isWebAuthnAutofillSupportedOnWindow,
+ isWebAuthnSupported as isWebAuthnSupportedOnWindow,
+} from '@clerk/shared/webauthn';
 import type {
  AttemptFirstFactorParams,
  AttemptSecondFactorParams,
@@ -41,10 +45,9 @@ import {
  windowNavigate,
 } from '../../utils';
 import {
- ClerkWebAuthnError,
  convertJSONToPublicKeyRequestOptions,
  serializePublicKeyCredentialAssertion,
- webAuthnGetCredential,
+ webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '../../utils/passkeys';
 import { createValidatePassword } from '../../utils/passwords/password';
 import {
@@ -304,6 +307,12 @@ export class SignIn extends BaseResource implements SignInResource {
  * The UI should always prevent from this method being called if WebAuthn is not supported.
  * As a precaution we need to check if WebAuthn is supported.
  */
+
+ const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow;
+ const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow;
+ const isWebAuthnAutofillSupported =
+ SignIn.clerk.__internal_isWebAuthnAutofillSupported || isWebAuthnAutofillSupportedOnWindow;
+
  if (!isWebAuthnSupported()) {
  throw new ClerkWebAuthnError('Passkeys are not supported', {
  code: 'passkey_not_supported',

packages/clerk-js/src/utils/passkeys.ts

@@ -1,5 +1,7 @@
-import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { ClerkRuntimeError } from '@clerk/shared/error';
+import { ClerkWebAuthnError } from '@clerk/shared/error';
 import type {
+ CredentialReturn,
  PublicKeyCredentialCreationOptionsJSON,
  PublicKeyCredentialCreationOptionsWithoutExtensions,
  PublicKeyCredentialRequestOptionsJSON,
@@ -8,33 +10,9 @@ import type {
  PublicKeyCredentialWithAuthenticatorAttestationResponse,
 } from '@clerk/types';
 
-type CredentialReturn<T> =
- | {
- publicKeyCredential: T;
- error: null;
- }
- | {
- publicKeyCredential: null;
- error: ClerkWebAuthnError | Error;
- };
-
 type WebAuthnCreateCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>;
 type WebAuthnGetCredentialReturn = CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>;
 
-type ClerkWebAuthnErrorCode =
- // Generic
- | 'passkey_not_supported'
- | 'passkey_pa_not_supported'
- | 'passkey_invalid_rpID_or_domain'
- | 'passkey_already_exists'
- | 'passkey_operation_aborted'
- // Retrieval
- | 'passkey_retrieval_cancelled'
- | 'passkey_retrieval_failed'
- // Registration
- | 'passkey_registration_cancelled'
- | 'passkey_registration_failed';
-
 class Base64Converter {
  static encode(buffer: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
@@ -243,18 +221,6 @@ function serializePublicKeyCredentialAssertion(pkc: PublicKeyCredentialWithAuthe
 const bufferToBase64Url = Base64Converter.encode.bind(Base64Converter);
 const base64UrlToBuffer = Base64Converter.decode.bind(Base64Converter);
 
-export class ClerkWebAuthnError extends ClerkRuntimeError {
- /**
- * A unique code identifying the error, can be used for localization.
- */
- code: ClerkWebAuthnErrorCode;
-
- constructor(message: string, { code }: { code: ClerkWebAuthnErrorCode }) {
- super(message, { code });
- this.code = code;
- }
-}
-
 export {
  base64UrlToBuffer,
  bufferToBase64Url,

packages/expo-passkeys/README.md

@@ -41,7 +41,7 @@
 import { ClerkProvider } from '@clerk/clerk-expo';
 import { passkeys } from '@clerk/clerk-expo/passkeys';
 
-<ClerkProvider passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
+<ClerkProvider __experimental_passkeys={passkeys}>{/* Your app here */}</ClerkProvider>;
 ```
 
 ### 🔑 Creating a Passkey

packages/expo-passkeys/example/App.tsx

@@ -1,10 +1,9 @@
 import { ClerkProvider, SignedIn, SignedOut, useAuth, useSignIn, useUser } from '@clerk/clerk-expo';
+import { passkeys } from '@clerk/clerk-expo/passkeys';
 import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { passkeys } from '../src';
-
 const tokenCache = {
  async getToken(key: string) {
  try {
@@ -143,7 +142,7 @@ export default function App() {
  <ClerkProvider
  publishableKey={publishableKey}
  tokenCache={tokenCache}
-passkeys={passkeys}
+__experimental_passkeys={passkeys}
  >
  <View style={styles.container}>
  <SignedIn>