@groupos/react-auth is a package for onboarding new users to an app by giving them a smart account. The package wraps wagmi so you can use the same functions you know and love but utilizing a smart account for your users.

Pre-requisite

  • In the Dashboard, Go to Settings > General, and copy your ‘groupId’.
  • Next go to Allowed Domains and add the domain of your project to the allowlist.

Install the package

From the root of the project that is consuming the package type the following to install the package.

npm install @groupos/react-auth

Import the component

Next, import the component and place it at the root of your application. The component takes one prop, which is the groupId you should have copied from step 1.

Make sure you are using wagmi and that the component is a child of the wagmi provider.

import { SmartAccountWrapper } from "@groupos/react-auth";
<SmartAccountWrapper groupId="STATION_GROUP_ID" />;

This component is compatible with any other authentication or conenction providers (e.g. ConnectKit, Privy) and simply wraps connected wallets with smart contract accounts.

ConnectKit Example

import { WagmiConfig, createConfig } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { SmartAccountWrapper } from "@groupos/react-auth";

const config = createConfig(
  getDefaultConfig({
    alchemyId: "ALCHEMY_ID",
    walletConnectProjectId: "WALLETCONNECT_PROJECT_ID",
    appName: "Your App Name",
  })
);

const queryClient = new QueryClient();

export function App({ Component, ...pageProps }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <SmartAccountWrapper groupId="STATION_GROUP_ID">
          <ConnectKitProvider>
            <Component {...pageProps} />
          </ConnectKitProvider>
        </SmartAccountWrapper>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Privy Example

import { configureChains, mainnet, publicProvider } from "wagmi";
import { PrivyProvider } from "@privy-io/react-auth";
import { PrivyWagmiConnector } from "@privy-io/wagmi-connector";
import { SmartAccountWrapper } from "@groupos/react-auth";

export function App({ Component, pageProps }) {
  return (
    <PrivyProvider appId="PRIVY_APP_ID">
      <PrivyWagmiConnector
        wagmiChainsConfig={configureChains([mainnet], [publicProvider()])}
      >
        <SmartAccountWrapper groupId="STATION_GROUP_ID">
          <Component {...pageProps} />
        </SmartAccountWrapper>
      </PrivyWagmiConnector>
    </PrivyProvider>
  );
}