Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.privy.io/llms.txt

Use this file to discover all available pages before exploring further.

Lens Protocol is an open social network that allows users to own their content and connections. Developers can build on the network, leveraging its audience and infrastructure. Users can seamlessly switch between social apps without losing their profiles, content, or connections. Allowing users to log into Lens with Privy is fully supported and simple to integrate. In this recipe, you’ll integrate Privy + wagmi with the Lens React SDK, then let users log in with their Lens account using an embedded or external wallet.

​
Resources

Lens Docs

Official documentation for Lens protocol and SDK.

Privy Wagmi integration

Configure Privy with wagmi for EVM integrations.

​
Integrate Lens login

1

1. Install dependencies

pnpm add @privy-io/react-auth @lens-protocol/react@canary @privy-io/wagmi @tanstack/react-query wagmi viem
We use @lens-protocol/react@canary to access the latest Lens features.
2

2. Set up providers

This step assumes you have set up your project with Privy and integrated with wagmi. If not, follow the Privy wagmi guide. Once your Privy setup is complete, initialize the Lens provider and client.Lens Protocol runs on the Lens chain (mainnet and testnet). Ensure your wagmi and Privy configs include the Lens chains.Wrap your app with LensProvider to use the Lens SDK across your app.
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {LensProvider, PublicClient, mainnet} from '@lens-protocol/react'; 

const queryClient = new QueryClient();

const lensClient = PublicClient.create({
  environment: mainnet,
  storage: window.localStorage
});

return (
  <PrivyProvider appId="your-privy-app-id" config={privyConfig}>
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig}>
        <LensProvider client={lensClient}>{children}</LensProvider>
      </WagmiProvider>
    </QueryClientProvider>
  </PrivyProvider>
);
You’ve successfully set up the Lens SDK. Your app is now ready to use features like logging in with Lens and posting directly on Lens.
3

3. Connect a wallet with Privy

Use login to prompt the user to connect a wallet. With Privy, you can automatically create wallets for users who don’t have one (for example, when signing in with Google or another social method). With this new wallet, you can onboard the user to your Lens‑powered app and keep the onboarding experience seamless.
You can customize whether to automatically create an embedded wallet for the user. See the automatic wallet creation guide.
import {usePrivy} from '@privy-io/react-auth';

const {login} = usePrivy();

<button onClick={login}>Login</button>;
4

4. Fetch accounts for the connected wallet

First, fetch all the Lens accounts associated with the connected user wallet.
import {useAccountsAvailable} from '@lens-protocol/react';
import {useAccount} from 'wagmi';

const {address} = useAccount();
const {data: lensAccounts} = useAccountsAvailable({
  managedBy: address
});
If a user has multiple wallets connected, set the active wallet to ensure you log in with the correct Lens account.
import {useWallets} from '@privy-io/react-auth';
import {useSetActiveWallet} from '@privy-io/wagmi';

const {wallets} = useWallets();
const {setActiveWallet} = useSetActiveWallet();
await setActiveWallet(wallets[0]);
5

5. Implement login with Lens

Create a hook that handles the Lens login process for the selected account.
import {AccountAvailable, EvmAddress, useLogin} from '@lens-protocol/react';
import {signMessageWith} from '@lens-protocol/react/viem';
import {useAccount, useWalletClient} from 'wagmi';

export function useLensLogin() {
  const {address} = useAccount();
  const {data: signer} = useWalletClient();
  const {execute: login} = useLogin();

  return (item: AccountAvailable) => {
    if (!signer) return;
    const ownerOrManager = signer.account?.address ?? (address as EvmAddress | undefined);
    if (!ownerOrManager) return;

    const payload =
      item.__typename === 'AccountManaged'
        ? {
            accountManager: {
              account: item.account.address as EvmAddress,
              manager: ownerOrManager as EvmAddress
            }
          }
        : {
            accountOwner: {
              account: item.account.address as EvmAddress,
              owner: ownerOrManager as EvmAddress
            }
          };

    return login({
      ...payload,
      signMessage: signMessageWith(signer)
    });
  };
}
6

6. Render accounts and trigger login

Show the fetched accounts and let users pick one to log in.
import {useAccountsAvailable} from '@lens-protocol/react';
import {useAccount} from 'wagmi';
import {useLensLogin} from './use-lens-login';

export function LensAccountsList() {
  const {address} = useAccount();
  const {data: lensAccounts} = useAccountsAvailable({managedBy: address});
  const loginWithLensAccount = useLensLogin();

  if (!lensAccounts || lensAccounts.items.length === 0) {
    return <p>No Lens accounts found for {address}.</p>;
  }

  return (
    <div>
      {lensAccounts.items.map((item) => (
        <div key={item.account.address}>
          <button onClick={() => loginWithLensAccount(item)}>
            Login with {item.account.username?.value ?? item.account.address}
          </button>
        </div>
      ))}
    </div>
  );
}
7

7. Check authentication status

Use useAuthenticatedUser to check whether the user is authenticated with a Lens account.
import {useAuthenticatedUser} from '@lens-protocol/react';

const {data: isAuthenticated} = useAuthenticatedUser();

​
Next steps

Explore the full Lens SDK documentation.
  • Create posts and publications
  • React to publications
  • Manage profiles and metadata
For wagmi setup with Privy, see Integrating with wagmi.