@clerk/expo-passkeys 1.0.0-canary.v5ad1f6c829a30e8efd2d4e7da310a9116c8005db

package/src/ClerkExpoPasskeys.types.ts

@@ -0,0 +1,92 @@
+import type {
+  CredentialReturn,
+  PublicKeyCredentialCreationOptionsWithoutExtensions,
+  PublicKeyCredentialRequestOptionsWithoutExtensions,
+  PublicKeyCredentialWithAuthenticatorAssertionResponse as ClerkPublicKeyCredentialWithAuthenticatorAssertionResponse,
+  PublicKeyCredentialWithAuthenticatorAttestationResponse as ClerkPublicKeyCredentialWithAuthenticatorAttestationResponse,
+} from '@clerk/types';
+
+export type {
+  PublicKeyCredentialRequestOptionsWithoutExtensions,
+  PublicKeyCredentialCreationOptionsWithoutExtensions,
+  CredentialReturn,
+};
+
+type AuthenticatorTransportFuture = 'ble' | 'cable' | 'hybrid' | 'internal' | 'nfc' | 'smart-card' | 'usb';
+
+interface PublicKeyCredentialDescriptorJSON {
+  id: string;
+  type: PublicKeyCredentialType;
+  transports?: AuthenticatorTransportFuture[];
+}
+
+// The serialized JSON to send to "create" native module
+export type SerializedPublicKeyCredentialCreationOptions = Pick<
+  PublicKeyCredentialCreationOptionsWithoutExtensions,
+  'authenticatorSelection' | 'pubKeyCredParams'
+> & {
+  rp: { id: string; name: string };
+  user: {
+    id: string;
+    displayName: string;
+    name: string;
+  };
+  challenge: string;
+  excludeCredentials?: PublicKeyCredentialDescriptorJSON[];
+};
+
+// The serialized JSON to send to "get" native module
+export type SerializedPublicKeyCredentialRequestOptions = Omit<
+  PublicKeyCredentialRequestOptionsWithoutExtensions,
+  'challenge'
+> & {
+  challenge: string;
+};
+
+// The return type from the "get" native module.
+export interface AuthenticationResponseJSON {
+  id: string;
+  rawId: string;
+  response: AuthenticatorAssertionResponseJSON;
+  authenticatorAttachment?: AuthenticatorAttachment;
+  clientExtensionResults: AuthenticationExtensionsClientOutputs;
+  type: PublicKeyCredentialType;
+}
+
+// The serialized response of the native module "create" response to be send back to clerk
+export type PublicKeyCredentialWithAuthenticatorAttestationResponse =
+  ClerkPublicKeyCredentialWithAuthenticatorAttestationResponse & {
+    toJSON: () => any;
+  };
+
+interface AuthenticatorAssertionResponseJSON {
+  clientDataJSON: string;
+  authenticatorData: string;
+  signature: string;
+  userHandle?: string;
+}
+
+// The serialized response of the native module "get" response to be send back to clerk
+export type PublicKeyCredentialWithAuthenticatorAssertionResponse =
+  ClerkPublicKeyCredentialWithAuthenticatorAssertionResponse & {
+    toJSON: () => any;
+  };
+
+interface AuthenticatorAttestationResponseJSON {
+  clientDataJSON: string;
+  attestationObject: string;
+  authenticatorData?: string;
+  transports?: AuthenticatorTransportFuture[];
+  publicKeyAlgorithm?: COSEAlgorithmIdentifier;
+  publicKey?: string;
+}
+
+// The type is returned from from native module "create" response
+export interface RegistrationResponseJSON {
+  id: string;
+  rawId: string;
+  response: AuthenticatorAttestationResponseJSON;
+  authenticatorAttachment?: AuthenticatorAttachment;
+  clientExtensionResults: AuthenticationExtensionsClientOutputs;
+  type: PublicKeyCredentialType;
+}

package/src/ClerkExpoPasskeysModule.ts

@@ -0,0 +1,5 @@
+import { requireNativeModule } from 'expo-modules-core';
+
+// It loads the native module object from the JSI or falls back to
+// the bridge module (from NativeModulesProxy) if the remote debugger is on.
+export default requireNativeModule('ClerkExpoPasskeys');

package/src/ClerkExpoPasskeysModule.web.ts

@@ -0,0 +1 @@
+export default {};

package/src/index.ts

@@ -0,0 +1,194 @@
+import { Platform } from 'react-native';
+
+import type {
+  AuthenticationResponseJSON,
+  CredentialReturn,
+  PublicKeyCredentialCreationOptionsWithoutExtensions,
+  PublicKeyCredentialRequestOptionsWithoutExtensions,
+  PublicKeyCredentialWithAuthenticatorAssertionResponse,
+  PublicKeyCredentialWithAuthenticatorAttestationResponse,
+  RegistrationResponseJSON,
+  SerializedPublicKeyCredentialCreationOptions,
+  SerializedPublicKeyCredentialRequestOptions,
+} from './ClerkExpoPasskeys.types';
+import ClerkExpoPasskeys from './ClerkExpoPasskeysModule';
+import {
+  arrayBufferToBase64Url,
+  base64urlToArrayBuffer,
+  ClerkWebAuthnError,
+  encodeBase64Url,
+  mapNativeErrorToClerkWebAuthnErrorCode,
+  toArrayBuffer,
+} from './utils';
+
+const makeSerializedCreateResponse = (
+  publicCredential: RegistrationResponseJSON,
+): PublicKeyCredentialWithAuthenticatorAttestationResponse => ({
+  id: publicCredential.id,
+  rawId: base64urlToArrayBuffer(publicCredential.rawId),
+  response: {
+    getTransports: () => publicCredential?.response?.transports as string[],
+    attestationObject: base64urlToArrayBuffer(publicCredential.response.attestationObject),
+    clientDataJSON: base64urlToArrayBuffer(publicCredential.response.clientDataJSON),
+  },
+  type: publicCredential.type,
+  authenticatorAttachment: publicCredential.authenticatorAttachment || null,
+  toJSON: () => publicCredential,
+});
+
+export async function create(
+  publicKey: PublicKeyCredentialCreationOptionsWithoutExtensions,
+): Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAttestationResponse>> {
+  if (!publicKey || !publicKey.rp.id) {
+    throw new Error('Invalid public key or RpID');
+  }
+
+  const createOptions: SerializedPublicKeyCredentialCreationOptions = {
+    rp: { id: publicKey.rp.id, name: publicKey.rp.name },
+    user: {
+      id: encodeBase64Url(toArrayBuffer(publicKey.user.id)),
+      displayName: publicKey.user.displayName,
+      name: publicKey.user.name,
+    },
+    pubKeyCredParams: publicKey.pubKeyCredParams,
+    challenge: encodeBase64Url(toArrayBuffer(publicKey.challenge)),
+    authenticatorSelection: {
+      authenticatorAttachment: 'platform',
+      requireResidentKey: true,
+      residentKey: 'required',
+      userVerification: 'required',
+    },
+    excludeCredentials: publicKey.excludeCredentials.map(c => ({
+      type: 'public-key',
+      id: encodeBase64Url(toArrayBuffer(c.id)),
+    })),
+  };
+
+  const createPasskeyModule = Platform.select({
+    android: async () => ClerkExpoPasskeys.create(JSON.stringify(createOptions)),
+    ios: async () =>
+      ClerkExpoPasskeys.create(
+        createOptions.challenge,
+        createOptions.rp.id,
+        createOptions.user.id,
+        createOptions.user.displayName,
+      ),
+    default: null,
+  });
+
+  if (!createPasskeyModule) {
+    throw new Error('Platform not supported');
+  }
+
+  try {
+    const response = await createPasskeyModule();
+    return {
+      publicKeyCredential: makeSerializedCreateResponse(typeof response === 'string' ? JSON.parse(response) : response),
+      error: null,
+    };
+  } catch (error) {
+    return {
+      publicKeyCredential: null,
+      error: mapNativeErrorToClerkWebAuthnErrorCode(error.code, error.message, 'create'),
+    };
+  }
+}
+
+const makeSerializedGetResponse = (
+  publicKeyCredential: AuthenticationResponseJSON,
+): PublicKeyCredentialWithAuthenticatorAssertionResponse => {
+  return {
+    type: publicKeyCredential.type,
+    id: publicKeyCredential.id,
+    rawId: base64urlToArrayBuffer(publicKeyCredential.rawId),
+    authenticatorAttachment: publicKeyCredential?.authenticatorAttachment || null,
+    response: {
+      clientDataJSON: base64urlToArrayBuffer(publicKeyCredential.response.clientDataJSON),
+      authenticatorData: base64urlToArrayBuffer(publicKeyCredential.response.authenticatorData),
+      signature: base64urlToArrayBuffer(publicKeyCredential.response.signature),
+      userHandle: publicKeyCredential?.response.userHandle
+        ? base64urlToArrayBuffer(publicKeyCredential?.response.userHandle)
+        : null,
+    },
+    toJSON: () => publicKeyCredential,
+  };
+};
+
+export async function get({
+  publicKeyOptions,
+}: {
+  publicKeyOptions: PublicKeyCredentialRequestOptionsWithoutExtensions;
+}): Promise<CredentialReturn<PublicKeyCredentialWithAuthenticatorAssertionResponse>> {
+  if (!publicKeyOptions) {
+    throw new Error('publicKeyCredential has not been provided');
+  }
+
+  const serializedPublicCredential: SerializedPublicKeyCredentialRequestOptions = {
+    ...publicKeyOptions,
+    challenge: arrayBufferToBase64Url(publicKeyOptions.challenge),
+  };
+
+  const getPasskeyModule = Platform.select({
+    android: async () => ClerkExpoPasskeys.get(JSON.stringify(serializedPublicCredential)),
+    ios: async () => ClerkExpoPasskeys.get(serializedPublicCredential.challenge, serializedPublicCredential.rpId),
+    default: null,
+  });
+
+  if (!getPasskeyModule) {
+    return {
+      publicKeyCredential: null,
+      error: new ClerkWebAuthnError('Platform is not supported', { code: 'passkey_not_supported' }),
+    };
+  }
+
+  try {
+    const response = await getPasskeyModule();
+    return {
+      publicKeyCredential: makeSerializedGetResponse(typeof response === 'string' ? JSON.parse(response) : response),
+      error: null,
+    };
+  } catch (error) {
+    return {
+      publicKeyCredential: null,
+      error: mapNativeErrorToClerkWebAuthnErrorCode(error.code, error.message, 'get'),
+    };
+  }
+}
+
+const ANDROID_9 = 28;
+const IOS_15 = 15;
+
+export function isSupported() {
+  if (Platform.OS === 'android') {
+    return Platform.Version >= ANDROID_9;
+  }
+
+  if (Platform.OS === 'ios') {
+    return parseInt(Platform.Version, 10) > IOS_15;
+  }
+
+  return false;
+}
+
+// FIX:The autofill function has been implemented for iOS only, but the pop-up is not showing up.
+// This seems to be an issue with Expo that we haven't been able to resolve yet.
+// Further investigation and possibly reaching out to Expo support may be necessary.
+
+// async function autofill(): Promise<AuthenticationResponseJSON | null> {
+//   if (Platform.OS === 'android') {
+//     throw new Error('Not supported');
+//   } else if (Platform.OS === 'ios') {
+//     throw new Error('Not supported');
+//   } else {
+//     throw new Error('Not supported');
+//   }
+// }
+
+export const passkeys = {
+  create,
+  get,
+  isSupported,
+  isAutoFillSupported: () => {
+    throw new Error('Not supported');
+  },
+};

package/src/utils.ts

@@ -0,0 +1,107 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import { Buffer } from 'buffer';
+export { ClerkWebAuthnError };
+
+export function encodeBase64(data: ArrayLike<number> | ArrayBufferLike) {
+  return btoa(String.fromCharCode(...new Uint8Array(data)));
+}
+
+export function encodeBase64Url(data: ArrayLike<number> | ArrayBufferLike) {
+  return encodeBase64(data).replaceAll('=', '').replaceAll('+', '-').replaceAll('/', '_');
+}
+
+export function decodeBase64Url(data: string) {
+  return decodeBase64(data.replaceAll('-', '+').replaceAll('_', '/'));
+}
+
+export function decodeToken(data: string) {
+  const base64 = data.replace(/-/g, '+').replace(/_/g, '/');
+  const jsonPayload = decodeURIComponent(
+    atob(base64)
+      .split('')
+      .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+      .join(''),
+  );
+  return JSON.parse(jsonPayload);
+}
+
+export function decodeBase64(data: string) {
+  return Uint8Array.from(atob(data).split(''), x => x.charCodeAt(0));
+}
+
+export function utf8Decode(buffer: BufferSource) {
+  const textDecoder = new TextDecoder();
+  return textDecoder.decode(buffer);
+}
+
+export function toArrayBuffer(bufferSource: BufferSource) {
+  if (bufferSource instanceof ArrayBuffer) {
+    return bufferSource; // It's already an ArrayBuffer
+  } else if (ArrayBuffer.isView(bufferSource)) {
+    return bufferSource.buffer; // Extract the ArrayBuffer from the typed array
+  } else {
+    throw new TypeError('Expected a BufferSource, but received an incompatible type.');
+  }
+}
+
+export function base64urlToArrayBuffer(base64url: string) {
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+
+  const binaryString = Buffer.from(base64, 'base64').toString('binary');
+
+  const len = binaryString.length;
+  const buffer = new ArrayBuffer(len);
+  const uintArray = new Uint8Array(buffer);
+
+  for (let i = 0; i < len; i++) {
+    uintArray[i] = binaryString.charCodeAt(i);
+  }
+
+  return buffer;
+}
+
+export function arrayBufferToBase64Url(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+
+  const base64String = btoa(binary);
+
+  const base64Url = base64String.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+
+  return base64Url;
+}
+
+export function mapNativeErrorToClerkWebAuthnErrorCode(
+  code: string,
+  message: string,
+  action: 'get' | 'create',
+): ClerkWebAuthnError {
+  if (code === '1000' || code === '1004' || code === 'CreatePublicKeyCredentialDomException') {
+    return new ClerkWebAuthnError(message, {
+      code: action === 'create' ? 'passkey_registration_failed' : 'passkey_retrieval_failed',
+    });
+  }
+  if (
+    code === '1001' ||
+    code === 'CreateCredentialCancellationException' ||
+    code === 'GetCredentialCancellationException'
+  ) {
+    return new ClerkWebAuthnError(message, { code: 'passkey_registration_cancelled' });
+  }
+
+  if (code === '1002') {
+    return new ClerkWebAuthnError(message, { code: 'passkey_invalid_rpID_or_domain' });
+  }
+
+  if (code === '1003' || code === 'CreateCredentialInterruptedException') {
+    return new ClerkWebAuthnError(message, { code: 'passkey_operation_aborted' });
+  }
+
+  return new ClerkWebAuthnError(message, {
+    code: action === 'create' ? 'passkey_registration_failed' : 'passkey_retrieval_failed',
+  });
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+}