Синапсия Документация
← К быстрому старту

Next.js — App Router

Провайдер в корневом layout, страница callback для обработки sa_code.

Установка

npm install @synapsea/auth-react

Корневой layout

// app/layout.tsx
import { SynapseaAuthProvider } from '@synapsea/auth-react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <body>
        <SynapseaAuthProvider
          config={{
            apiKey: process.env.NEXT_PUBLIC_SYNAPSEA_KEY!,
            callbackURL: process.env.NEXT_PUBLIC_APP_URL + '/auth/callback',
          }}
        >
          {children}
        </SynapseaAuthProvider>
      </body>
    </html>
  );
}

Страница callback

// app/auth/callback/page.tsx
'use client';
import { useSynapseaAuth } from '@synapsea/auth-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function AuthCallbackPage() {
  const { user, loading } = useSynapseaAuth();
  const router = useRouter();
  useEffect(() => {
    if (!loading && user) router.replace('/dashboard');
  }, [loading, user, router]);
  if (loading) return <p className="p-8">…</p>;
  return <p className="p-8">Ошибка входа</p>;
}