Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

Reown AppKit Integration

Combine JAW passkey smart accounts with Reown AppKit to offer passkey login alongside other wallets.

Both connectors share a single wagmi config — all standard hooks (useAccount, useSendCalls, useSignMessage) work regardless of which connector the user chose.

Installation

Add @jaw.id/wagmi to your existing Reown AppKit project:

npm
npm install @jaw.id/wagmi

Add it to your .env.local:

NEXT_PUBLIC_JAW_API_KEY=your_jaw_api_key

1. Create the Connector

import { jaw } from "@jaw.id/wagmi";
 
const jawConnector = jaw({
  apiKey: process.env.NEXT_PUBLIC_JAW_API_KEY!,
  appName: "My App",
  defaultChainId: baseSepolia.id,
});

See Connector for all available options (ens, paymasters, preference, etc).

2. Pass to the WagmiAdapter

Add jawConnector to the connectors array in your existing WagmiAdapter config:

import { cookieStorage, createStorage, http } from "@wagmi/core";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { baseSepolia, base } from "@reown/appkit/networks";
import { jaw } from "@jaw.id/wagmi";
 
const jawConnector = jaw({
  apiKey: process.env.NEXT_PUBLIC_JAW_API_KEY!,
  appName: "My App",
  defaultChainId: baseSepolia.id,
});
 
export const wagmiAdapter = new WagmiAdapter({
  storage: createStorage({ storage: cookieStorage }),
  ssr: true,
  projectId,
  networks: [baseSepolia, base],
  connectors: [jawConnector], // Add JAW here
  transports: {
    [baseSepolia.id]: http(),
    [base.id]: http(),
  },
});
 
export const config = wagmiAdapter.wagmiConfig;

That's it. JAW passkey accounts are now available alongside all other AppKit wallets. All standard wagmi hooks (useAccount, useSendCalls, useSignMessage) work regardless of which connector the user chose.

Full Example

See the complete working example at jaw-examples/nextjs-reown.

Related