Auth & Session — frontend implementation

[adityapat24]

Goal

All auth pages and the user menu look and behave like a real product. Sign-in form, verification screen, error screen, and the header user menu are styled appropriately

Tasks

Sign-in page

• Build out src/app/auth/signin/page.tsx with the real SignInForm centered on the page, with the HackBeanpot logo above it.
  • What this accomplishes: When someone hits the sign-in page they see a branded entry point
• SignInForm: email input with proper validation, submit button, loading state while submitting, success message after submit ("Check your email for a sign-in link").
  • What this accomplishes: Users get clear feedback at every step — they know if their email is malformed before submitting, and they know the request actually went through.
• Error states: invalid email shows inline error, rate-limit shows toast, network failure shows toast.
  • What this accomplishes: Users aren't left guessing when something goes wrong.

Verify-request page

• Build out src/app/auth/verify-request/page.tsx: "Check your email" message, the email address they entered, a "didn't get it?" link back to sign-in.
  • What this accomplishes: Users land here after submitting the form and have a clear next step. No dead ends.

Error page

• Build out src/app/auth/error/page.tsx: reads the error code from the URL query param, displays a friendly message for each known NextAuth error (Verification, OAuthSignin, EmailSignin, etc.).
  • What this accomplishes: Instead of cryptic NextAuth error codes, users see "this sign-in link has expired" or similar. Includes a "back to sign-in" CTA.

Landing page

• Update src/app/(landing)/page.tsx: HackBeanpot branding, application portal description, "Sign in" CTA that goes to /auth/signin.
  • What this accomplishes: The first thing anyone sees when hitting the portal URL is a real landing page, not a placeholder.

User menu

• UserMenu: avatar circle with first letter of email, dropdown menu with email shown, "Sign out" item that calls signOut().
  • What this accomplishes: Once a user is signed in, they can see they're signed in and have a one-click way to sign out.
• Drop UserMenu into both the applicant and admin layouts (Tickets 2/3 own applicant layout, Ticket 5 owns admin layout — they'll already have header slots).
  • What this accomplishes: Every authed page has consistent identity affordance.

Styling

• All pages use shadcn primitives (Button, Input, Label, Card) and Tailwind for layout.
• Pages look reasonable on desktop

Definition of done

• Clicking through /, /auth/signin, /auth/verify-request, /auth/error?error=Verification all show polished UI with correct copy and styling.
• Form validation and error states work in all the cases listed.
• User menu renders in headers and the sign-out item triggers signOut() (which won't actually do anything until backend ships, but the click handler is real).

Use following as reference
apply.hackbeanpot.com