Quickstart
Solve all your dApp’s authentication challenges with a simple React Widget.
We aim to use tools you are already familiar with, mainly Wagmi and Viem so you can focus on building your application.
To get started, create an account in the Bitski Developer portal. Follow the Web3 onboarding flow to get your Bitski appId
and we will provide a pre-configured React snippet to get you going immediately.
Installation
The WaaS React SDK has peer dependencies on @tanstack/react-query
, viem
, and wagmi
to operate - please make sure you have these installed as well.
npm i @bitski/waas-react-sdk @tanstack/react-query@^5.0.0 viem@^2.0.0 wagmi@^2.0.0
SDK Initialization
Bitski’s WaaS React SDK uses Wagmi and Viem so you don’t have to learn new tools. We support many chains—just use viem/chains
and LoginMethods
from the SDK. A deeper dive is here.
import {BitskiProvider, BitskiWidget, LoginMethod} from "@bitski/waas-react-sdk";
import {base, mainnet, polygon} from "viem/chains";
export const Dapp = () => {
return (
<BitskiProvider
appId={"abcd-1234-efgh-5678"}
chains={[mainnet, base, polygon]}
loginMethods={[LoginMethod.Email, LoginMethod.Google, LoginMethod.Wallet]}
callbackURL={"https://myapp/redirect-url"}>
<BitskiWidget />
</BitskiProvider>
)
}
Callback URL
In order for the Bitski Wagmi Connectors to work, you must provide one public callback URL with the Bitski JS SDK imported.
<!DOCTYPE html>
<html>
<head>
<title>Logging in...</title>
<script src="https://cdn.bitskistatic.com/js/sdk/v3.3/callback.js"></script>
</head>
</html>
CodeSandbox
Components
We recommend using the <BitskiWidget />
component. It is a convenient, drop-in Component to handle both authentication and viewing the connected wallet. Check out our components section for more details.
Say goodbye to the awkward authentication dance and get back to doing what you do best—building your dApp! If you’re running into issues on how to use your Bitski Wallet, free feel to contact us and let us know.