Appearance

Login with Lens ​

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, we'll show you how to integrate your Privy integration with the Lens SDK to easily read from Lens and mint a Lens profile using an embedded or external wallet connected with Privy. Here's how!

TIP

Building a new app? Check out the Lens API Examples, which includes a basic Lens <> Privy integration.

0. Prerequisite ​

In order to integrate the Privy React SDK with the Lens React SDK, your project must be on:

We also assume you have set up the Lens SDK with your app. If you haven't, start by following the instructions in the Lens Quickstart guide to get your app set up.

1. Installation ​

Install the @privy-io/react-auth SDK and @privy-io/wagmi (Privy's wagmi bindings):

sh
npm install @privy-io/react-auth@latest @privy-io/wagmi

When your app integrates Privy alongside Wagmi, you should:

  • use Privy to connect external wallets and create embedded wallets
  • use wagmi to take read or write actions from a connected wallet

More details on using Privy with Wagmi is available here.

2. Configure the Privy Provider ​

If following the Lens Quickstart, your existing Provider setup should look similar to this:

tsx
<WagmiProvider config={wagmiConfig}>
  <QueryClientProvider client={queryClient}>
    <LensProvider config={lensConfig}>{/** Your App */}</LensProvider>
  </QueryClientProvider>
</WagmiProvider>

In the Lens example the WagmiProvider and Config creation function are provided by wagmi. However, when integrating with Privy, the @privy-io/wagmi package should be used instead.

Change the import statements from:

tsx
import {WagmiProvider, createConfig, http} from 'wagmi';

to

tsx
import {http} from 'wagmi';

import {WagmiProvider, createConfig} from '@privy-io/wagmi';

Lens Protocol runs on Polygon, so the Privy Client configuration must include polygon as a supported chain. Your config should look something like:

tsx
const privyConfig: PrivyClientConfig = {
  defaultChain: polygon,
  supportedChains: [polygon],
  embeddedWallets: {
    createOnLogin: 'users-without-wallets',
  },
};

Note: PrivyProvider requires that the QueryClientProvider wraps the WagmiProvider.

Next, simply wrap the existing Providers with the PrivyProvider:

tsx
<PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!} config={privyConfig}>
  <QueryClientProvider client={queryClient}>
    <WagmiProvider config={wagmiConfig}>
      <LensProvider config={lensConfig}>{children}</LensProvider>
    </WagmiProvider>
  </QueryClientProvider>
</PrivyProvider>

Here's an example of the full PrivyProvider setup with the Lens SDK:

tsx
import {LensConfig, LensProvider, development} from '@lens-protocol/react-web';
import {bindings} from '@lens-protocol/wagmi';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import React from 'react';
import {http} from 'wagmi';
import {polygon, polygonAmoy} from 'wagmi/chains';

import {PrivyClientConfig, PrivyProvider} from '@privy-io/react-auth';
import {WagmiProvider, createConfig} from '@privy-io/wagmi';

const wagmiConfig = createConfig({
  chains: [polygon, polygonAmoy],
  transports: {
    [polygon.id]: http(),
    [polygonAmoy.id]: http(),
  },
});

const privyConfig: PrivyClientConfig = {
  defaultChain: polygonAmoy, // or polygon
  supportedChains: [polygon, polygonAmoy],
  embeddedWallets: {
    createOnLogin: 'users-without-wallets',
  },
};

const queryClient = new QueryClient();

const lensConfig: LensConfig = {
  environment: development, // or production
  bindings: bindings(wagmiConfig),
  debug: true,
};

export function Web3Provider({children}: {children: React.ReactNode}) {
  return (
    <PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!} config={privyConfig}>
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>
          <LensProvider config={lensConfig}>{children}</LensProvider>
        </WagmiProvider>
      </QueryClientProvider>
    </PrivyProvider>
  );
}

3. Login with Privy ​

That's it! Your app is now fully setup to interact with the Lens SDK using Privy. To start interacting with Lens, we must first connect a wallet with Privy.

tsx
import {usePrivy} from '@privy-io/react-auth';

const {connectOrCreateWallet} = usePrivy();

<button onClick={connectOrCreateWallet}>Connect wallet</button>;

TIP

If a user does not have an a wallet, an embedded wallet will be generated for them after logging in with Privy. This behavior is completely configurable to match the desired functionality for your app.

Once a wallet is connected, you can access the most recently connected wallet at the first element in the wallets array.

tsx
import {useWallets} from '@privy-io/react-auth';

const {wallets} = useWallets();

const walletAddress = wallets[0].address;

4. Interact with Lens ​

Now, that we have a wallet connected and ready to use, let's retrieve the list of Profiles that the it currently owns or manages. This can be accomplished using the useProfilesManaged hook from the Lens SDK:

tsx
import {useProfilesManaged, Profile} from '@lens-protocol/react-web';

const {data: profiles} = useProfilesManaged({
  for: walletAddress,
  includeOwned: true,
});

Next, use the useLogin hook from the Lens SDK to log in with one of the profiles returned:

tsx
import {useLogin} from '@lens-protocol/react-web';

const {execute: loginWithLensAPI} = useLogin();
const result = await loginWithLensAPI({
  address: walletAddress,
  profileId: profiles[0].id,
});

if (result.isSuccess()) {
  // You can now interact with the Lens SDK hooks that require a logged in user
}

5. Further ​

Check out the Lens SDK Privy example, which includes profile creation and login using the setup from this guide. You can now use the Lens SDK to:

and so much more! Examples from the Lens Docs can be used without any modification.