Link web2 & web3 profiles in React, updated playground

Joaquim Verges

We shipped an update to make it easier to link multiple identities to the same in-app or ecosystem account on React web and native.

You can now use the useLinkProfiles() to easily link a new identity to the connected account. A great use case for this is to onboard users with strategy: "guest" to reduce friction, then when they've engaged with your app, prompt them to link an email or social account.

const wallet = inAppWallet();
 
// First onboard the user as guest
const OnboardingComponent = () => {
  const { connect } = useConnect();
 
  const loginAsGuest = () => {
    connect(() => {
      await wallet.connect({ client, strategy: "guest" });
      return wallet;
    });
  }
}
 
// Then link a profile once they've engaged with the app
const LoginComponent = () => {
  const { mutate: linkProfile } = useLinkProfile();
 
  const loginWithGoogle = async () => {
    await linkProfile({ client, strategy: "google" });
  }
}

Once a user has linked an identity, they can use that identity to login back to the same account later. So in the example above, the user can now login with google next time they need to login to your app.

Another great feature is linking web3 wallets to the account:

const { mutate: linkProfile } = useLinkProfile();
 
const linkWallet = async () => {
  await linkProfile({
    client,
    strategy: "wallet",
    wallet: createWallet("io.metamask"), // or any wallet
  });
};

This will require a signature, ensuring the user owns that wallet. A great use case is doing read only operations on the linked wallets, like checking social profiles, ownership of an NFT or onchain history.

You can fetch all the linked profiles using the useProfiles() hook.

const { data: profiles } = useProfiles();
 
console.log(profiles[0].type);
// each profile type can have different details
console.log(profiles[0].details.email);

We also update the playground site, see it in action here: https://playground.thirdweb.com/connect/in-app-wallet

You can also view more detailed documentation on our developer portal.

Happy building! 🛠️