Your current login is a line item.
Ours is infrastructure.

<script type="module" src="https://bonuz.id/sdk/v1/bonuz.js" data-project="bz_…"></script>
<div data-bonuz-login></div>

// window.bonuz exists from the moment the script runs. login() and logout()
// called before the widget is up are queued; the getters answer at once.
window.addEventListener('bonuz:ready', (e) => {
  // The widget is up. e.detail.project is your project name, or null if the
  // config fetch failed. It does not mean anyone is signed in yet: a returning
  // visitor's session is still being restored. Take the user from bonuz:login.
  console.log('bonuz ready for', e.detail.project)
})

// Fires on a fresh sign-in AND when a returning visitor's session is restored
window.addEventListener('bonuz:login', async (e) => {
  showSignedIn(e.detail.user)
  const token = await window.bonuz.getFreshToken() // Promise<string | null>
  await fetch('/api/session', { method: 'POST', body: JSON.stringify({ token }) })
})

window.addEventListener('bonuz:logout', () => showSignedOut())

// Also on window.bonuz:
//   login()      opens the sign-in (a full-page redirect, no popup)
//   logout()     ends the session
//   getToken()   sync: the current access token, or null
//   getUser()    sync: { id, handle, name, walletAddress }, or null
//                (null for a returning visitor until the session is restored)

import { useState } from 'react'
import { BonuzAuthProvider, useBonuzAuth } from '@bonuz/sdk/auth/react'
import { LoginModal } from '@bonuz/sdk/auth/ui'
import { ConnectButton } from '@bonuz/sdk/components'
import '@bonuz/sdk/styles.css'

export function App() {
  return (
    <BonuzAuthProvider config={{ projectId: 'bz_…' }}>
      <SignInButton />
      <Profile />
    </BonuzAuthProvider>
  )
}

// Pair ConnectButton with LoginModal: on its own the button signs in with Google only
function SignInButton() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <ConnectButton onLogin={() => setOpen(true)} />
      <LoginModal isOpen={open} onClose={() => setOpen(false)} />
    </>
  )
}

function Profile() {
  const { isAuthenticated, isLoading, user, getToken, error, errorCode } = useBonuzAuth()
  if (isLoading) return null
  // errorCode: project_not_found | origin_not_allowed | project_paused | challenge_not_found | account_deleted
  if (error) return <p>{errorCode}: {error}</p>
  if (!isAuthenticated || !user) return null
  // user: { id, handle, name, walletAddress, email? }
  // getToken(): Promise<string | null>, always fresh. `token` on the hook may be stale during recovery.
  return <p>{user.handle ?? user.name} · {user.walletAddress}</p>
}

// Your server. The token arrived from the browser.
const res = await fetch('https://admin.bonuz.xyz/api/users/me', {
  headers: { Authorization: `Bearer ${token}` },
})
if (!res.ok) return unauthorized()

const bonuzUser = await res.json()
// A 200 means: this is a real, signed-in bonuz user.
// It does NOT mean the token was issued to your app. Every app shares one audience today.
// Treat it as "a bonuz user", key your own records on bonuzUser.id, and never grant admin rights from it alone.

Content-Security-Policy:
  script-src  'self' https://bonuz.id https://*.web3auth.io 'unsafe-eval' 'wasm-unsafe-eval';
  style-src   'self' https://bonuz.id;   /* add 'unsafe-inline' only for very old browsers */
  connect-src 'self' https://bonuz.id https://admin.bonuz.xyz https://*.web3auth.io wss://*.web3auth.io
              https://mainnet.base.org https://sepolia.base.org https://*.publicnode.com;   /* the wallet's RPCs */
  frame-src   https://*.web3auth.io;
  img-src     'self' data: https:;   /* sign-in logos */

Cross-Origin-Opener-Policy: same-origin-allow-popups   /* safe default, or no COOP. Email, Google and Apple sign-in
                                                          redirect and work with any COOP; only the qID passkey window
                                                          (bonuz's own apps) needs an opener, which same-origin breaks */

<!-- One Custom HTML block where the sign-in button should appear -->
<script type="module" src="https://bonuz.id/sdk/v1/bonuz.js" data-project="bz_…"></script>
<div data-bonuz-login></div>

<!-- Enqueueing from the theme does not work: wp_enqueue_script() drops
     type="module", and wp_enqueue_script_module() prints no data-project, so the
     widget never starts. A header or footer plugin that pastes raw HTML works
     the same as the block above. -->