The easiest way to connect to Didit protocol
Didit-SDK is a library that makes it easy to add wallet connection to your dapp.
- ✅ Didit User Authentication flow
- 🎉 Support for multiple frameworks. Easily integrate with React and vanilla JavaScript. Vue and Svelte are comming soon...
- 🔥 Out-of-the-box wallet management
- 🚀 EIP-6963. support for browser extension wallets.
- 🎨 Easily customizable UI. light/dark or make it match your brand
- 🦄 Built on top of wagmi
Didit SDK Github Repo
You can use the CodeSandbox links below try out Didit Sdk:
-
with js // TODO: setup example on codesandbox
-
with react // TODO: setup example on codesandbox
-
with nextjs // TODO: setup example on codesandbox
install didit-sdk and its peer dependencies, @wagmi/core, viem and @wagmi/connectors. check how install wagmi/core for more
npm i @didit-sdk/js @wagmi/connectors @wagmi/core viemCreate an app at Business Console and obtain your clientid and client secret
For a quick integration you can use defaultWagmiConfig function which wraps Wagmi's createConfig function with a predefined configuration. This includes WalletConnect, Coinbase and Injected connectors
In your main.ts file set up the following configuration.
import { arbitrum, mainnet } from '@wagmi/core/chains'
import { createDiditSdk, defaultWagmiConfig } from '@didit-sdk/js'
import { reconnect } from '@wagmi/core'
// Get cleintId from https://business.didit.me
export const clientId = 'k234y324hjsds'
// 1. Create wagmiConfig
const wagmiConfig = defaultWagmiConfig({
chains: [mainnet, arbitrum],
metadata: {
name: 'Js Example',
url: 'https://didit.me'
}
})
reconnect(wagmiConfig)
// 2. Create didit sdk
const diditSDk = createDiditSdk({
wagmiConfig,
clientId,
themeMode: 'dark'
})To open didit-sdk modal you can use our web component or build your own button with the sdk actions. In this example we are going to use the <didit-button> component.
Web components are global html elements that don't require importing.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Example</title>
</head>
<body>
<didit-button></didit-button>
<didit-callback></didit-callback>
<script type="module" src="main.ts"></script>
</body>
</html>
<didit-callback>component is essential for socials auth to work check components for more
Actions are functions that will help you control the modal, subscribe to status change
const diditSdk = createDiditSdk({ wagmiConfig, clienId })
diditSdk.open()
diditSdk.close()diditSDk.signOut()authentication state
diditSDk.subscribeDiditState(({ isAuthenticated, accessToken, user }) => {
console.log({
isAuthenticated,
accessToken,
user
})
})
// or
const { isAuthenticated, accessToken, user } = diditSDk.getDiditState()Didit state is an object of the following properties:
| Property | Description | Type |
|---|---|---|
| `isAuthenticated` | Whether the user is authenticated or not. will be undefined when the user authenticating or when checking user session on page load | `boolean` | `undefined` |
| `status` | A string representation of the auth status `loading` | `authenticated` | `unauthenticated` | `DiditAuthStatus` |
| `authMethod` | The auth method used by the user if is authenticated: `wallet` | `apple` | `google` | `DiditAuthType` | `undefined` |
| `user` | The current conncted didit user | `DiditUser` | `undefined` |
| `accessToken` | The current **Didit** access token | `string` | `undefined` |
| `refreshToken` | The current **Didit** refresh token | `string` | `undefined` |
| `isWalletConnected` | A quick way to check if user connected with wallet address | `boolean` |
| `walletAddress` | The current connected wallet address if the user is authneticated with wallet address | `string` | `undefined` |
| `addressExplorerUrl` | Explorer url of the current connected wallet | `string` | `undefined` |
| `selectedNetworkId` | The current connected chain id example: 1 (Ethereum) | `number` | `undefined` |
| `selectedNetworkName` | The current connected chain name example: Ethereum (1) | `string` | `undefined` |
You can use Wagmi actions to sign messages, interact with smart contracts, and much more.
Action for signing messages with connected account
import { signMessage } from '@wagmi/core'
import { wagmiConfig } from './main'
await signMessage(wagmiConfig, { message: 'hello world' })Check more on wagmi docs
Get the current value of the modal's state
diditSDk.subscribeDiditModalState(({ isLoading, isOpen }) => {
console.log({
isLoading,
isOpen
})
})
// or
const { isLoading, isOpen } = diditSDk.getDiditModalState()The modal state is an object of two properties:
| Property | Description | Type |
|---|---|---|
| `isLoading` | Open state will be true when the modal is open and the user is authenticating | `boolean` |
| `isOpen` | Open state will be true when the modal is open and false when closed. | `boolean` |
Set the themeMode after creating the sdk instance
const diditSDk = createDiditSdk({ wagmiConfig, clientId })
diditSDk.setThemeMode('dark')Get the current themeMode value by calling the getThemeMode function
const diditSDk = createDiditSdk({ wagmiConfig, clientId })
const themeMode = diditSDk.getThemeMode()Set the themeVariables after creating the sdk instance
const diditSdk = createDiditSdk({ wagmiConfig, projectId })
diditSdk.setThemeVariables({ ... })Get the current themeVariables value by calling the getThemeVariables function
const diditSdk = createDiditSdk({ wagmiConfig, projectId })
const themeMode = diditSdk.getThemeVariables()const unsubscribe = diditSdk.subscribeTheme(newTheme => console.log(newTheme))For more readt Didit Sdk docs