@flaredev/cli 0.1.2 → 0.2.0

package/templates/app/app/sign-in/page.tsx

@@ -1,33 +1,49 @@
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { AuthForm } from "@/components/auth-form";
-import { enabledSocialProviders } from "@/lib/auth";
-import { getSession, safeRedirectPath } from "@/lib/session";
-
-export default async function SignInPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ next?: string; error?: string }>;
-}) {
-  const params = await searchParams;
-  const next = safeRedirectPath(params.next);
-  if (await getSession()) redirect(next);
-
-  return (
-    <main className="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 p-6">
-      <h1 className="text-2xl font-semibold">Sign in</h1>
-      <AuthForm
-        mode="sign-in"
-        next={next}
-        socialProviders={enabledSocialProviders()}
-        initialError={params.error ? "Sign-in with that provider failed. Please try again." : null}
-      />
-      <p className="text-sm text-[var(--foreground-muted)]">
-        No account?{" "}
-        <Link href={`/sign-up?next=${encodeURIComponent(next)}`} className="font-medium text-[var(--foreground)] underline">
-          Create one
-        </Link>
-      </p>
-    </main>
-  );
-}
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { SignInFlow } from "@/components/auth/sign-in-flow";
+import { enabledSocialProviders } from "@/lib/auth";
+import { authConfig } from "@/lib/auth-config";
+import { getSession, safeRedirectPath } from "@/lib/session";
+import { site } from "@/lib/site";
+import { theme } from "@/lib/theme";
+
+export const metadata = { title: "Sign in" };
+
+const ERRORS: Record<string, string> = {
+  oauth: "Sign-in with that provider didn't finish. Try again.",
+  link: "That sign-in link has expired or was already used. Ask for a new one.",
+};
+
+export default async function SignInPage({ searchParams }: { searchParams: Promise<{ next?: string; error?: string; reset?: string }> }) {
+  const params = await searchParams;
+  const next = safeRedirectPath(params.next);
+  if (await getSession()) redirect(next);
+
+  const copy = theme.signIn(site.name);
+  return (
+    <AuthShell
+      page="sign-in"
+      title={copy.title}
+      subtitle={(copy as { subtitle?: string }).subtitle}
+      footer={
+        <>
+          Don&apos;t have an account?{" "}
+          <Link href={`/sign-up?next=${encodeURIComponent(next)}`} className="font-medium text-link hover:underline">
+            Sign up
+          </Link>
+        </>
+      }
+    >
+      <SignInFlow
+        providers={enabledSocialProviders()}
+        socialPlacement={theme.social}
+        socialStyle={theme.socialStyle}
+        methods={{ magicLink: authConfig.magicLink, emailOtp: authConfig.emailOtp, passkeys: authConfig.passkeys }}
+        next={next}
+        initialError={params.error ? (ERRORS[params.error] ?? "Sign-in didn't finish. Try again.") : null}
+        initialNotice={params.reset ? "Your password is changed. Sign in with the new one." : null}
+      />
+    </AuthShell>
+  );
+}

package/templates/app/app/sign-up/page.tsx

@@ -1,23 +1,42 @@
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { AuthForm } from "@/components/auth-form";
-import { enabledSocialProviders } from "@/lib/auth";
-import { getSession, safeRedirectPath } from "@/lib/session";
-
-export default async function SignUpPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
-  const next = safeRedirectPath((await searchParams).next);
-  if (await getSession()) redirect(next);
-
-  return (
-    <main className="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 p-6">
-      <h1 className="text-2xl font-semibold">Create an account</h1>
-      <AuthForm mode="sign-up" next={next} socialProviders={enabledSocialProviders()} />
-      <p className="text-sm text-[var(--foreground-muted)]">
-        Already registered?{" "}
-        <Link href={`/sign-in?next=${encodeURIComponent(next)}`} className="font-medium text-[var(--foreground)] underline">
-          Sign in
-        </Link>
-      </p>
-    </main>
-  );
-}
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { SignUpForm } from "@/components/auth/sign-up-form";
+import { enabledSocialProviders } from "@/lib/auth";
+import { authConfig } from "@/lib/auth-config";
+import { getSession, safeRedirectPath } from "@/lib/session";
+import { site } from "@/lib/site";
+import { theme } from "@/lib/theme";
+
+export const metadata = { title: "Create an account" };
+
+export default async function SignUpPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
+  const params = await searchParams;
+  const next = safeRedirectPath(params.next);
+  if (await getSession()) redirect(next);
+
+  const copy = theme.signUp(site.name);
+  return (
+    <AuthShell
+      page="sign-up"
+      title={copy.title}
+      subtitle={(copy as { subtitle?: string }).subtitle}
+      footer={
+        <>
+          Already have an account?{" "}
+          <Link href={`/sign-in?next=${encodeURIComponent(next)}`} className="font-medium text-link hover:underline">
+            Sign in
+          </Link>
+        </>
+      }
+    >
+      <SignUpForm
+        providers={enabledSocialProviders()}
+        socialPlacement={theme.social}
+        socialStyle={theme.socialStyle}
+        next={next}
+        verifyFirst={authConfig.requireEmailVerification}
+      />
+    </AuthShell>
+  );
+}

package/templates/app/app/two-factor/page.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { TwoFactorForm } from "@/components/auth/two-factor-form";
+import { authConfig } from "@/lib/auth-config";
+import { safeRedirectPath } from "@/lib/session";
+
+export const metadata = { title: "Verify it's you" };
+
+/** Reached after a correct password on an account with two-factor on (lib/auth-client.ts sends people here). */
+export default async function TwoFactorPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
+  const { next } = await searchParams;
+  return (
+    <AuthShell
+      title="Verify it's you"
+      subtitle="Your account uses two-factor authentication."
+      footer={
+        <Link href="/sign-in" className="font-medium text-link hover:underline">
+          Use a different account
+        </Link>
+      }
+    >
+      <TwoFactorForm methods={authConfig.twoFactor} next={safeRedirectPath(next)} />
+    </AuthShell>
+  );
+}