@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

SDK автоматически подхватывает session_token из URL при возврате с OAuth-провайдера. Просто оберните callback-страницу в SynapseaAuthProvider.

// pages/auth/callback.tsx — ничего дополнительного не нужно!
// SDK сам прочитает ?session_token=... из URL,
// сохранит в localStorage и вызовет onSignIn.

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

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

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;
}