@synapsea/auth-react

Установка

npm install @synapsea/auth-react

Быстрый старт

import { SynapseaAuthProvider, useSynapseaAuth, LoginButton }
  from '@synapsea/auth-react';

// 1. Оберните приложение в провайдер
function App() {
  return (
    <SynapseaAuthProvider config={{
      apiKey: 'sa_live_xxxxxxx',
      callbackURL: 'https://yoursite.com/auth/callback',
      onSignIn: (user) => console.log('Вошёл:', user),
      onSignOut: () => console.log('Вышел'),
    }}>
      <MyApp />
    </SynapseaAuthProvider>
  );
}

useSynapseaAuth() — основной хук

function MyApp() {
  const { user, loading, signIn, signOut, error } = useSynapseaAuth();

  if (loading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error}</div>;

  if (!user) return (
    <div>
      {/* Готовый компонент кнопки */}
      <LoginButton provider="google">Войти через Google</LoginButton>
      <LoginButton provider="vk">Войти через VK</LoginButton>
      <LoginButton provider="github">Войти через GitHub</LoginButton>

      {/* Или программно */}
      <button onClick={() => signIn('telegram', { method: 'oidc' })}>
        Войти через Telegram
      </button>
    </div>
  );

  return (
    <div>
      <img src={user.avatarUrl} alt={user.name} />
      <h1>Привет, {user.name}!</h1>
      <p>{user.email}</p>
      <p>Провайдер: {user.provider}</p>
      <button onClick={signOut}>Выйти</button>
    </div>
  );
}

SynapseaAuthClient — низкоуровневый клиент

Для случаев, когда нужен прямой доступ к API без React-контекста.

import { SynapseaAuthClient } from '@synapsea/auth-react';

const client = new SynapseaAuthClient({
  apiKey: 'sa_live_xxxxxxx',
});

// OAuth redirect
await client.signIn('google');

// Google One Tap
const { user } = await client.verifyToken('google', 'id_token', {
  credential: googleResponse.credential,
});

// Email OTP
await client.sendEmailOTP('user@example.com');
const { user, token } = await client.verifyEmailOTP('user@example.com', '123456');

// SMS OTP
await client.sendSmsOTP('+79001234567');
const result = await client.verifySmsOTP('+79001234567', '654321');

// Сессия
const { user, session } = await client.getSession(token);
await client.signOut(token);

// Провайдеры
const { providers } = await client.getProviders();

Обработка callback

После OAuth в URL приходит одноразовый параметр sa_code. Обменяйте его на сессию через POST /api/v1/auth/exchange-code (заголовок X-Synapsea-Key). Провайдер SynapseaAuthProvider в React SDK делает это автоматически.

// pages/auth/callback.tsx — SDK читает ?sa_code=... из URL,
// обменивает на session token и вызывает onSignIn.

function CallbackPage() {
  const { user, loading } = useSynapseaAuth();

  if (loading) return <div>Авторизация...</div>;
  if (user) return <Redirect to="/dashboard" />;
  return <div>Что-то пошло не так</div>;
}

Виджет на сайте (без SDK)

Вставьте скрипт с id.synapsea.agency: на странице появится iframe с формой входа. После OAuth пользователь вернётся на ваш callback с одноразовым кодом.

Добавьте origin callback в разрешённые домены проекта и настройте провайдеров в Dashboard.

Вставьте на страницу (подставьте slug и свой callback):

<script src="https://id.synapsea.agency/embed/synapsea-embed.js"
  data-slug="{slug}"
  data-redirect-uri="https://yourapp.com/oauth/callback"
  data-id-host="https://id.synapsea.agency"></script>

На callback обменяйте код на сессию (заголовок X-Synapsea-Key обязателен):

POST https://auth.synapsea.agency/api/v1/auth/exchange-code
Headers: Content-Type: application/json, X-Synapsea-Key: sa_live_xxx

{ "code": "<sa_code из query>" }

// Ответ: { "token": "...", "user": { ... } }

Публичные эндпоинты без ключа: GET /api/v1/auth/hosted-config/{slug}, POST /api/v1/auth/hosted-start.

TypeScript типы

interface SynapseaUser {
  id: string;
  email: string | null;
  emailVerified: boolean;
  name: string | null;
  avatarUrl: string | null;
  phone: string | null;
  username: string | null;
  provider: string;          // 'google', 'vk', 'telegram', ...
  createdAt: string;
  lastSignIn?: string;
}

interface SynapseaSession {
  id: string;
  expiresAt: string;
  ip: string;
  userAgent: string;
}

interface SynapseaAuthConfig {
  apiKey: string;             // sa_live_xxx или sa_test_xxx
  baseURL?: string;           // по умолчанию https://auth.synapsea.agency
  callbackURL?: string;       // URL возврата после OAuth
  onSignIn?: (user: SynapseaUser) => void;
  onSignOut?: () => void;
}