RainbowKit

Leveraging Particle Auth within RainbowKit

One of the most widely used methods of implementing Particle Auth is through RainbowKit. By leveraging RainbowKit as the underlying connection mechanism within your application, you can facilitate both Web2-based social logins with Particle Auth (through @particle-network/rainbowkit-ext) or Web3-native wallet connections. This unification of social logins and external wallet connections is also possible through Particle Connect, although if you'd like to use RainbowKit, including Particle Auth within the list of connection options is simple.


โ€Ž

Implementing @particle-network/rainbowkit-ext

If you're already using RainbowKit within your application, you can add a custom extended adapter, particleWallet, that mimics the existing Web3-native wallet objects present within wallets. Importing and using particleWallet involves two major steps:

  1. Configuring ParticleNetwork.

    1. You'll first need to configure ParticleNetwork from @particle-network/authas represented below:
    2. const particle = useMemo(() => new ParticleNetwork({
          projectId: process.env.REACT_APP_PROJECT_ID as string,
          clientKey: process.env.REACT_APP_CLIENT_KEY as string,
          appId: process.env.REACT_APP_APP_ID as string,
          chainName: 'Ethereum',
          chainId: 1,
          wallet: { displayWalletEntry: true },
        }), []);
      
  2. Importing and including particleWallet.

    1. Next, you'll need to import particleWallet from @particle-network/rainbowkit-ext and place individual instances representing different social login mechanisms within your wallets array.

    2. const popularWallets = useMemo(() => ({
          groupName: 'Popular',
          wallets: [
            particleWallet({ chains, authType: 'google' }),
            particleWallet({ chains, authType: 'facebook' }),
            particleWallet({ chains, authType: 'apple' }),
            particleWallet({ chains }),
            injectedWallet(commonOptions),
            rainbowWallet(commonOptions),
            coinbaseWallet({ appName: 'RainbowKit demo', ...commonOptions }),
            metaMaskWallet(commonOptions),
            walletConnectWallet(commonOptions),
          ],
        }), [particle]);
      
        const connectors = connectorsForWallets([
          popularWallets,
          {
            groupName: 'Other',
            wallets: [
              argentWallet(commonOptions),
              trustWallet(commonOptions),
              omniWallet(commonOptions),
              imTokenWallet(commonOptions),
              ledgerWallet(commonOptions),
            ],
          },
        ]);
      

โ€Ž

Common issues

The following issues might be encountered in this process:

  1. Minification for Vercel deployments, generally seen as as Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'sqrt').
    1. Occasionally, Vercel deployments are known to throw errors relating to the minifier you're using, crashing the application upon startup. This is due to the usage of swcMinify within your next.config.js file. You'll need to switch swcMinify from true to false, thus using Terser as the minifier rather than SWC.
  2. "Wrong Network" displayed when connected with Particle Auth.
    1. If the chain used by RainbowKit and the one used by Particle Auth are at odds with one another (meaning they're configured differently), the "Wrong Network" error will be returned by RainbowKit. To prevent this, you'll need to ensure that the chain selected within WagmiProvider (through configureChains) is equivalent to the chain being within ParticleNetwork (through chainName and chainId).

โ€Ž

โ„น๏ธ

A full walkthrough video on leveraging Particle Auth within RainbowKit is available.

For an extended explanation and tutorial regarding the integration of Particle Auth within RainbowKit, we've created a video and GitHub template repository.