Authtentication

Authentication

For the authentication we use Crypto Wallet which is secure and easy to interact.

Installation

npm install connectkit wagmi viem@2.x @tanstack/react-query

Wagmi is a hook library for Ethereum that makes it easy to connect to wallets.
Viem TypeScript interface for Ethereum that performs blockchain operations.
TanStack Query async state manager that handles requests, caching, and more.
TypeScript optional, but highly recommended.

API Key

ConnectKit utilises WalletConnect's SDK to help with connecting wallets. WalletConnect 2.0 requires a projectId which you can create quickly and easily for free over at WalletConnect Cloud.

It is recommended to wrap your app within a new component that will help you set up ConnectKit and its dependencies. Start by creating a new component called Web3Provider Here you will import the required providers and create a config using wagmi's createConfig method ConnectKit supplies a pre-configured getDefaultConfig function to simplify the process of creating a config.

providers/web3.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider, getDefaultConfig } from "connectkit";
import { WagmiProvider, createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
 
const config = createConfig(
  getDefaultConfig({
    // Your dApps chains
    chains: [mainnet],
    transports: {
      // RPC URL for each chain
      [mainnet.id]: http(
        `https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}`,
      ),
    },
 
    // Required API Keys
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
 
    // Required App Info
    appName: "Your App Name",
 
    // Optional App Info
    appDescription: "Your App Description",
    appUrl: "https://family.co", // your app's url
    appIcon: "https://family.co/logo.png", // your app's icon, no bigger than 1024x1024px (max. 1MB)
  }),
);
 
const queryClient = new QueryClient();
 
export const Web3Provider = ({ children }) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

When using a framework that supports

React Server Components

, you will need to include the "use client" directive at the beginning of this file.

Now that you have your Web3Provider component you can wrap your app with it:

app/layout.tsx

import { Web3Provider } from "./providers/web3";
import { ConnectKitButton } from "connectkit";
 
const App = () => {
  return (
    <Web3Provider>
      <ConnectKitButton />
    </Web3Provider>
  );
};

And voilà, you've successfully set up ConnectKit.

Connected Wallet Info

In a lot of use cases, you will want to access the connected wallet from ConnectKit in order to be able to interact with it further. You can do so by using the different hooks, such as useAccount from wagmi (a ConnectKit dependency). In the previous example above we wrapped our app with a <ConnectKitProvider> top-level Before utilizing any wagmi hook, make sure the components you build are mounted under this provider. Below is a simple example component that utilizes the useAccount hook to access connection state and the connected wallet address:

components/internal/wallet.tsx

import { useAccount } from "wagmi";
 
// Make sure that this component is wrapped with ConnectKitProvider
const Wallet = () => {
  const { address, isConnecting, isDisconnected } = useAccount();
  if (isConnecting) return <div>Connecting...</div>;
  if (isDisconnected) return <div>Disconnected</div>;
  return <div>Connected Wallet: {address}</div>;
};

That's it—you now have a simple component that displays the connected wallet's address.

Authtentication

Authentication

Installation

API Key

Implementation

Connected Wallet Info

On this page