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 very simple to integrate.
Here's how!
Building a new app? Check out the Lens API Examples, which includes a basic Lens <> Privy integration.
In order to integrate the Privy React SDK with the Lens React SDK, your project must be on:
- a minimum Privy React SDK version of
1.73.1
- a minimum Lens React SDK version of
2.0.0
The following assumes 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.
Next, install the Privy React SDK and wagmi bindings:
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.
If following the Lens Quickstart, your existing Provider setup should look similar to this:
<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:
import { WagmiProvider, createConfig, http } from "wagmi";
to
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:
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
. Your Provider
should now look something like this:
<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:
import React from "react";
import { http } from "wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { LensConfig, LensProvider, development } from "@lens-protocol/react-web";
import { bindings } from "@lens-protocol/wagmi";
import { WagmiProvider, createConfig } from "@privy-io/wagmi";
import { PrivyClientConfig, PrivyProvider } from "@privy-io/react-auth";
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>
);
}
That's it! Your app is now fully setup to interact with the Lens SDK using Privy. To implement Lens login we must first retrieve the list of Profiles that the wallet currently owns or manages. This can be accomplished using the useProfilesManaged
hook from the Lens SDK:
import { useProfilesManaged, useLogin, Profile } from '@lens-protocol/react-web';
const { data: profiles } = useProfilesManaged({
for: walletAddress,
includeOwned: true
});
Next, use the useLogin
hook to log in with one of the profiles returned:
const { execute: login } = useLogin();
const result = await login({
address: wallet,
profileId: profiles[0].id,
});
if (result.isSuccess()) {
// You can now interact with the Lens SDK hooks that require a logged in user
}
For a more complete example, refer to the Authentication instructions from Lens SDK docs.
Check out the Lens SDK examples, including lens-next-privy-app
which includes profile creation and login using the setup from this guide. You can now use the Lens SDK to:
- log your users in with Lens
- create a Lens Profile
- update Lens Profile metadata
- create a post
- make a post collectable
- react to (like) a publication
and so much more! Examples from the Lens Docs can be used without any modification.