How do I connect it to my auth provider?

Call your provider in onSubmit: signIn("credentials", values) with Auth.js, supabase.auth.signInWithPassword(values) with Supabase, or your own server action. Wire the Google and GitHub buttons to your provider's OAuth sign-in.

Does it work with password managers?

Yes. The inputs use autocomplete="email" and autocomplete="current-password", so browsers and password managers fill them in.

Why does it only check that the password isn't empty?

On sign in you only need to know a password was entered; your auth backend checks if it's correct. Strength rules belong on the sign-up form.

Login Form

A free React login form template with Tailwind CSS, React Hook Form and Zod: email and password with validation, show/hide password, remember me, forgot password and Google/GitHub buttons.

ReactTailwind CSSReact Hook FormZodFree

Installation

Install the form libraries, then copy the code above into your project.

npm i react-hook-form zod @hookform/resolvers

About the Login Form

A clean sign-in card: email and password with validation, a show/hide password toggle, a remember me checkbox, a forgot password link, social sign-in buttons and a link to sign up.

When to use it

Use it for the sign-in page of a SaaS app, a dashboard or a members area, with any auth provider.

How to use the Login Form

1Install the dependencies: npm i react-hook-form zod @hookform/resolvers.
2Copy the code into components/login-form.tsx (or anywhere in your project).
3Render <LoginForm /> on any page.
4Replace the placeholder in onSubmit with your server action or API call.

Send submissions by email

In Next.js, a server action can email every submission with Resend. Call it from onSubmit: await submitForm(values).

// app/actions.ts
"use server";

import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function submitForm(values: Record<string, unknown>) {
  await resend.emails.send({
    from: "Website <hello@yourdomain.com>",
    to: "you@yourdomain.com",
    subject: "New form submission",
    text: JSON.stringify(values, null, 2),
  });
}

More form templates

All forms →

Multi-step Signup Form

A four-step signup wizard with a stepper, per-step validation and a review screen.

Contact Form

Name, email, topic and message with validation, consent and a success state.

Waitlist Form

Email signup with an optional role and a referral link on success.

Job Application Form

Role, experience, resume upload and cover letter with file validation.

Appointment Booking Form

Service cards, date and time slots, contact details and a confirmation.

Feedback & NPS Form

A 0–10 recommend score, reason, improvement topics and optional email.

Newsletter Signup Form

Email signup with topic checkboxes, frequency and double opt-in message.

Event Registration Form

Ticket types with prices, quantity, dietary needs and terms.

Support Ticket Form

Category, priority, description and an optional attachment.