Get Started

The INTU webkit doesn't require any additional packages in your dapp. Just install it, import it, configure it, and get going!

1. Installing via npm: Open your terminal or command prompt. Navigate to your project directory. Run the following command to install the INTU Web Kit:

npm install @intuweb3/steven-web-kit

2. Installing via Yarn: If you prefer using Yarn, run the following command instead:

yarn add @intuweb3/steven-web-kit

Either of the commands will download and install the INTU Web Kit and its dependencies into your project.

---

Now let's get into the basic configuration steps. Import the INTU Web Kit into your project by adding the following import statement to your index.js file.

import { IntuProvider } from '@intuweb3/steven-web-kit';

Now we can configure INTU Web Kit to your React application through the IntuProvider component. This is done by wrapping the App component with IntuProvider passing an initial config object that contains various configuration settings for the SDK. This setup ensures that the SDK is properly initialized and available throughout your application.

Below is an example of how we can define the configuration object with settings for the INTU Web Kit:

index.js

const config = {
  authProviders: ["google", "twitter"], // List of authentication providers
  isCustomAuth: false, // Flag for using custom authentication
  customAuth: {
    uniqueId: "sub", // Unique ID for custom authentication, if applicable
  },
  styles: {
    applicationName: "Crypto Zombies", // Name displayed in the authentication UI
    applicationLogo: "https://api.dicebear.com/9.x/shapes/svg", // URL for your application logo
    theme: "dark", // Theme for the authentication UI (e.g., dark or light)
  },
  claimUrl: process.env.REACT_APP_CLAIM_URL, // URL for airdrop tokens(from environment variable)
};

Now to initialize your application, wrap the App component with the IntuProvider:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <IntuProvider initialConfig={config}>
      <App />
    </IntuProvider>
  </React.StrictMode>
);