Your own Amplify sign-in page in Next.js

Use it in Next.js

app/login/page.tsx

"use client";
// Before: <Authenticator>{({ signOut, user }) => <App />}</Authenticator>
import { useRef, useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { autoSignIn, confirmSignUp, resendSignUpCode, signIn, signInWithRedirect, signUp } from "aws-amplify/auth";
import GatewayDive from "@/components/gateway-dive/GatewayDive";

// Cognito error names worth a plain sentence; anything else gets the generic line
const messages: Record<string, string> = {
  NotAuthorizedException: "Wrong email or password.",
  UsernameExistsException: "That email already has an account. Sign in instead.",
  InvalidPasswordException: "That password doesn't meet the pool's rules.",
  CodeMismatchException: "That code doesn't match. Check the latest email.",
  ExpiredCodeException: "That code expired. We sent a new one.",
};
const say = (e: unknown) =>
  (e instanceof Error && messages[e.name]) || "That didn't work. Try again.";

export default function Login() {
  const router = useRouter();
  const pending = useRef<{ email: string; auto: boolean } | null>(null);
  const [confirm, setConfirm] = useState<{ email: string; auto: boolean } | null>(null);
  const [code, setCode] = useState("");
  const [note, setNote] = useState("");

  async function submitCode(e: FormEvent) {
    e.preventDefault();
    if (!confirm) return;
    try {
      const { nextStep } = await confirmSignUp({ username: confirm.email, confirmationCode: code.trim() });
      if (nextStep.signUpStep === "COMPLETE_AUTO_SIGN_IN") {
        await autoSignIn();
        router.push("/dashboard");
      } else {
        pending.current = null;
        setConfirm(null); // back to the card: confirmed, now sign in
      }
    } catch (err) {
      if (err instanceof Error && err.name === "ExpiredCodeException") await resendSignUpCode({ username: confirm.email });
      setNote(say(err));
    }
  }

  if (confirm) {
    return (
      <main className="grid min-h-dvh place-items-center bg-neutral-950 p-6 text-white">
        <form onSubmit={submitCode} className="w-full max-w-sm space-y-4">
          <h1 className="text-xl font-semibold">Check your email</h1>
          <p className="text-sm text-neutral-400">We sent a code to {confirm.email}.</p>
          <input
            value={code}
            onChange={(e) => setCode(e.target.value)}
            inputMode="numeric"
            autoComplete="one-time-code"
            aria-label="Confirmation code"
            className="w-full rounded-lg bg-neutral-900 px-3 py-2 tracking-widest"
          />
          {note ? <p role="alert" className="text-sm text-red-400">{note}</p> : null}
          <button className="w-full rounded-lg bg-white py-2 font-medium text-black">Confirm</button>
        </form>
      </main>
    );
  }

  return (
    <main style={{ height: "100dvh" }}>
      <GatewayDive
        autoplayDemo={false}
        brand="Acme"
        providers={[{ id: "google", label: "Google" }]} // the id "google" draws the Google logo
        onProvider={() => void signInWithRedirect({ provider: "Google" })}
        onSubmit={async ({ mode, name, email, password }) => {
          try {
            if (mode === "signup") {
              const { nextStep } = await signUp({
                username: email,
                password,
                options: { userAttributes: { email, name }, autoSignIn: true },
              });
              if (nextStep.signUpStep === "CONFIRM_SIGN_UP") pending.current = { email, auto: true };
              return { ok: true };
            }
            const { nextStep } = await signIn({ username: email, password });
            if (nextStep.signInStep === "DONE") return { ok: true };
            if (nextStep.signInStep === "CONFIRM_SIGN_UP") {
              await resendSignUpCode({ username: email });
              pending.current = { email, auto: false };
              return { ok: true };
            }
            // MFA codes, a forced new password and the rest need screens of their own
            return { ok: false, error: "This account needs a step this page doesn't handle yet." };
          } catch (e) {
            return { ok: false, error: say(e) };
          }
        }}
        onSuccess={() => {
          if (pending.current) setConfirm(pending.current); // show the code screen, skip the route
          else setTimeout(() => router.push("/dashboard"), 1400);
        }}
      />
    </main>
  );
}

"use client";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";

// ssr: true keeps the tokens in cookies, as the Amplify Next.js docs ask
Amplify.configure(outputs, { ssr: true });

export default function ConfigureAmplifyClientSide() {
  return null;
}