@fayz-ai/plugin-auth 0.9.0 → 0.10.0

package/src/pages.tsx

@@ -1,209 +0,0 @@
-import * as React from 'react'
-import { useAuth } from '@fayz-ai/auth'
-import type { AuthProvider } from '@fayz-ai/core'
-import { ForgotPasswordForm, LoginForm, SignupForm } from './forms'
-import { SetPasswordPage } from './set-password'
-import { AmbassadorBubbles } from './AmbassadorBubbles'
-import type { AuthFormView, AuthLayout, LoginAmbassador } from './types'
-
-export interface LoginPageProps {
-  appName?: string
-  logo?: React.ReactNode
-  loginLogo?: React.ReactNode
-  layout?: AuthLayout
-  tagline?: string
-  description?: string
-  /** Product ambassadors shown as a small social-proof avatar strip above the
-   *  tagline on the split-layout brand panel. Renders nothing when empty/imageless. */
-  loginAmbassadors?: LoginAmbassador[]
-  /** Optional microtext beside the ambassador strip, e.g. "+2 mil profissionais". */
-  loginAmbassadorsLabel?: string
-  showOAuth?: boolean
-  oauthProviders?: Exclude<AuthProvider, 'email'>[]
-  resetPasswordUrl?: string
-  onSuccess?: () => void
-}
-
-export function LoginPage({
-  appName = 'App',
-  logo,
-  loginLogo,
-  layout = 'split',
-  tagline,
-  description,
-  loginAmbassadors,
-  loginAmbassadorsLabel,
-  showOAuth,
-  oauthProviders,
-  resetPasswordUrl,
-  onSuccess,
-}: LoginPageProps) {
-  const [view, setView] = React.useState<AuthFormView>('login')
-  // Lifted out of the forms so switching view carries the e-mail across: someone
-  // who typed it and then remembered they forgot the password should not have to
-  // type it again (and back on the login form it is still there).
-  const [email, setEmail] = React.useState('')
-  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}
-        initialEmail={email}
-        onEmailChange={setEmail}
-      />
-    ) : view === 'signup' ? (
-      <SignupForm onSuccess={onSuccess} />
-    ) : (
-      <ForgotPasswordForm
-        redirectTo={resetPasswordUrl}
-        onBackToLogin={() => setView('login')}
-        initialEmail={email}
-        onEmailChange={setEmail}
-      />
-    )
-  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 z-20 flex h-full flex-col justify-end p-12">
-          <div className="space-y-4">
-            <AmbassadorBubbles ambassadors={loginAmbassadors} label={loginAmbassadorsLabel} />
-            <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
-}
-
-/** Kept for apps that route `/auth/reset-password` themselves. The shell no
- *  longer needs a route: SetPasswordPage is mounted by usePasswordSetupGate. */
-export function ResetPasswordPage({ onSuccess }: ResetPasswordPageProps) {
-  return <SetPasswordPage reason="recovery" onSuccess={onSuccess} />
-}

package/src/runtime.ts

@@ -1,67 +0,0 @@
-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'),
-      // Only when the host asked for a specific URL. Left undefined, the adapter
-      // points recovery at the app root, which needs no route and no extra entry
-      // in Supabase's redirect allow-list.
-      resetPasswordUrl:
-        options.supabase?.resetPasswordUrl ??
-        (options.routes?.resetPassword ? absoluteUrl(options.routes.resetPassword) : undefined),
-    })
-  }
-
-  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,
-    loginAmbassadors: options.loginAmbassadors,
-    loginAmbassadorsLabel: options.loginAmbassadorsLabel,
-    oauth: {
-      enabled: options.oauth?.enabled ?? false,
-      providers: options.oauth?.providers ?? ['google'],
-    },
-    routes: {
-      login: options.routes?.login ?? '/login',
-      callback: options.routes?.callback ?? '/auth/callback',
-      // The app root — recovery links are recognised by their own params, not by
-      // the path they land on. See resetPassword() in the Supabase adapter.
-      resetPassword: options.routes?.resetPassword ?? '/',
-      afterSignIn: options.routes?.afterSignIn ?? '/',
-    },
-  }
-}
-
-export function createAuthPlugin(options: AuthPluginOptions = {}): ResolvedAuthPlugin {
-  return createAuthRuntime(options)
-}

package/src/set-password.tsx

@@ -1,229 +0,0 @@
-import * as React from 'react'
-import { useAuth, readAuthUrlIntent, clearAuthUrlTokens, decidePasswordSetup } from '@fayz-ai/auth'
-import { useTranslation } from '@fayz-ai/core'
-import { ForgotPasswordForm } from './forms'
-
-// ---------------------------------------------------------------------------
-// Set-password surface — the one screen behind two flows:
-//
-//   • recovery — the user clicked "forgot password" and came back on a recovery
-//     link. GoTrue already signed them in from the link, so all that is missing
-//     is `updateUser({ password })`. Without this screen they land straight in
-//     the app (or on the login form) and are never asked, which is exactly the
-//     "the link does nothing" bug.
-//
-//   • invite — the user was added to an organisation. The invite is a magic link,
-//     so the account exists with NO password: unless they choose one here, every
-//     future sign-in needs another e-mail.
-//
-// Mounted by the shell above its auth gate, driven by usePasswordSetupGate().
-// ---------------------------------------------------------------------------
-
-export type SetPasswordReason = 'recovery' | 'invite'
-
-const MIN_LENGTH = 8
-
-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() {
-  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'
-}
-
-function useTr() {
-  const t = useTranslation()
-  return React.useCallback(
-    (key: string, fallback: string, params?: Record<string, string | number>) => {
-      const value = t(key, params)
-      return !value || value === key ? fallback : value
-    },
-    [t],
-  )
-}
-
-export interface PasswordSetupGate {
-  /** null when nothing is pending and the shell should render normally. */
-  reason: SetPasswordReason | null
-  /** The link is dead (already used / expired) — offer a fresh one instead. */
-  expired: boolean
-  /** Still resolving the session the link carries. */
-  checking: boolean
-  /** Called by the screen once the password is set (or the user gives up). */
-  complete: () => void
-}
-
-/**
- * Decides whether the user owes us a password before they see the app.
- *
- * The URL intent is read from a snapshot taken at module load: supabase-js wipes
- * the token fragment as soon as it initialises, so the reason the user is here is
- * gone by the time React renders.
- */
-export function usePasswordSetupGate(): PasswordSetupGate {
-  const { user, isLoading, isAuthenticated } = useAuth()
-  const [done, setDone] = React.useState(false)
-  const intent = React.useMemo(() => readAuthUrlIntent(), [])
-
-  const complete = React.useCallback(() => {
-    clearAuthUrlTokens()
-    setDone(true)
-  }, [])
-
-  if (done) return { reason: null, expired: false, checking: false, complete }
-
-  const decision = decidePasswordSetup({
-    intent,
-    isLoading,
-    isAuthenticated,
-    mustSetPassword: user?.mustSetPassword,
-  })
-  return { ...decision, complete }
-}
-
-export interface SetPasswordPageProps {
-  reason: SetPasswordReason
-  appName?: string
-  logo?: React.ReactNode
-  /** Show the "ask for a new link" form instead of the password fields. */
-  expired?: boolean
-  /** Waiting on the link's session — renders a quiet placeholder. */
-  checking?: boolean
-  onSuccess?: () => void
-}
-
-export function SetPasswordPage({
-  reason,
-  appName = 'App',
-  logo,
-  expired,
-  checking,
-  onSuccess,
-}: SetPasswordPageProps) {
-  const tr = useTr()
-  const { user, updatePassword, signOut, 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
-
-  const invite = reason === 'invite'
-  const title = invite
-    ? tr('auth.setPassword.welcomeTitle', `Welcome to ${appName}`, { appName })
-    : tr('auth.setPassword.recoveryTitle', 'Choose a new password')
-  const subtitle = invite
-    ? tr('auth.setPassword.welcomeSubtitle', 'Choose a password to finish setting up your access.')
-    : tr('auth.setPassword.recoverySubtitle', 'Set a new password to get back into your account.')
-
-  async function submit(event: React.FormEvent) {
-    event.preventDefault()
-    setLocalError(null)
-    if (password.length < MIN_LENGTH) {
-      setLocalError(tr('auth.setPassword.tooShort', `Password must be at least ${MIN_LENGTH} characters.`))
-      return
-    }
-    if (password !== confirmPassword) {
-      setLocalError(tr('auth.setPassword.mismatch', 'Passwords do not match.'))
-      return
-    }
-    setBusy(true)
-    try {
-      await updatePassword(password)
-      onSuccess?.()
-    } catch {
-      // useAuth already surfaced it; keep the user on the form.
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  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">
-        {logo && <div className="mb-6 flex justify-center">{logo}</div>}
-        {checking ? (
-          <p className="py-6 text-center text-sm text-muted-foreground">
-            {tr('auth.setPassword.checking', 'Checking your link...')}
-          </p>
-        ) : expired ? (
-          <>
-            <div className="mb-6">
-              <h1 className="text-2xl font-bold text-foreground">
-                {tr('auth.setPassword.expiredTitle', 'This link has expired')}
-              </h1>
-              <p className="mt-1 text-sm text-muted-foreground">
-                {tr(
-                  'auth.setPassword.expiredSubtitle',
-                  'Reset links can only be used once. Enter your e-mail and we will send a new one.',
-                )}
-              </p>
-            </div>
-            <ForgotPasswordForm
-              initialEmail={user?.email}
-              submitLabel={tr('auth.setPassword.sendNewLink', 'Send new link')}
-              sendingLabel={tr('auth.setPassword.sending', 'Sending...')}
-              sentLabel={tr('auth.setPassword.sent', 'Check your inbox — a new link is on the way.')}
-              emailLabel={tr('auth.setPassword.email', 'E-mail')}
-              backLabel={tr('auth.setPassword.backToLogin', 'Back to sign in')}
-              onBackToLogin={onSuccess}
-            />
-          </>
-        ) : (
-          <>
-            <div className="mb-6">
-              <h1 className="text-2xl font-bold text-foreground">{title}</h1>
-              <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
-            </div>
-            <form onSubmit={submit} className="space-y-4">
-              <label className="block space-y-1.5 text-sm font-medium">
-                <span>{tr('auth.setPassword.newPassword', 'New password')}</span>
-                <input
-                  className={fieldClass()}
-                  type="password"
-                  autoComplete="new-password"
-                  autoFocus
-                  required
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  disabled={disabled}
-                />
-              </label>
-              <label className="block space-y-1.5 text-sm font-medium">
-                <span>{tr('auth.setPassword.confirmPassword', '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
-                  ? tr('auth.setPassword.saving', 'Saving...')
-                  : tr('auth.setPassword.submit', 'Save password')}
-              </button>
-            </form>
-            {/* An invitee who does not want to continue needs a way out that does
-                not leave them stuck on this screen with a live session. */}
-            <button
-              type="button"
-              className="mt-4 w-full text-center text-sm text-muted-foreground hover:text-foreground"
-              onClick={() => {
-                void signOut().finally(() => onSuccess?.())
-              }}
-            >
-              {tr('auth.setPassword.backToLogin', 'Back to sign in')}
-            </button>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/types.ts

@@ -1,65 +0,0 @@
-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'
-
-/** A product ambassador rendered as a floating circular photo bubble on the
- *  split-login decorative panel. `image` may be a local path or a data URI. */
-export interface LoginAmbassador {
-  name: string
-  role?: string
-  image: string
-}
-
-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
-  loginAmbassadors?: LoginAmbassador[]
-  loginAmbassadorsLabel?: string
-  oauth?: AuthOAuthConfig
-  routes?: AuthRoutesConfig
-}
-
-export interface ResolvedAuthPlugin {
-  kind: 'auth'
-  adapter: AuthAdapter
-  requireAuth: boolean
-  layout: AuthLayout
-  logo?: React.ReactNode
-  tagline?: string
-  description?: string
-  loginAmbassadors?: LoginAmbassador[]
-  loginAmbassadorsLabel?: string
-  oauth: Required<AuthOAuthConfig>
-  routes: Required<AuthRoutesConfig>
-}
-
-export type AuthFormView = 'login' | 'signup' | 'recovery'

package/src/website/AuthModalProvider.tsx

@@ -1,48 +0,0 @@
-import { createContext, useContext, useState, type ReactNode } from 'react'
-import { PhoneAuthModal, type PhoneAuthModalConfig } from './PhoneAuthModal'
-
-interface AuthModalContextValue {
-  openAuthModal: () => void
-  closeAuthModal: () => void
-  isAuthModalOpen: boolean
-}
-
-const AuthModalContext = createContext<AuthModalContextValue | null>(null)
-
-export interface AuthModalProviderProps {
-  /** Enables the phone sign-in/up modal (default for dogfood sites). */
-  phoneAuth?: boolean
-  config?: PhoneAuthModalConfig
-  children: ReactNode
-}
-
-/**
- * Mounts the default phone-auth login modal and exposes openAuthModal() to the
- * host (e.g. an "Acessar área do cliente" button). Render INSIDE <AuthProvider>
- * so the modal can sign the user in through the mounted adapter.
- */
-export function AuthModalProvider({ phoneAuth = true, config, children }: AuthModalProviderProps) {
-  const [open, setOpen] = useState(false)
-  const value: AuthModalContextValue = {
-    openAuthModal: () => setOpen(true),
-    closeAuthModal: () => setOpen(false),
-    isAuthModalOpen: open,
-  }
-  return (
-    <AuthModalContext.Provider value={value}>
-      {children}
-      {phoneAuth ? <PhoneAuthModal open={open} onClose={() => setOpen(false)} config={config} /> : null}
-    </AuthModalContext.Provider>
-  )
-}
-
-/** Access the auth modal controls. Returns a no-op opener if no provider is mounted. */
-export function useAuthModal(): AuthModalContextValue {
-  return (
-    useContext(AuthModalContext) ?? {
-      openAuthModal: () => {},
-      closeAuthModal: () => {},
-      isAuthModalOpen: false,
-    }
-  )
-}