Rotate Passkey Credentials Proactively with SocketFi

import { useState } from "react";
import { startCredentialRotation } from "../services/rotation";

type RotationStatus = "idle" | "in-progress" | "success" | "error";

export function RotateCredentialScreen() {
  const [status, setStatus] = useState<RotationStatus>("idle");
  const [error, setError] = useState<string | null>(null);

  const handleRotate = async () => {
    setStatus("in-progress");
    setError(null);
    try {
      await startCredentialRotation();
      setStatus("success");
    } catch (err: unknown) {
      setError(
        err instanceof Error
          ? err.message
          : "Credential rotation failed. Please try again."
      );
      setStatus("error");
    }
  };

  if (status === "success") {
    return <RotationSuccessScreen />;
  }

  return (
    <div>
      <h2>Update Your Passkey</h2>

      <p>
        Use this if you're moving to a new device or want to upgrade your
        sign-in credential. Your wallet address and assets will not change.
      </p>

      {error && (
        <p role="alert" style={{ color: "red" }}>
          {error}
        </p>
      )}

      <button
        onClick={handleRotate}
        disabled={status === "in-progress"}
      >
        {status === "in-progress" ? "Updating passkey…" : "Update Passkey"}
      </button>

      <p style={{ fontSize: "0.875rem", color: "#6B7280" }}>
        You'll be prompted to create a new passkey on this device.
        Make sure you're on the device you want to use going forward.
      </p>
    </div>
  );
}

import { socketfi } from "../socketfi/client";

export async function startCredentialRotation() {
  try {
    return await socketfi.rotateCredential();
  } catch (err: unknown) {
    const message = err instanceof Error ? err.message : "";

    if (message.toLowerCase().includes("authorization")) {
      throw new Error(
        "We couldn't verify your current passkey. Please sign in again and retry."
      );
    }

    if (message.toLowerCase().includes("expired")) {
      throw new Error(
        "The rotation request expired. Please start again."
      );
    }

    throw new Error("Credential rotation failed. Please try again.");
  }
}

type RotationEvent = {
  timestamp: number;
  walletAddress: string;
  outcome: "success" | "failure";
  reason?: string;
  ipAddress?: string;
  userAgent?: string;
};

export async function logRotationEvent(event: RotationEvent) {
  await auditLog.write({ ...event, type: "credential_rotation" });

  if (event.outcome === "success") {
    // Always notify the user — they need to know their credential changed
    await notifications.send({
      walletAddress: event.walletAddress,
      subject: "Your passkey has been updated",
      body: `Your SocketFi wallet passkey was updated on ${new Date(event.timestamp).toLocaleString()}. If you didn't do this, contact support immediately.`,
    });
  }

  if (event.outcome === "failure") {
    await alerting.increment(`rotation.failures.${event.walletAddress}`);
  }
}