Skip to main content

Quick Start

Let's integrate WaaP in less than 5 minutes. You will learn how to embed WaaP login options like this:

No wallet connected

The login and logout buttons can be styled in any way and need not even say login or logout.

All that matters is that you call the correct methods on window.waap. Reference for all methods is on Methods page.

For example,

  • to login, you call window.waap.login()
  • to get the user's wallet addresses, call window.waap.request({ method: 'eth_requestAccounts' })
  • to logout, you call window.waap.logout().

Check out Quick Start Examples for more examples.

Getting Started​

Get started by creating a new dApp.

Quick Start Examples

Quick start examples are available in the WaaP Examples repository.

You can get each example project folder using npx gitpick.

To get started instantly with these quick start examples,

  • you can run them on CodeSandbox
  • or you can clone the repository and run them locally

Use the link and code below to get started with your preferred flavor: plain, wagmi, or ethers.

→ View source code | → Try on CodeSandbox

npx gitpick holonym-foundation/waap-examples/tree/main/waap-plain-nextjs
cd waap-plain-nextjs
npm install
npm run dev

What you'll need​

Or even without any provider, just use window.waap directly. Please refer to Quick Start Examples for more details.

npm install wagmi viem
Want to see a more comprehensive example?

Check out our Human Passport Verification Demo - a complete Next.js application showcasing WaaP + Human Passport integration with modern UI/UX, multi-chain support, and production-ready features.

→ View live demo | → Browse source code

Basic Integration​

You can easily embed WaaP into your site using a single, provider-agnostic approach. WaaP exposes an EIP-1193-compliant interface via window.waap, so you can interact with it just as you would with MetaMask or other wallets.

Initialize WaaP​

Initialize WaaP with initWaaP.

For detailed reference, see initWaaP on Methods page.

You can also generate the configuration code for initWaaP with our no-code tool on the Playground 🛠 🚀 page.

import { initWaaP } from "@human.tech/waap-sdk"

const initConfig = {
  config: {
    authenticationMethods: ['email', 'phone', 'social'],
    allowedSocials: ['google', 'twitter', 'discord'],
    styles: {
      darkMode: true
    },
    showSecured: true
  }
  useStaging: false
}

useEffect(() => {
  // This will automatically set window.waap with all necessary methods.
  initWaaP(initConfig)
}, [])

try {
  // Open the WaaP login modal
  const loginType = await window.waap.login();
  // loginType: 'human' | 'walletconnect' | 'injected' | null
  
  // Get the user's wallet addresses
  const accounts = await window.waap.request({ method: 'eth_requestAccounts' })
  const address = accounts[0];
} catch (error) {
  console.error(error)
}

Auto-Connect on Page Refresh​

WaaP automatically reconnects users when they return to your app. Simply call eth_requestAccounts and it will restore their previous connection seamlessly.

// This will auto-connect if user was previously logged in
const accounts = await window.waap.request({ method: 'eth_requestAccounts' })

For more details on auto-connect functionality, see Auto-Connect in Methods.

Logout​

For simple logout (WaaP only):

await window.waap.logout();

When external wallets are enabled, the logout behavior depends on how the user logged in. See Logout and Session Management for complete details.

Events and Advanced Usage​

You can listen for wallet events like account changes and chain changes:

window.waap.on("accountsChanged", (accounts) => {
  console.log("Active account changed:", accounts[0]);
});

For complete method documentation, see the Methods page.

Quick Start Examples​

A few quick start examples are available below to make integration even easier.

You can get started afresh with these examples or just copy and paste relevant context provider and hook into your existing projects.

Some wallet specific methods and EIP-1193 methods are implemented in /components/methods/ folder. 1 method per component for easier reference.

Plain + Next.js​

→ View source code | → Try on CodeSandbox

This quick start example uses window.waap directly (without other adapters) and Next.js.

Just copy waap.config.ts and waap.context.tsx files from the example. You can get started immediately in your React and Next.js app.

And then use WaaPProvider in your app layout file.

import { WaaPProvider } from '@/waap.context'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang='en'>
      <body className={``}>
        <WaaPProvider>
          {children}
        </WaaPProvider>
      </body>
    </html>
  )
}

And then use useWaaP hook in your components to get the user's wallet addresses.

import { useWaaP } from '@/waap.context'

export default function Home() {
  const { address } = useWaaP()
  return <div>Connected: {address}</div>
}

Wagmi + Next.js​

→ View source code | → Try on CodeSandbox

This quick start example uses Wagmi v2 and Viem with a custom WaaP connector and Next.js.

Just copy wagmi.config.ts, waap.config.ts and waap.connector.ts files from the example. You can get started immediately in your React and Next.js app.

And then use WagmiProvider with the custom connector in your app layout file.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang='en'>
      <body className={``}>
          <>
          <WagmiProvider config={config}>
            <QueryClientProvider client={queryClient}>
              {children}
            </QueryClientProvider>
          </WagmiProvider>
        </>
      </body>
    </html>
  )
}

And then use wagmi hooks accordingly. For example, here is how to sign message.

import { useAccount, useSignMessage } from 'wagmi'

export default function SignMessage() {

  const { signMessage, isPending, data } = useSignMessage()

  return (
    <div>
      <button onClick={() => signMessage({ message: 'Hello from WaaP!' })}>Sign Message</button>
      {isPending && <div>Signing...</div>}
      {data && <div>Signature: {data}</div>}
    </div>
  )
}

Ethers v6 + Next.js​

→ View source code | → Try on CodeSandbox

This quick start example uses Ethers.js v6 with WaaP as a BrowserProvider and Next.js.

Just copy ethers.config.ts, waap.config.ts and waap.context.tsx files from the example. You can get started immediately in your React and Next.js app.

And then use WaaPProvider in your app layout file.

import { WaaPProvider } from '@/waap.context'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang='en'>
      <body className={``}>
        <WaaPProvider>
          {children}
        </WaaPProvider>
      </body>
    </html>
  )
}

And then use ethers provider and signer accordingly. For example, here is how to sign message.

const { isConnected, provider, signer } = useWaaP()

export default function SignMessage() {

  return (
    <div>
      <button onClick={async () => { const signature = await signer.signMessage('Hello from WaaP!'); console.log(signature); }}>Sign Message</button>
    </div>
  )
}

Other Examples and Templates​

Get Support​

Questions or Trouble Integrating?

Please join our developer Telegram group and get in touch with us.