XMTP Privy Quickstart

Installation

yarn install
yarn dev

Concepts

Head to our docs to understand XMTP's concepts

• Get started
• Authentication
• Conversations
• Messages
• Streams

Troubleshooting

If you get into issues with Buffer and polyfills check out the fix below:

• Check out Buffer issue

Privy

Setup

First, you need to import the necessary libraries and components. In your index.js file, import the PrivyProvider from @privy-io/react-auth and wrap your main component with it.

import { PrivyProvider } from "@privy-io/react-auth";

<PrivyProvider
appId={process.env.REACT_APP_PRIVY_APP_ID}
onSuccess={(user) => console.log(User ${user.id} logged in!)}
>
<InboxPage />
</PrivyProvider>

User authentication

In your main component, use the usePrivy hook to get the user's authentication status and other details.

const { ready, authenticated, user, login, logout } = usePrivy();

Wallet integration

Use the useWallets hook to get the user's wallets. Then, find the embedded wallet and set it as the signer.

useEffect(() => {
  const getSigner = async () => {
    const embeddedWallet =
      wallets.find((wallet) => wallet.walletClientType === "privy") ||
      wallets[0];
    if (embeddedWallet) {
      const provider = await embeddedWallet.getEthersProvider();
      setSigner(provider.getSigner());
    }
  };

  if (wallets.length > 0) {
    getSigner();
  }

XMTP Integration

In your Home component, use the useClient hook from @xmtp/react-sdk to get the XMTP client.

const { client, error, isLoading, initialize } = useClient();

That's it! You've now created an XMTP app with Privy.