> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bitski.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://wagmi.sh/react/api/hooks) and [Viem](https://viem.sh) so you can focus on building your application.

To get started, create an account in the [Bitski Developer portal](https://developer.bitski.com).  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.

```bash theme={null}
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](/react-sdk/authentication).

```ts theme={null}
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.

```html theme={null}
<!DOCTYPE html>
<html>
  <head>
    <title>Logging in...</title>
    <script src="https://cdn.bitskistatic.com/js/sdk/v3.3/callback.js"></script>
  </head>
</html>
```

## CodeSandbox

[![Edit bitski-waas-react-sdk-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/bitski-waas-react-sdk-example-5nyc6h?file=%2Fsrc%2FApp.tsx\&embed=1)

<iframe
  src="https://codesandbox.io/p/devbox/bitski-waas-react-sdk-example-5nyc6h?file=%2Fsrc%2FApp.tsx&embed=1"
  style={{
width: "100%",
height: "500px",
border: 0,
borderRadius: "4px",
overflow: "hidden",
}}
  title="bitski-waas-react-sdk-example"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

## 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](/react-sdk/compoents) 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](mailto:hello@bitski.com)
and let us know.
