React и Preact

@orria/tapok/react и @orria/tapok/preact реэкспортируют Tapok и createTapokConnect. SDK не добавляет собственные hooks или UI-компоненты: состояние хранится средствами приложения.

Hosted

import { useState } from 'react'
import { Tapok } from '@orria/tapok/react'
// Для Preact: useState из preact/hooks и @orria/tapok/preact

const tapok = new Tapok()

function LoginButton() {
  const [pending, setPending] = useState(false)

  async function login() {
    setPending(true)
    try {
      const result = await tapok.login()
      // Псевдокод: backend проверяет Hosted token и ставит HttpOnly cookie.
      await api.createSession({ token: result.token })
    } finally {
      setPending(false)
    }
  }

  return <button onClick={login} disabled={pending}>Войти через Tapok</button>
}

login() вызывается непосредственно из onClick, иначе браузер может заблокировать popup.

Connect

import { useEffect } from 'react'
import { createTapokConnect } from '@orria/tapok/react'

const connect = createTapokConnect({
  clientId: 'tapok_…',
  redirectUri: 'https://app.example/auth/callback',
  scopes: ['session', 'profile:display_name'],
})

function ConnectLoginButton() {
  return <button onClick={() => connect.startSignIn()}>Войти</button>
}

function ConnectCallbackPage() {
  useEffect(() => {
    const callback = connect.finishSignIn()
    if (callback) api.exchangeConnectCode(callback) // собственный backend
  }, [])

  return <p>Завершаем вход…</p>
}

Для Preact меняются только импорты React/Preact; API Tapok остаётся тем же.