<SignIn>

Drop-in sign-in card. Renders email + password primary with social providers stacked above, a magic-link sidecar, and a link to the matching <SignUp>. All flows hit the instance API exposed by your <KolayLoginProvider> so no extra config needed.

Usage

import { SignIn } from '@kolaylogin/react';

export default function SignInPage() {
  return <SignIn redirectUrl="/dashboard" />;
}

Props

• redirectUrl — where to go after a successful sign-in. Default '/'.
• signUpUrl — path to the sign-up card. Default '/sign-up'.
• title, subtitle — swap the heading copy.
• showBranding, brandText — top-of-card logo + wordmark.
• socialProviders — list of providers your instance has enabled. Default ['google', 'github'].
• enableMagicLink — show the "email me a link" button. Default true.
• onSignIn(result) — callback fired before the redirect (useful for analytics).

Styling

The component injects a single <style> tag on first mount with classes under .kl-*. Override the accent with a CSS variable on any ancestor:

.my-auth-root { --kl-primary: #22c55e; }

Custom layouts

Want two-column hero + form? Wrap it yourself:

<div className="grid lg:grid-cols-2 min-h-screen">
  <aside className="bg-gray-900 text-white p-12">
    <h1 className="text-4xl font-bold">Welcome back.</h1>
  </aside>
  <main className="flex items-center justify-center p-6">
    <SignIn redirectUrl="/dashboard" />
  </main>
</div>