pnpm add @synqid/react @synqid/js

import { SynqProvider } from '@synqid/react'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <SynqProvider
      issuer="https://synq.id"
      clientId={process.env.NEXT_PUBLIC_SYNQ_CLIENT_ID!}
      redirectUri="/api/oauth/callback"
    >
      {children}
    </SynqProvider>
  )
}

import { useUser, useSynq, useAccessToken } from '@synqid/react'
 
function Header() {
  const user = useUser()
  const { signIn, signOut, requestSignIn } = useSynq()
 
  if (!user) return <button onClick={() => requestSignIn()}>Sign in</button>
  return (
    <>
      <span>{user.firstName}</span>
      <button onClick={signOut}>Sign out</button>
    </>
  )
}

import { SignedIn, SignedOut, SignInButton, UserButton } from '@synqid/react'
 
<SignedOut>
  <SignInButton provider="google" />
</SignedOut>
<SignedIn>
  <UserButton />
</SignedIn>

// app/api/auth/[...synq]/route.ts
import { synqHandlers } from '@synqid/react/server'
export const { GET, POST } = synqHandlers()

import { auth } from '@synqid/react/server'
 
export default async function Page() {
  const session = await auth()
  if (!session) return <a href="/api/auth/signin">Sign in</a>
  return <div>Hi {session.user.firstName}</div>
}

const { signInError } = useSynq()
if (signInError?.code === 'access_denied') {
  // user denied consent
}

import { SignIn, Connect } from '@synqid/react/ui'
 
<SynqProvider {...config}>
  <YourApp />
  <SignIn />
  <Connect />
</SynqProvider>

<SynqProvider {...config} theme="glass" />

<SynqProvider
  {...config}
  theme={{
    preset: 'light',          // base preset (default: 'dark')
    primary: '#FF7B56',       // brand accent
    primaryHover: '#E85A2D',
    radius: '14px',           // single-radius sugar overrides all radii
    fontFamilyDisplay: 'Inter, system-ui',
  }}
/>

<SynqProvider
  {...config}
  colorScheme="system"
  theme={{
    light: { preset: 'light', primary: '#0A6E5E' },
    dark:  { preset: 'dark',  primary: '#5FD8CA' },
  }}
/>

.synq-modal {
  --synq-primary: var(--brand-primary);
}

.synq-modal[data-color-scheme="light"] [data-synq="content"] { … }

import { GoogleIcon } from '@/icons'
 
<SynqProvider
  {...config}
  providerIcons={{
    google: <GoogleIcon />,                              // React node
    apple: 'https://cdn.acme.com/apple-mark.svg',        // URL → <img>
    matrica: '<svg viewBox="0 0 24 24">…</svg>',         // inline SVG
  }}
/>

<SynqProvider
  {...config}
  signInClassNames={{
    content: 'rounded-3xl bg-zinc-950/95 backdrop-blur-xl',
    title: 'font-display text-2xl',
    provider: 'rounded-xl ring-1 ring-zinc-800 hover:ring-zinc-600',
  }}
/>

<SignIn
  title="Sign in to Acme"
  description="Use the same identity you use on the rest of Acme."
  recommendedProviders={['google', 'apple']}
  hiddenProviders={['facebook']}
  showWallet={true}
  showEmail={false}
  termsUrl="https://acme.com/terms"
  privacyUrl="https://acme.com/privacy"
  closeOnBackdrop={true}
  closeOnEscape={true}
/>

import { SignIn } from '@synqid/react/ui'
 
<SignIn>
  {/* You provide structure. Synq fills semantics + behavior. */}
  <SignIn.Backdrop />
  <SignIn.Content>
    <SignIn.Header>
      <SignIn.Logo src="/brand-logo.svg" />
      <SignIn.Title>Welcome to Acme</SignIn.Title>
      <SignIn.Description>
        Sign in or create an account. It is free.
      </SignIn.Description>
      <SignIn.CloseButton />
    </SignIn.Header>
 
    <SignIn.ErrorBanner />  {/* hidden when no error */}
 
    <SignIn.ProviderList>
      <SignIn.Provider id="google" />
      <SignIn.Provider id="apple" />
    </SignIn.ProviderList>
 
    <SignIn.Divider>or</SignIn.Divider>
 
    <SignIn.WalletButton />
 
    <SignIn.Footer>
      <SignIn.Terms />
    </SignIn.Footer>
  </SignIn.Content>
</SignIn>

<Connect>
  <Connect.Backdrop />
  <Connect.Content>
    <Connect.Title>Connect a wallet</Connect.Title>
    <Connect.WalletList />   {/* picker for installed wallets */}
    <Connect.SigningPrompt />  {/* shows during signature wait */}
    <Connect.ErrorBanner />
  </Connect.Content>
</Connect>

<SignIn>
  {(ctx) => (
    <MyDialog open={ctx.isOpen} onOpenChange={ctx.setOpen}>
      <MyDialogTitle>Sign in</MyDialogTitle>
 
      {ctx.error && <MyError>{ctx.error.message}</MyError>}
 
      <div className="grid gap-2">
        {ctx.providers.map((p) => (
          <MyButton
            key={p.id}
            disabled={ctx.isLoading}
            onClick={() => ctx.signIn(p.id)}
          >
            <img src={p.iconUrl} alt="" /> Continue with {p.name}
          </MyButton>
        ))}
      </div>
 
      {ctx.walletAvailable && (
        <MyButton onClick={ctx.signInWithWallet}>Use my wallet</MyButton>
      )}
 
      <MyEmailForm
        onSubmit={(email) => ctx.requestEmailCode(email)}
      />
    </MyDialog>
  )}
</SignIn>

interface SignInRenderContext {
  isOpen: boolean
  setOpen: (open: boolean) => void
 
  providers: Array<{
    id: ProviderId           // 'google' | 'apple' | ...
    name: string             // 'Google'
    iconUrl: string          // provider logo (themable)
    recommended: boolean     // appears in recommendedProviders order
  }>
  walletAvailable: boolean
  emailEnabled: boolean
 
  isLoading: boolean
  loadingProvider: ProviderId | null
  error: SynqAuthError | null
 
  signIn: (providerId: ProviderId) => Promise<void>
  signInWithWallet: () => Promise<void>
  requestEmailCode: (email: string) => Promise<void>
  submitEmailCode: (code: string) => Promise<void>
 
  options: SignInModalOptions   // the active call's options
  close: () => void
}

const { requestSignIn, requestConnect } = useSynq()
 
await requestSignIn({
  title: 'Sign in to continue your checkout',
  recommendedProviders: ['google'],
})
// resolves with User | null
 
const walletAddress = await requestConnect({
  title: 'Connect a wallet to claim',
})
// resolves with string | null

@layer components {
  .synq-modal :where([data-synq="content"]) {
    @apply rounded-2xl bg-zinc-900 p-6 shadow-2xl;
  }
  .synq-modal :where([data-synq="provider"][data-loading]) {
    @apply opacity-60 cursor-not-allowed;
  }
  .synq-modal :where([data-synq="error"]) {
    @apply text-red-400;
  }
}

import { SignIn } from '@synqid/react/ui'
import { motion } from 'motion/react'
 
<SignIn>
  <SignIn.Backdrop className="bg-black/60 backdrop-blur-md" />
  <SignIn.Content asChild>
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
      className="bg-zinc-950 border border-zinc-800 rounded-3xl p-8 w-full max-w-md"
    >
      <SignIn.Header className="mb-6">
        <SignIn.Title className="font-display text-2xl text-white">
          Welcome to Acme
        </SignIn.Title>
        <SignIn.Description className="text-zinc-400 mt-1">
          Sign in or create an account.
        </SignIn.Description>
      </SignIn.Header>
 
      <SignIn.ErrorBanner className="mb-4 rounded-lg bg-red-500/10 text-red-400 px-4 py-3 text-sm" />
 
      <SignIn.ProviderList className="grid gap-2">
        <SignIn.Provider
          id="google"
          className="flex items-center gap-3 rounded-lg bg-white text-black hover:bg-zinc-100 px-4 py-3 transition-colors disabled:opacity-50"
        />
        <SignIn.Provider
          id="apple"
          className="flex items-center gap-3 rounded-lg bg-black text-white hover:bg-zinc-900 px-4 py-3 border border-zinc-800 transition-colors disabled:opacity-50"
        />
      </SignIn.ProviderList>
 
      <SignIn.Divider className="my-4 text-zinc-500 text-xs">
        or with a wallet
      </SignIn.Divider>
 
      <SignIn.WalletButton className="w-full flex items-center justify-center gap-3 rounded-lg bg-purple-600 text-white hover:bg-purple-700 px-4 py-3 transition-colors" />
 
      <SignIn.Footer className="mt-6 text-center text-xs text-zinc-500">
        <SignIn.Terms />
      </SignIn.Footer>
    </motion.div>
  </SignIn.Content>
</SignIn>