create-ej-app 25.0.0 → 27.0.0

package/template/saas-starter/src/app/(auth)/login/page.tsx

@@ -0,0 +1,105 @@
+/**
+ * @fileoverview Login/Sign-in Page
+ *
+ * Authentication entry point supporting multiple sign-in methods:
+ * - Email with magic link (passwordless)
+ * - OAuth (Google, GitHub)
+ *
+ * **Behavior:**
+ * - Redirects to /admin for admin users
+ * - Redirects to /app for regular authenticated users
+ * - Shows login form for anonymous users
+ *
+ * @module app/(auth)/login/page
+ */
+
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { Logo } from '~/components/logo'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { Separator } from '~/components/ui/separator'
+import { getAuthSession } from '~/lib/auth'
+import { sanitizeCallbackUrl } from '~/lib/callback-url'
+import { EmailLoginForm } from './email-login-form'
+import { SocialLoginButtons } from './social-login-buttons'
+
+/**
+ * Login Page Component
+ *
+ * Renders authentication page with multiple login options.
+ * Checks session and redirects already-authenticated users.
+ *
+ * @returns {JSX.Element} Login form with email and OAuth options
+ */
+export default async function LoginPage({
+  searchParams
+}: {
+  searchParams?: Promise<Record<string, string | string[] | undefined>>
+}) {
+  const authSession = await getAuthSession()
+  const resolvedParams = (await searchParams) ?? {}
+  const callbackUrl = sanitizeCallbackUrl(resolvedParams.callbackUrl)
+
+  if (authSession?.isAdmin) {
+    return redirect(callbackUrl ?? '/admin')
+  } else if (authSession) {
+    return redirect(callbackUrl ?? '/app')
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <Link href="/" className="mx-auto mb-4 inline-flex">
+            <Logo size={40} priority className="text-xl" />
+          </Link>
+          <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
+          <CardDescription className="text-muted-foreground text-sm">
+            Sign in to your account to continue
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="border-muted-foreground/50 bg-muted/50 rounded-lg border border-dashed p-4">
+            <p className="text-muted-foreground text-sm">
+              <strong>New to our site?</strong> No need to create a separate
+              account. Use either option below to sign up and log in.
+            </p>
+          </div>
+
+          <EmailLoginForm callbackUrl={callbackUrl} />
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background text-muted-foreground px-2">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          <SocialLoginButtons callbackUrl={callbackUrl} />
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-4">
+          <Separator className="my-2" />
+          <div className="text-muted-foreground text-center text-sm">
+            <Link
+              href="/"
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              Return to Home Page
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/login/social-login-buttons.tsx

@@ -0,0 +1,137 @@
+/**
+ * Social authentication button components
+ *
+ * Provides OAuth sign-in buttons for Google and GitHub.
+ */
+
+'use client'
+
+import { useState, useSyncExternalStore } from 'react'
+import { Button } from '~/components/ui/button'
+import { getLastUsedLoginMethod, signIn } from '~/lib/auth-client'
+import { toastActionError, toastErrorMessage } from '~/lib/toast-message'
+
+type OAuthProvider = 'google' | 'github'
+
+const PROVIDER_LABELS: Record<OAuthProvider, string> = {
+  google: 'Google',
+  github: 'GitHub'
+}
+
+const emptySubscribe = () => () => {}
+
+/**
+ * Social Login Buttons Component
+ *
+ * Renders OAuth provider buttons (Google, GitHub).
+ * Highlights the last-used login method if available.
+ *
+ * @returns {JSX.Element} Flex container with OAuth provider buttons
+ */
+export const SocialLoginButtons = ({
+  callbackUrl
+}: {
+  callbackUrl?: string | null
+}) => {
+  // Cookie/local storage is only available on the client; server snapshot is null.
+  const lastUsedLoginMethod = useSyncExternalStore(
+    emptySubscribe,
+    () => getLastUsedLoginMethod() ?? null,
+    () => null
+  )
+  const [pendingProvider, setPendingProvider] = useState<OAuthProvider | null>(
+    null
+  )
+
+  const target = callbackUrl || '/login'
+  const isPending = pendingProvider !== null
+
+  async function startOAuth(provider: OAuthProvider) {
+    if (pendingProvider) return
+
+    setPendingProvider(provider)
+    try {
+      const res = await signIn.social({
+        provider,
+        callbackURL: target
+      })
+      if (res?.error) throw res.error
+    } catch (err) {
+      console.error(`Error starting ${provider} sign-in:`, err)
+      if (
+        typeof err === 'object' &&
+        err &&
+        'message' in err &&
+        typeof err.message === 'string'
+      ) {
+        toastActionError(err)
+      } else {
+        toastErrorMessage(
+          `Sign-in with ${PROVIDER_LABELS[provider]} did not start. Try again.`
+        )
+      }
+      setPendingProvider(null)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Button
+        type="button"
+        variant="outline"
+        disabled={isPending}
+        onClick={() => startOAuth('google')}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden
+        >
+          <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+            <path
+              fill="#4285F4"
+              d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
+            />
+            <path
+              fill="#34A853"
+              d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
+            />
+            <path
+              fill="#EA4335"
+              d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
+            />
+          </g>
+        </svg>
+        {pendingProvider === 'google'
+          ? 'Continuing with Google…'
+          : `Continue with Google${lastUsedLoginMethod === 'google' ? ' (last used)' : ''}`}
+      </Button>
+
+      <Button
+        type="button"
+        variant="outline"
+        disabled={isPending}
+        onClick={() => startOAuth('github')}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden
+        >
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+        </svg>
+        {pendingProvider === 'github'
+          ? 'Continuing with GitHub…'
+          : `Continue with GitHub${lastUsedLoginMethod === 'github' ? ' (last used)' : ''}`}
+      </Button>
+    </div>
+  )
+}

package/template/saas-starter/src/app/(invitation)/accept-invitation/[id]/accept-invitation-form.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { Button } from '~/components/ui/button'
+import { organization, signOut } from '~/lib/auth-client'
+import {
+  toastActionError,
+  toastInfoMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
+
+export function AcceptInvitationForm({
+  invitationId,
+  organizationName
+}: {
+  invitationId: string
+  organizationName: string
+}) {
+  const router = useRouter()
+  const [accepting, setAccepting] = useState(false)
+  const [declining, setDeclining] = useState(false)
+
+  async function handleAccept() {
+    setAccepting(true)
+    const { error } = await organization.acceptInvitation({ invitationId })
+    if (error) {
+      toastActionError(error, 'The invitation was not accepted. Try again.')
+      setAccepting(false)
+      return
+    }
+    toastSuccessMessage(`You joined ${organizationName}`)
+    router.push('/app')
+  }
+
+  async function handleDecline() {
+    setDeclining(true)
+    const { error } = await organization.rejectInvitation({ invitationId })
+    if (error) {
+      toastActionError(error, 'The invitation was not declined. Try again.')
+      setDeclining(false)
+      return
+    }
+    toastInfoMessage('Invitation declined')
+    router.push('/')
+  }
+
+  const disabled = accepting || declining
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Button onClick={handleAccept} disabled={disabled} className="w-full">
+        {accepting ? 'Accepting…' : 'Accept Invitation'}
+      </Button>
+      <Button
+        onClick={handleDecline}
+        disabled={disabled}
+        variant="outline"
+        className="w-full"
+      >
+        {declining ? 'Declining…' : 'Decline'}
+      </Button>
+    </div>
+  )
+}
+
+export function WrongAccountActions({
+  invitationId
+}: {
+  invitationId: string
+}) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+
+  async function handleSwitch() {
+    setLoading(true)
+    await signOut()
+    router.push(
+      `/login?callbackUrl=${encodeURIComponent(`/accept-invitation/${invitationId}`)}`
+    )
+  }
+
+  return (
+    <div className="flex justify-center gap-3">
+      <Button asChild variant="outline">
+        <Link href="/">Go Home</Link>
+      </Button>
+      <Button onClick={handleSwitch} disabled={loading}>
+        {loading ? 'Signing out…' : 'Switch Account'}
+      </Button>
+    </div>
+  )
+}

package/template/saas-starter/src/app/(invitation)/accept-invitation/[id]/page.tsx

@@ -0,0 +1,153 @@
+import { Building2 } from 'lucide-react'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { Button } from '~/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { getAuthSession } from '~/lib/auth'
+import { roleArticle } from '~/lib/rbac'
+import { privatePageRobots } from '~/lib/seo'
+import { getInvitation } from '../../actions/invitations'
+import {
+  AcceptInvitationForm,
+  WrongAccountActions
+} from './accept-invitation-form'
+
+export const metadata: Metadata = {
+  title: 'Accept Invitation',
+  robots: privatePageRobots
+}
+
+export default async function AcceptInvitationPage({
+  params
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  const invitation = (await getInvitation(id))?.data
+
+  if (!invitation || invitation.status !== 'pending') {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-4 py-12">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader>
+            <CardTitle>Invitation Not Found</CardTitle>
+            <CardDescription>
+              This invitation link is invalid or was already used. Ask the
+              organization admin to send a new one.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="justify-center">
+            <Button asChild variant="outline">
+              <Link href="/">Go Home</Link>
+            </Button>
+          </CardFooter>
+        </Card>
+      </main>
+    )
+  }
+
+  if (invitation.expiresAt && invitation.expiresAt < new Date()) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-4 py-12">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader>
+            <CardTitle>Invitation Expired</CardTitle>
+            <CardDescription>
+              This invitation to <strong>{invitation.organization.name}</strong>{' '}
+              expired. Ask the organization admin to send a new one.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="justify-center">
+            <Button asChild variant="outline">
+              <Link href="/">Go Home</Link>
+            </Button>
+          </CardFooter>
+        </Card>
+      </main>
+    )
+  }
+
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-4 py-12">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+              <Building2 className="text-primary size-6" />
+            </div>
+            <CardTitle>You&apos;re Invited</CardTitle>
+            <CardDescription>
+              <strong>{invitation.inviter.name}</strong> invited you to join{' '}
+              <strong>{invitation.organization.name}</strong>. Sign in to
+              accept.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button asChild className="w-full">
+              <Link
+                href={`/login?callbackUrl=${encodeURIComponent(`/accept-invitation/${id}`)}`}
+              >
+                Sign In to Accept
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </main>
+    )
+  }
+
+  if (authSession.user.email.toLowerCase() !== invitation.email.toLowerCase()) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-4 py-12">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader>
+            <CardTitle>Wrong Account</CardTitle>
+            <CardDescription>
+              This invitation was sent to <strong>{invitation.email}</strong>{' '}
+              but you&apos;re signed in as{' '}
+              <strong>{authSession.user.email}</strong>. Switch accounts to
+              accept it.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="justify-center">
+            <WrongAccountActions invitationId={id} />
+          </CardFooter>
+        </Card>
+      </main>
+    )
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center px-4 py-12">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <Building2 className="text-primary size-6" />
+          </div>
+          <CardTitle>Join {invitation.organization.name}</CardTitle>
+          <CardDescription>
+            <strong>{invitation.inviter.name}</strong> invited you to join{' '}
+            <strong>{invitation.organization.name}</strong>
+            {invitation.role ? ` as ${roleArticle(invitation.role)}` : ''}.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AcceptInvitationForm
+            invitationId={id}
+            organizationName={invitation.organization.name}
+          />
+        </CardContent>
+      </Card>
+    </main>
+  )
+}

package/template/saas-starter/src/app/(invitation)/actions/invitations.ts

@@ -0,0 +1,32 @@
+'use server'
+
+import { eq } from 'drizzle-orm'
+import { db } from '~/db'
+import { invitationsTable } from '~/db/schema'
+import { actionClient, withWideEvent } from '~/lib/safe-action'
+import { stringValidation } from '~/lib/validations'
+
+/**
+ * Public view of an invitation for the accept page. Invitation IDs are
+ * unguessable, and accepting still requires signing in as the invited email.
+ */
+export const getInvitation = actionClient.inputSchema(stringValidation).action(
+  withWideEvent('getInvitation', async ({ parsedInput: invitationId }) => {
+    const invitation = await db.query.invitationsTable.findFirst({
+      where: eq(invitationsTable.id, invitationId),
+      columns: {
+        id: true,
+        status: true,
+        expiresAt: true,
+        email: true,
+        role: true
+      },
+      with: {
+        organization: { columns: { name: true } },
+        inviter: { columns: { name: true } }
+      }
+    })
+
+    return invitation ?? null
+  })
+)

package/template/saas-starter/src/app/(marketing)/contact-us/actions.ts

@@ -0,0 +1,23 @@
+'use server'
+
+import { db } from '~/db'
+import { contactLeadsTable } from '~/db/schema'
+import { actionClient, withWideEvent } from '~/lib/safe-action'
+import { contactFormSchema } from './validation'
+
+/** Public contact form. Submissions appear under Contact Leads in the admin panel. */
+export const submitContactForm = actionClient
+  .inputSchema(contactFormSchema)
+  .action(
+    withWideEvent('submitContactForm', async ({ parsedInput }) => {
+      await db.insert(contactLeadsTable).values({
+        name: parsedInput.name,
+        email: parsedInput.email,
+        phone: parsedInput.phone || null,
+        subject: parsedInput.subject,
+        message: parsedInput.message
+      })
+
+      return true
+    })
+  )

package/template/saas-starter/src/app/(marketing)/contact-us/contact-form.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2, Send } from 'lucide-react'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import { Field, FieldError, FieldLabel } from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { Textarea } from '~/components/ui/textarea'
+import { useSafeActionMutation } from '~/lib/safe-action-client'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import { submitContactForm } from './actions'
+import { contactFormSchema } from './validation'
+
+type ContactFormValues = z.infer<typeof contactFormSchema>
+
+const FIELDS = [
+  { name: 'name', label: 'Full name', autoComplete: 'name', type: 'text' },
+  {
+    name: 'email',
+    label: 'Email address',
+    autoComplete: 'email',
+    type: 'email'
+  },
+  {
+    name: 'phone',
+    label: 'Phone number (optional)',
+    autoComplete: 'tel',
+    type: 'tel'
+  },
+  { name: 'subject', label: 'Subject', autoComplete: 'off', type: 'text' }
+] as const
+
+export function ContactForm() {
+  const form = useForm<ContactFormValues>({
+    resolver: zodResolver(contactFormSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      phone: '',
+      subject: '',
+      message: ''
+    }
+  })
+
+  const { mutate, isPending } = useSafeActionMutation(submitContactForm, {
+    onSuccess: () => {
+      toastSuccessMessage("We received your message. We'll reply by email.")
+      form.reset()
+    },
+    onError: error =>
+      toastActionError(
+        error,
+        "Your message wasn't sent. Check your connection and try again."
+      )
+  })
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(values => mutate(values))}
+      className="mt-8 space-y-5"
+      aria-busy={isPending}
+    >
+      {FIELDS.map(item => (
+        <Controller
+          key={item.name}
+          control={form.control}
+          name={item.name}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel htmlFor={field.name}>{item.label}</FieldLabel>
+              <Input
+                id={field.name}
+                type={item.type}
+                autoComplete={item.autoComplete}
+                aria-invalid={fieldState.invalid}
+                {...field}
+              />
+              <FieldError
+                errors={fieldState.error ? [fieldState.error] : undefined}
+              />
+            </Field>
+          )}
+        />
+      ))}
+
+      <Controller
+        control={form.control}
+        name="message"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Message</FieldLabel>
+            <Textarea
+              id={field.name}
+              className="min-h-32"
+              placeholder="How can we help…"
+              aria-invalid={fieldState.invalid}
+              {...field}
+            />
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
+
+      <Button type="submit" className="w-full" disabled={isPending}>
+        {isPending ? (
+          <Loader2 className="animate-spin" aria-hidden="true" />
+        ) : (
+          <Send aria-hidden="true" />
+        )}
+        {isPending ? 'Sending…' : 'Send Message'}
+      </Button>
+    </form>
+  )
+}

package/template/saas-starter/src/app/(marketing)/contact-us/page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import { siteConfig } from '~/lib/siteConfig'
+import { ContactForm } from './contact-form'
+
+export const metadata: Metadata = {
+  title: 'Contact Us',
+  description: `Send the ${siteConfig.name} team a message.`
+}
+
+export default function ContactUsPage() {
+  return (
+    <div className="container max-w-xl py-12">
+      <h1 className="text-3xl font-bold tracking-tight">Contact Us</h1>
+      <p className="text-muted-foreground mt-2">
+        Send us a message and we&apos;ll reply by email within one business day.
+      </p>
+      <ContactForm />
+    </div>
+  )
+}