@groupos/react-auth v0.0.10

@groupos/smart-accounts

@groupos/smart-accounts 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 core hooks for web3 development, but now with easy smart account integrations for your users.

Steps to onboard

1. You will need an account on GroupOS in order to use the package. After signing in with your wallet, you will be redirected to your Group dashboard. Go to Settings -> General and copy your groupId. Next go to Allowed Domains and add the domain of your project to the allow list.

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

npm install @groupos/smart-accounts

3. Next, import the component and use it wherever you see fit. 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 { SmartAccountModal } from "@groupos/smart-accounts";
<SmartAccountModal groupId="STATION_GROUP_ID" />;

4. The component lets users login with regular connectors that you have configured in your wagmi config (Coinbase wallet, metamask, etc) or your users can login with email. If they choose to login with email, they will be sent a one time password. When they confirm the one time password, a cloud wallet will be created for them behind the scenes, and wagmi will connect to this account.

5. The suggested way to use the component is as a “login” component. If wagmi does not find an account, you should render the component. Otherwise, if wagmi does find an account, you can render the rest of your app. See the following as an example.

import { WagmiConfig, createConfig, useAccount, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { SmartAccountModal } from "@groupos/smart-accounts";

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http("https://mainnet.example.com"),
  },
});

const queryClient = new QueryClient();

export default function App() {
  const account = useAccount();

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <Auth />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

function Auth() {
  const account = useAccount();
  return (
    <main>
      {!account?.address ? (
        <SmartAccountModal groupId="STATION_GROUP_ID" />
      ) : (
        <div>This is the rest of the app!</div>
      )}
    </main>
  );
}