Integration Guide

const requestPasskeySession = async (action: "create" | "auth") => {
  const appName = "YourAppName";

  // Generate a session key
  const keypair = Keypair.generate();
  const sessionKey = {
    key: keypair.publicKey.toBase58(),
    expiration: 900, // 15 minutes
  };

  const redirectUrl = encodeURIComponent(window.location.origin + "/");

  // Use different endpoints for create vs auth
  const endpoint = action === "create"
    ? "https://grid.squads.xyz/api/grid/v1/passkeys"
    : "https://grid.squads.xyz/api/grid/v1/passkeys/auth";

  const response = await fetch(endpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-grid-environment": "sandbox", // or 'production'
      "Authorization": "Bearer YOUR_API_KEY",
    },
    body: JSON.stringify({
      meta_info: {
        appName: appName,
        redirectUrl: redirectUrl,
      },
      sessionKey,
    }),
  });

  const data = await response.json();
  setPasskeyUrl(data.url);
  setShowIframe(true);
};

<iframe
  allow="publickey-credentials-get *; publickey-credentials-create *"
  src={passkeyUrl}
  style={{ display: "none" }}
  onError={(e) => {
    console.error("Iframe error:", e);
  }}
  onLoad={() => {
    console.log("Iframe loaded successfully");
  }}
/>

useEffect(() => {
  const handleMessage = (event: MessageEvent) => {
    if (event.data.type === "authz_complete") {
      // event.data.sessionToken: Use this as a signer for Grid operations
      // event.data.passkeyAddress: The onchain address of the passkey
      // event.data.smartAccountAddress: The Grid smart account (for create action)
      console.log("Authorization complete:", event.data);

      const { sessionToken, passkeyAddress, smartAccountAddress } = event.data;

      // For new accounts, store the smart account address
      if (smartAccountAddress) {
        console.log("New smart account created:", smartAccountAddress);
      }

      // Handle successful authentication
    } else if (event.data.type === "authz_error") {
      // event.data.error: Error description
      console.log("Authorization error:", event.data.error);
      // Handle authentication error
    }
  };

  window.addEventListener("message", handleMessage);
  return () => window.removeEventListener("message", handleMessage);
}, []);

import { Linking } from 'react-native';

const appName = "YourAppName";
const action = "create"; // or "auth"
const apiKey = "YOUR_API_KEY";
const environment = "sandbox"; // or 'production'
const redirectUri = Linking.createURL("login");

// Generate a session key
const keypair = Keypair.generate();
const sessionKey = {
  key: keypair.publicKey.toBase58(),
  expiration: 900, // 15 minutes
};

// Use different endpoints for create vs auth
const endpoint = action === "create"
  ? "https://grid.squads.xyz/api/grid/v1/passkeys"
  : "https://grid.squads.xyz/api/grid/v1/passkeys/auth";

const response = await fetch(endpoint, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${apiKey}`,
    "x-grid-environment": environment,
  },
  body: JSON.stringify({
    meta_info: {
      appName,
      redirectUrl: redirectUri,
    },
    sessionKey,
  }),
});

const data = await response.json();

const result = await WebBrowser.openAuthSessionAsync(data.url, redirectUri);

// result is encoded in url
const parsed = LinkingExpo.parse(result.url);
const status = parsed.queryParams?.status;

if (status === "success") {
  const passkeyAddress = parsed.queryParams?.passkeyAddress;
  const smartAccountAddress = parsed.queryParams?.smartAccountAddress;

  // Store account addresses for future transactions
  if (smartAccountAddress) {
    console.log("New Grid account created:", smartAccountAddress);
  }
} else {
  // handle error
  console.error("Passkey error:", parsed.queryParams?.error);
}