Tempo Passkey (P-256 / WebAuthn) Integration

1
// ContextWrapper.tsx
2
import {KeyManager, webAuthn} from '@wagmi/core/tempo';
3
import {createConfig, http, WagmiProvider} from 'wagmi';
4
import {
5
  tempo,
6
  tempoModerato /* ...plus your other chains */,
7
} from 'wagmi/chains';
8
import {injected, walletConnect} from 'wagmi/connectors';
9
10
const tempoKeyManagerUrl = import.meta.env.VITE_TEMPO_KEY_MANAGER_URL?.trim();
11
12
function createTempoWebAuthnConnector() {
13
  if (tempoKeyManagerUrl) {
14
    return webAuthn({
15
      keyManager: KeyManager.http(tempoKeyManagerUrl),
16
      createOptions: {label: 'My Merchant - Tempo passkey'},
17
    });
18
  }
19
20
  if (import.meta.env.PROD) {
21
    // Do not silently fall back to browser-local key lookup in production.
22
    // Disable passkeys or fail startup until VITE_TEMPO_KEY_MANAGER_URL is set.
23
    return null;
24
  }
25
26
  return webAuthn({
27
    // eslint-disable-next-line @typescript-eslint/no-deprecated
28
    keyManager: KeyManager.localStorage(),
29
    createOptions: {label: 'My Merchant - Tempo passkey'},
30
  });
31
}
32
33
const tempoWebAuthnConnector = createTempoWebAuthnConnector();
34
35
const config = createConfig({
36
  chains: [tempo, tempoModerato /* ...plus your other chains */],
37
  connectors: tempoWebAuthnConnector
38
    ? [tempoWebAuthnConnector, injected(), walletConnect({projectId})]
39
    : [injected(), walletConnect({projectId})],
40
  transports: {
41
    [tempo.id]: http(),
42
    [tempoModerato.id]: http(),
43
    // ...other chains
44
  },
45
});
46
47
export const TEMPO_WEBAUTHN_CONNECTOR_TYPE = webAuthn.type; // 'webAuthn'
48
49
export function ContextWrapper({children}) {
50
  return (
51
    <WagmiProvider config={config}>
52
      {/* ...QueryClientProvider, your app tree... */}
53
      {children}
54
    </WagmiProvider>
55
  );
56
}

1
import {tempo, tempoModerato} from 'wagmi/chains';
2
import {useConnect, useConnections, useDisconnect} from 'wagmi';
3
import {TEMPO_WEBAUTHN_CONNECTOR_TYPE} from './ContextWrapper';
4
5
const tempoChainId = import.meta.env.PROD ? tempo.id : tempoModerato.id;
6
7
function TempoPasskeyGate({children}) {
8
  const connections = useConnections();
9
  const {connect, connectors, isPending, error} = useConnect();
10
  const {disconnect} = useDisconnect();
11
12
  const tempoAccount = connections.find(
13
    c => c.connector.type === TEMPO_WEBAUTHN_CONNECTOR_TYPE
14
  );
15
  const tempoConnector = connectors.find(
16
    c => c.type === TEMPO_WEBAUTHN_CONNECTOR_TYPE
17
  );
18
19
  // wagmi's public `ConnectVariables` type does not expose `capabilities`,
20
  // but the Tempo `webAuthn` connector consumes it at runtime. Scope the
21
  // cast to `Parameters<typeof connect>[0]` so a future wagmi rename still
22
  // fails type-checking at this call site.
23
  const connectWith = (type: 'sign-up' | 'sign-in') => {
24
    if (!tempoConnector) return;
25
    const variables = {
26
      connector: tempoConnector,
27
      chainId: tempoChainId,
28
      capabilities: {type},
29
    } as Parameters<typeof connect>[0];
30
    connect(variables);
31
  };
32
33
  if (!tempoAccount) {
34
    return (
35
      <div>
36
        <button disabled={isPending} onClick={() => connectWith('sign-up')}>
37
          Register new passkey
38
        </button>
39
        <button disabled={isPending} onClick={() => connectWith('sign-in')}>
40
          Sign in with existing passkey
41
        </button>
42
        {error && <p>{error.message}</p>}
43
      </div>
44
    );
45
  }
46
47
  return (
48
    <>
49
      <div>
50
        Signed in as <code>{tempoAccount.accounts[0]}</code>
51
        <button onClick={() => disconnect({connector: tempoAccount.connector})}>
52
          Sign out
53
        </button>
54
      </div>
55
      {children(tempoAccount)}
56
    </>
57
  );
58
}

1
import {useCallback} from 'react';
2
import {useConnections, useSignMessage, useSignTypedData} from 'wagmi';
3
import type {Hex} from 'viem';
4
import type {EthWallet} from '@coinflowlabs/react';
5
import {TEMPO_WEBAUTHN_CONNECTOR_TYPE} from './ContextWrapper';
6
7
type Eip712Payload = {
8
  domain: Record<string, unknown>;
9
  types: Record<string, readonly {name: string; type: string}[]>;
10
  primaryType: string;
11
  message: Record<string, unknown>;
12
};
13
14
function parseJsonMessage(message: string): unknown {
15
  try {
16
    return JSON.parse(message) as unknown;
17
  } catch {
18
    return undefined;
19
  }
20
}
21
22
function isEip712Payload(value: unknown): value is Eip712Payload {
23
  if (value === null || typeof value !== 'object') return false;
24
  const v = value as Record<string, unknown>;
25
  return (
26
    typeof v.domain === 'object' &&
27
    v.domain !== null &&
28
    typeof v.types === 'object' &&
29
    v.types !== null &&
30
    typeof v.primaryType === 'string' &&
31
    typeof v.message === 'object' &&
32
    v.message !== null
33
  );
34
}
35
36
export function useTempoPasskeyWallet(): EthWallet | undefined {
37
  const connections = useConnections();
38
  const {signMessageAsync} = useSignMessage();
39
  const {signTypedDataAsync} = useSignTypedData();
40
41
  const tempoAccount = connections.find(
42
    c => c.connector.type === TEMPO_WEBAUTHN_CONNECTOR_TYPE
43
  );
44
  const address = tempoAccount?.accounts[0];
45
46
  const signMessage = useCallback(
47
    async (message: string): Promise<Hex> => {
48
      if (!tempoAccount || !address) {
49
        throw new Error('Tempo passkey wallet not connected - sign in first.');
50
      }
51
52
      const parsed = parseJsonMessage(message);
53
      if (isEip712Payload(parsed)) {
54
        return signTypedDataAsync({
55
          ...parsed,
56
          connector: tempoAccount.connector,
57
        } as Parameters<typeof signTypedDataAsync>[0]);
58
      }
59
60
      return signMessageAsync({
61
        message,
62
        connector: tempoAccount.connector,
63
      });
64
    },
65
    [tempoAccount, address, signMessageAsync, signTypedDataAsync]
66
  );
67
68
  if (!tempoAccount || !address) return undefined;
69
70
  return {
71
    address,
72
    signMessage,
73
    sendTransaction: () =>
74
      Promise.reject(
75
        new Error(
76
          'Tempo passkey redemption does not require sendTransaction — Coinflow submits the redemption on your behalf.'
77
        )
78
      ),
79
  };
80
}

1
function TempoPurchaseContent() {
2
  const wallet = useTempoPasskeyWallet();
3
  if (!wallet) return null;
4
5
  return (
6
    <CoinflowPurchase
7
      wallet={wallet}
8
      blockchain={'tempo'}
9
      partialUsdcChecked={false}
10
      /* ...other props... */
11
    />
12
  );
13
}
14
15
function TempoPurchase() {
16
  return <TempoPasskeyGate>{() => <TempoPurchaseContent />}</TempoPasskeyGate>;
17
}

1
<CoinflowPurchase
2
  wallet={wallet}
3
  blockchain={chain}
4
  partialUsdcChecked={chain !== 'tempo'}
5
  /* ...other props... */
6
/>