feat: useBiometric, useHaptics

index.d.ts

@@ -116,6 +116,17 @@ export type SpeechState = {
   volume: number;
 };
 
+export type ConfigCreatePasskey = {
+  rpName: string;
+  unSupportedAlertText: string;
+};
+
+export type CreatePasskeyParams = {
+  name: string;
+  displayName: string;
+  configs?: ConfigCreatePasskey;
+};
+
 declare module "@uidotdev/usehooks" {
   export function useBattery(): BatteryManager;
 
@@ -260,4 +271,11 @@ declare module "@uidotdev/usehooks" {
     width: number | null;
     height: number | null;
   };
+
+  export function useBiometric(): {
+    createPasskey: (params: CreatePasskeyParams) => Promise<void>;
+    verifyPasskey: (params?: VerifyPasskeyParams) => Promise<void>;
+  };
+
+  export function useHaptics(): (pattern?: number | number[]) => void;
 }

index.js

@@ -1365,3 +1365,101 @@ export function useWindowSize() {
 
   return size;
 }
+
+function generateRandomChallenge() {
+  const length = 32;
+  const randomValues = new Uint8Array(length);
+  window.crypto.getRandomValues(randomValues);
+  return randomValues;
+}
+
+async function createPasskey({
+  name,
+  displayName,
+  configs,
+}) {
+  const Window = window;
+  if (
+    !navigator.credentials ||
+    !navigator.credentials.create ||
+    !navigator.credentials.get
+  ) {
+    return alert(configs?.unSupportedAlertText || 'Need to run in https for biometric');
+  }
+
+  const credentials = await navigator.credentials.create({
+    publicKey: {
+      challenge: generateRandomChallenge(),
+      rp: { name: configs?.rpName || 'App', id: Window.location.hostname },
+      user: { id: new Uint8Array(16).fill(1), name, displayName },
+      pubKeyCredParams: [
+        { type: 'public-key', alg: -7 },
+        { type: 'public-key', alg: -257 },
+      ],
+      timeout: 60000,
+      authenticatorSelection: {
+        residentKey: 'preferred',
+        requireResidentKey: false,
+        userVerification: 'preferred',
+      },
+      attestation: 'none',
+      extensions: { credProps: true },
+    },
+  });
+
+  Window.currentPasskey = credentials;
+}
+
+async function verifyPasskey() {
+  const Window = window;
+  try {
+    await navigator.credentials.get({
+      publicKey: {
+        challenge: generateRandomChallenge(),
+        allowCredentials: [
+          { type: 'public-key', id: Window.currentPasskey.rawId },
+        ],
+      },
+    });
+  } catch (err) {
+    alert(err);
+  }
+}
+
+export function useBiometric() {
+  return { createPasskey, verifyPasskey };
+}
+
+export function useHaptics() {
+  const triggerHaptics = React.useCallback((pattern) => {
+    if (navigator.vibrate) {
+      navigator.vibrate(pattern || 50);
+    } else {
+      const el = document.createElement('div');
+      const id = Math.random().toString(36).slice(2);
+      el.innerHTML =
+        `<input type="checkbox" id="` +
+        id +
+        `" switch /><label for="` +
+        id +
+        `"></label>`;
+      el.setAttribute(
+        'style',
+        'display:none !important;opacity:0 !important;visibility:hidden !important;',
+      );
+      const body = document.querySelector('body');
+      if (body) {
+        body.appendChild(el);
+        const label = el.querySelector('label');
+        if (label) {
+          label.click();
+        }
+        setTimeout(() => {
+          el.remove();
+        }, 1500);
+      }
+    }
+  }, []);
+
+  return triggerHaptics;
+}