@fayz-ai/plugin-auth 0.1.1

package/src/forms.tsx

@@ -0,0 +1,252 @@
+import * as React from 'react'
+import { useAuth } from '@fayz-ai/auth'
+import type { AuthProvider } from '@fayz-ai/core'
+
+function providerLabel(provider: string): string {
+  return provider.charAt(0).toUpperCase() + provider.slice(1)
+}
+
+function fieldClass() {
+  return 'h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+}
+
+function buttonClass(variant: 'primary' | 'outline' | 'ghost' = 'primary') {
+  if (variant === 'outline') {
+    return 'inline-flex h-10 w-full items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50'
+  }
+  if (variant === 'ghost') return 'text-sm font-medium text-primary hover:underline'
+  return 'inline-flex h-10 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50'
+}
+
+export interface OAuthButtonsProps {
+  providers?: Exclude<AuthProvider, 'email'>[]
+  disabled?: boolean
+  onProviderClick?: (provider: AuthProvider) => void | Promise<void>
+}
+
+export function OAuthButtons({ providers = ['google'], disabled, onProviderClick }: OAuthButtonsProps) {
+  const { signInWithOAuth } = useAuth()
+  return (
+    <div className="space-y-2">
+      {providers.map((provider) => (
+        <button
+          key={provider}
+          type="button"
+          className={buttonClass('outline')}
+          disabled={disabled}
+          onClick={() => {
+            void (onProviderClick ? onProviderClick(provider) : signInWithOAuth(provider))
+          }}
+        >
+          Continue with {providerLabel(provider)}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export interface LoginFormProps {
+  onSuccess?: () => void
+  onForgotPassword?: () => void
+  showOAuth?: boolean
+  oauthProviders?: Exclude<AuthProvider, 'email'>[]
+}
+
+export function LoginForm({ onSuccess, onForgotPassword, showOAuth, oauthProviders }: LoginFormProps) {
+  const { signIn, error, isLoading } = useAuth()
+  const [email, setEmail] = React.useState('')
+  const [password, setPassword] = React.useState('')
+  const [busy, setBusy] = React.useState(false)
+  const disabled = busy || isLoading
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault()
+    setBusy(true)
+    try {
+      await signIn(email, password)
+      onSuccess?.()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-4">
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Email</span>
+        <input className={fieldClass()} type="email" autoComplete="username" required value={email} onChange={(e) => setEmail(e.target.value)} disabled={disabled} />
+      </label>
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Password</span>
+        <input className={fieldClass()} type="password" autoComplete="current-password" required value={password} onChange={(e) => setPassword(e.target.value)} disabled={disabled} />
+      </label>
+      {onForgotPassword && (
+        <div className="-mt-1 flex justify-end">
+          <button type="button" className={buttonClass('ghost')} onClick={onForgotPassword}>
+            Forgot password?
+          </button>
+        </div>
+      )}
+      {error && <p className="text-sm text-destructive">{error.message}</p>}
+      <button className={buttonClass()} type="submit" disabled={disabled}>
+        {disabled ? 'Signing in...' : 'Sign in'}
+      </button>
+      {showOAuth && <OAuthButtons providers={oauthProviders} disabled={disabled} />}
+    </form>
+  )
+}
+
+export interface SignupFormProps {
+  onSuccess?: () => void
+}
+
+export function SignupForm({ onSuccess }: SignupFormProps) {
+  const { signUp, error, isLoading } = useAuth()
+  const [fullName, setFullName] = React.useState('')
+  const [email, setEmail] = React.useState('')
+  const [password, setPassword] = React.useState('')
+  const [confirmPassword, setConfirmPassword] = React.useState('')
+  const [localError, setLocalError] = React.useState<string | null>(null)
+  const [busy, setBusy] = React.useState(false)
+  const disabled = busy || isLoading
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault()
+    setLocalError(null)
+    if (password.length < 8) {
+      setLocalError('Password must be at least 8 characters.')
+      return
+    }
+    if (password !== confirmPassword) {
+      setLocalError('Passwords do not match.')
+      return
+    }
+    setBusy(true)
+    try {
+      await signUp(email, password, fullName)
+      onSuccess?.()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-4">
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Full name</span>
+        <input className={fieldClass()} required value={fullName} onChange={(e) => setFullName(e.target.value)} disabled={disabled} />
+      </label>
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Email</span>
+        <input className={fieldClass()} type="email" autoComplete="username" required value={email} onChange={(e) => setEmail(e.target.value)} disabled={disabled} />
+      </label>
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Password</span>
+        <input className={fieldClass()} type="password" autoComplete="new-password" required value={password} onChange={(e) => setPassword(e.target.value)} disabled={disabled} />
+      </label>
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Confirm password</span>
+        <input className={fieldClass()} type="password" autoComplete="new-password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} disabled={disabled} />
+      </label>
+      {(localError || error) && <p className="text-sm text-destructive">{localError ?? error?.message}</p>}
+      <button className={buttonClass()} type="submit" disabled={disabled}>
+        {disabled ? 'Creating account...' : 'Create account'}
+      </button>
+    </form>
+  )
+}
+
+export interface ForgotPasswordFormProps {
+  redirectTo?: string
+  onSent?: (email: string) => void
+  onBackToLogin?: () => void
+}
+
+export function ForgotPasswordForm({ redirectTo, onSent, onBackToLogin }: ForgotPasswordFormProps) {
+  const { resetPassword, error, isLoading } = useAuth()
+  const [email, setEmail] = React.useState('')
+  const [sent, setSent] = React.useState(false)
+  const [busy, setBusy] = React.useState(false)
+  const disabled = busy || isLoading
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault()
+    setBusy(true)
+    try {
+      await resetPassword(email, { redirectTo })
+      setSent(true)
+      onSent?.(email)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-4">
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Email</span>
+        <input className={fieldClass()} type="email" autoComplete="username" required value={email} onChange={(e) => setEmail(e.target.value)} disabled={disabled} />
+      </label>
+      {error && <p className="text-sm text-destructive">{error.message}</p>}
+      {sent && <p className="text-sm text-emerald-600">Password reset instructions sent.</p>}
+      <button className={buttonClass()} type="submit" disabled={disabled}>
+        {disabled ? 'Sending...' : 'Send reset link'}
+      </button>
+      {onBackToLogin && (
+        <button type="button" className={buttonClass('ghost')} onClick={onBackToLogin}>
+          Back to login
+        </button>
+      )}
+    </form>
+  )
+}
+
+export interface ResetPasswordFormProps {
+  onSuccess?: () => void
+}
+
+export function ResetPasswordForm({ onSuccess }: ResetPasswordFormProps) {
+  const { updatePassword, error, isLoading } = useAuth()
+  const [password, setPassword] = React.useState('')
+  const [confirmPassword, setConfirmPassword] = React.useState('')
+  const [localError, setLocalError] = React.useState<string | null>(null)
+  const [busy, setBusy] = React.useState(false)
+  const disabled = busy || isLoading
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault()
+    setLocalError(null)
+    if (password.length < 8) {
+      setLocalError('Password must be at least 8 characters.')
+      return
+    }
+    if (password !== confirmPassword) {
+      setLocalError('Passwords do not match.')
+      return
+    }
+    setBusy(true)
+    try {
+      await updatePassword(password)
+      onSuccess?.()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-4">
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>New password</span>
+        <input className={fieldClass()} type="password" autoComplete="new-password" required value={password} onChange={(e) => setPassword(e.target.value)} disabled={disabled} />
+      </label>
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Confirm password</span>
+        <input className={fieldClass()} type="password" autoComplete="new-password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} disabled={disabled} />
+      </label>
+      {(localError || error) && <p className="text-sm text-destructive">{localError ?? error?.message}</p>}
+      <button className={buttonClass()} type="submit" disabled={disabled}>
+        {disabled ? 'Saving...' : 'Update password'}
+      </button>
+    </form>
+  )
+}

package/src/index.ts

@@ -0,0 +1,49 @@
+export {
+  createAuthPlugin,
+  createAuthRuntime,
+  resolveAuthAdapter,
+} from './runtime'
+export {
+  AuthGate,
+  LoginPage,
+  AuthCallbackPage,
+  ResetPasswordPage,
+} from './pages'
+export type {
+  AuthCallbackPageProps,
+  AuthGateProps,
+  LoginPageProps,
+  ResetPasswordPageProps,
+} from './pages'
+export {
+  LoginForm,
+  SignupForm,
+  ForgotPasswordForm,
+  ResetPasswordForm,
+  OAuthButtons,
+} from './forms'
+export type {
+  ForgotPasswordFormProps,
+  LoginFormProps,
+  OAuthButtonsProps,
+  ResetPasswordFormProps,
+  SignupFormProps,
+} from './forms'
+export {
+  createMockAuthAdapter,
+  createSupabaseAuthAdapter,
+  AuthProvider,
+  useAuth,
+  useAuthStore,
+} from '@fayz-ai/auth'
+export type {
+  AuthPluginOptions,
+  ResolvedAuthPlugin,
+  AuthRoutesConfig,
+  AuthOAuthConfig,
+  AuthSupabaseConfig,
+  AuthProviderKey,
+  AuthLayout,
+  AuthFormView,
+} from './types'
+export type { AuthAdapter, AuthSession, AuthUser, AuthProvider as OAuthProvider } from '@fayz-ai/core'

package/src/pages.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react'
+import { useAuth } from '@fayz-ai/auth'
+import type { AuthProvider } from '@fayz-ai/core'
+import { ForgotPasswordForm, LoginForm, ResetPasswordForm, SignupForm } from './forms'
+import type { AuthFormView, AuthLayout } from './types'
+
+export interface LoginPageProps {
+  appName?: string
+  logo?: React.ReactNode
+  loginLogo?: React.ReactNode
+  layout?: AuthLayout
+  tagline?: string
+  description?: string
+  showOAuth?: boolean
+  oauthProviders?: Exclude<AuthProvider, 'email'>[]
+  resetPasswordUrl?: string
+  onSuccess?: () => void
+}
+
+export function LoginPage({
+  appName = 'App',
+  logo,
+  loginLogo,
+  layout = 'split',
+  tagline,
+  description,
+  showOAuth,
+  oauthProviders,
+  resetPasswordUrl,
+  onSuccess,
+}: LoginPageProps) {
+  const [view, setView] = React.useState<AuthFormView>('login')
+  const brandLogo = loginLogo ?? logo
+  const heading = view === 'login' ? 'Welcome back' : view === 'signup' ? 'Create account' : 'Reset password'
+  const subtitle =
+    view === 'login'
+      ? 'Enter your credentials to continue'
+      : view === 'signup'
+        ? 'Create your account to get started'
+        : 'Enter your email and we will send reset instructions'
+  const form =
+    view === 'login' ? (
+      <LoginForm
+        onSuccess={onSuccess}
+        onForgotPassword={() => setView('recovery')}
+        showOAuth={showOAuth}
+        oauthProviders={oauthProviders}
+      />
+    ) : view === 'signup' ? (
+      <SignupForm onSuccess={onSuccess} />
+    ) : (
+      <ForgotPasswordForm redirectTo={resetPasswordUrl} onBackToLogin={() => setView('login')} />
+    )
+  const switcher =
+    view === 'login' ? (
+      <p className="text-center text-sm text-muted-foreground">
+        Do not have an account?{' '}
+        <button type="button" className="font-medium text-primary hover:underline" onClick={() => setView('signup')}>
+          Sign up
+        </button>
+      </p>
+    ) : (
+      <p className="text-center text-sm text-muted-foreground">
+        {view === 'signup' ? 'Already have an account?' : 'Remembered your password?'}{' '}
+        <button type="button" className="font-medium text-primary hover:underline" onClick={() => setView('login')}>
+          Sign in
+        </button>
+      </p>
+    )
+
+  if (layout === 'centered') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-sidebar p-4">
+        <div className="w-full max-w-md rounded-2xl border border-border/50 bg-card p-8 shadow-2xl sm:p-10">
+          <div className="mb-8 text-center">
+            {brandLogo && <div className="mb-4 flex justify-center">{brandLogo}</div>}
+            <h1 className="text-2xl font-bold text-foreground">{heading}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+          </div>
+          <div className="space-y-6">
+            {form}
+            {switcher}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen bg-sidebar">
+      <div className="relative hidden w-1/2 overflow-hidden lg:block">
+        <div className="absolute inset-0 bg-gradient-to-br from-sidebar-accent/50 via-transparent to-sidebar/80" />
+        <div className="relative flex h-full flex-col justify-end p-12">
+          <div className="space-y-4">
+            <p className="text-sm font-medium text-sidebar-muted">{appName}</p>
+            <h2 className="text-3xl font-bold text-sidebar-foreground">{tagline ?? `Welcome to ${appName}`}</h2>
+            {description && <p className="max-w-md text-sm leading-relaxed text-sidebar-muted">{description}</p>}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-1 flex-col lg:p-3 lg:pl-3">
+        <div className="flex flex-1 flex-col justify-center bg-background px-6 py-12 lg:rounded-[1.25rem] lg:px-16">
+          <div className="mx-auto w-full max-w-sm">
+            {brandLogo && <div className="mb-8">{brandLogo}</div>}
+            <div className="mb-8">
+              <h1 className="text-2xl font-bold text-foreground">{heading}</h1>
+              <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+            </div>
+            <div className="space-y-6">
+              {form}
+              {switcher}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export interface AuthGateProps extends LoginPageProps {
+  requireAuth?: boolean
+  loadingFallback?: React.ReactNode
+  children: React.ReactNode
+}
+
+export function AuthGate({ requireAuth = true, loadingFallback, children, ...loginProps }: AuthGateProps) {
+  const { isAuthenticated, isLoading } = useAuth()
+  if (!requireAuth || isAuthenticated) return <>{children}</>
+  if (isLoading) {
+    return (
+      <>
+        {loadingFallback ?? (
+          <div className="flex min-h-screen items-center justify-center bg-background">
+            <span className="text-sm text-muted-foreground">Loading...</span>
+          </div>
+        )}
+      </>
+    )
+  }
+  return <LoginPage {...loginProps} />
+}
+
+export interface AuthCallbackPageProps {
+  onSuccess?: () => void
+  onError?: (error: Error) => void
+}
+
+export function AuthCallbackPage({ onSuccess, onError }: AuthCallbackPageProps) {
+  const { handleCallback } = useAuth()
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    let cancelled = false
+    handleCallback(typeof window === 'undefined' ? undefined : window.location.href)
+      .then(() => {
+        if (!cancelled) onSuccess?.()
+      })
+      .catch((err: unknown) => {
+        const errorObject = err instanceof Error ? err : new Error(String(err))
+        if (!cancelled) {
+          setError(errorObject.message)
+          onError?.(errorObject)
+        }
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [handleCallback, onError, onSuccess])
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-6 text-center">
+      <div>
+        <h1 className="text-xl font-semibold text-foreground">{error ? 'Authentication failed' : 'Completing sign in...'}</h1>
+        {error && <p className="mt-2 text-sm text-destructive">{error}</p>}
+      </div>
+    </div>
+  )
+}
+
+export interface ResetPasswordPageProps {
+  onSuccess?: () => void
+}
+
+export function ResetPasswordPage({ onSuccess }: ResetPasswordPageProps) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md rounded-2xl border bg-card p-8 shadow-xl">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold text-foreground">Update password</h1>
+          <p className="mt-1 text-sm text-muted-foreground">Choose a new password for your account.</p>
+        </div>
+        <ResetPasswordForm onSuccess={onSuccess} />
+      </div>
+    </div>
+  )
+}

package/src/runtime.ts

@@ -0,0 +1,59 @@
+import type { AuthAdapter } from '@fayz-ai/core'
+import { createMockAuthAdapter, createSupabaseAuthAdapter } from '@fayz-ai/auth'
+import type { AuthPluginOptions, ResolvedAuthPlugin } from './types'
+
+function absoluteUrl(path: string): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  if (/^https?:\/\//.test(path)) return path
+  return `${window.location.origin}${path.startsWith('/') ? path : `/${path}`}`
+}
+
+export function resolveAuthAdapter(options: AuthPluginOptions = {}): AuthAdapter {
+  const configured = options.adapter ?? options.provider
+  if (configured && typeof configured === 'object') return configured
+
+  const provider = configured ?? (options.supabase?.url ? 'supabase' : 'mock')
+  if (provider === 'supabase') {
+    const url = options.supabase?.url
+    const anonKey = options.supabase?.anonKey
+    if (!url || !anonKey) {
+      throw new Error('plugin-auth provider="supabase" requires supabase.url and supabase.anonKey.')
+    }
+    return createSupabaseAuthAdapter({
+      supabaseUrl: url,
+      supabaseAnonKey: anonKey,
+      supabaseClient: options.supabase?.client,
+      callbackUrl: options.supabase?.callbackUrl ?? absoluteUrl(options.routes?.callback ?? '/auth/callback'),
+      resetPasswordUrl:
+        options.supabase?.resetPasswordUrl ?? absoluteUrl(options.routes?.resetPassword ?? '/auth/reset-password'),
+    })
+  }
+
+  return createMockAuthAdapter()
+}
+
+export function createAuthRuntime(options: AuthPluginOptions = {}): ResolvedAuthPlugin {
+  return {
+    kind: 'auth',
+    adapter: resolveAuthAdapter(options),
+    requireAuth: options.requireAuth ?? true,
+    layout: options.layout ?? 'split',
+    logo: options.logo,
+    tagline: options.tagline,
+    description: options.description,
+    oauth: {
+      enabled: options.oauth?.enabled ?? false,
+      providers: options.oauth?.providers ?? ['google'],
+    },
+    routes: {
+      login: options.routes?.login ?? '/login',
+      callback: options.routes?.callback ?? '/auth/callback',
+      resetPassword: options.routes?.resetPassword ?? '/auth/reset-password',
+      afterSignIn: options.routes?.afterSignIn ?? '/',
+    },
+  }
+}
+
+export function createAuthPlugin(options: AuthPluginOptions = {}): ResolvedAuthPlugin {
+  return createAuthRuntime(options)
+}

package/src/types.ts

@@ -0,0 +1,53 @@
+import type React from 'react'
+import type { AuthAdapter, AuthProvider } from '@fayz-ai/core'
+import type { SupabaseAuthConfig } from '@fayz-ai/auth'
+
+export type AuthProviderKey = 'supabase' | 'mock' | (string & {})
+export type AuthLayout = 'split' | 'centered'
+
+export interface AuthRoutesConfig {
+  login?: string
+  callback?: string
+  resetPassword?: string
+  afterSignIn?: string
+}
+
+export interface AuthOAuthConfig {
+  enabled?: boolean
+  providers?: Exclude<AuthProvider, 'email'>[]
+}
+
+export interface AuthSupabaseConfig {
+  url?: string
+  anonKey?: string
+  client?: SupabaseAuthConfig['supabaseClient']
+  callbackUrl?: string
+  resetPasswordUrl?: string
+}
+
+export interface AuthPluginOptions {
+  provider?: AuthProviderKey | AuthAdapter
+  adapter?: AuthProviderKey | AuthAdapter
+  supabase?: AuthSupabaseConfig
+  requireAuth?: boolean
+  layout?: AuthLayout
+  logo?: React.ReactNode
+  tagline?: string
+  description?: string
+  oauth?: AuthOAuthConfig
+  routes?: AuthRoutesConfig
+}
+
+export interface ResolvedAuthPlugin {
+  kind: 'auth'
+  adapter: AuthAdapter
+  requireAuth: boolean
+  layout: AuthLayout
+  logo?: React.ReactNode
+  tagline?: string
+  description?: string
+  oauth: Required<AuthOAuthConfig>
+  routes: Required<AuthRoutesConfig>
+}
+
+export type AuthFormView = 'login' | 'signup' | 'recovery'