@fayz-ai/plugin-auth 0.8.0 → 0.9.0-next.1

package/src/pages.tsx

@@ -1,8 +1,10 @@
 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'
+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
@@ -11,6 +13,11 @@ export interface LoginPageProps {
   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
@@ -24,12 +31,18 @@ export function LoginPage({
   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 =
@@ -45,11 +58,18 @@ export function LoginPage({
         onForgotPassword={() => setView('recovery')}
         showOAuth={showOAuth}
         oauthProviders={oauthProviders}
+        initialEmail={email}
+        onEmailChange={setEmail}
       />
     ) : view === 'signup' ? (
       <SignupForm onSuccess={onSuccess} />
     ) : (
-      <ForgotPasswordForm redirectTo={resetPasswordUrl} onBackToLogin={() => setView('login')} />
+      <ForgotPasswordForm
+        redirectTo={resetPasswordUrl}
+        onBackToLogin={() => setView('login')}
+        initialEmail={email}
+        onEmailChange={setEmail}
+      />
     )
   const switcher =
     view === 'login' ? (
@@ -90,8 +110,9 @@ export function LoginPage({
     <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="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>}
@@ -181,16 +202,8 @@ 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 (
-    <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>
-  )
+  return <SetPasswordPage reason="recovery" onSuccess={onSuccess} />
 }

package/src/runtime.ts

@@ -24,8 +24,12 @@ export function resolveAuthAdapter(options: AuthPluginOptions = {}): AuthAdapter
       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 ?? absoluteUrl(options.routes?.resetPassword ?? '/auth/reset-password'),
+        options.supabase?.resetPasswordUrl ??
+        (options.routes?.resetPassword ? absoluteUrl(options.routes.resetPassword) : undefined),
     })
   }
 
@@ -41,6 +45,8 @@ export function createAuthRuntime(options: AuthPluginOptions = {}): ResolvedAuth
     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'],
@@ -48,7 +54,9 @@ export function createAuthRuntime(options: AuthPluginOptions = {}): ResolvedAuth
     routes: {
       login: options.routes?.login ?? '/login',
       callback: options.routes?.callback ?? '/auth/callback',
-      resetPassword: options.routes?.resetPassword ?? '/auth/reset-password',
+      // 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 ?? '/',
     },
   }

package/src/set-password.tsx

@@ -0,0 +1,229 @@
+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

@@ -5,6 +5,14 @@ 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
@@ -34,6 +42,8 @@ export interface AuthPluginOptions {
   logo?: React.ReactNode
   tagline?: string
   description?: string
+  loginAmbassadors?: LoginAmbassador[]
+  loginAmbassadorsLabel?: string
   oauth?: AuthOAuthConfig
   routes?: AuthRoutesConfig
 }
@@ -46,6 +56,8 @@ export interface ResolvedAuthPlugin {
   logo?: React.ReactNode
   tagline?: string
   description?: string
+  loginAmbassadors?: LoginAmbassador[]
+  loginAmbassadorsLabel?: string
   oauth: Required<AuthOAuthConfig>
   routes: Required<AuthRoutesConfig>
 }