Login & sign-up

Build email and password validation, a “submitting” state, and what the screen shows after you log in.

This code is made of 2 files. Put them all in the same folder and it works.

LoginTabs.tsx

auth.tsx

Shares the logged-in user (swap in NextAuth or similar in a real app)

How to use (Next.js)

Three steps to show this screen in your own project

1
Install the components and libraries in your terminal (once)
```
npx shadcn@latest add button input label tabs
```
```
npm i react-hook-form zod
```
```
npm i @hookform/resolvers
```
If your project doesn’t have shadcn/ui yet, run npx shadcn@latest init first

Paste the files here

my-app/
├─ components/
│   └─ login/
│       ├─ LoginTabs.tsx   ← copied from the window above
│       └─ auth.tsx   ← copied from the window above
└─ app/
    └─ login/
        └─ page.tsx   ← created in step 3

Create any folders that don’t exist. Put all the files in the same folder.

Import it in a page file

import LoginTabs from "@/components/login/LoginTabs"

export default function Page() {
  return <LoginTabs />
}

Write this in app/login/page.tsx. Run npm run dev and open /login to see it

Key points

1
Keep validation rules in one place
Write “valid email format” and “at least 8 characters” together in Zod, and set the error messages there too. Sign-up is just the login rules plus a “name” field.
2
Disable the button while submitting
This prevents double submissions. Change the button text to “Logging in…” as well, so people know to wait.
3
Share the logged-in user with the whole app
Put it in Context, and both the name in the header and the “Welcome” message in the content can use it.

Tools used

UI components

shadcn/ui →

Forms and validation

React Hook Form ＋ Zod →

Logged-in user info

Context →

Click to see the comparison in Part 2