Firebase login page for Next.js

The pull-cord lamp login wired to Firebase Authentication: email and password, a shake on a wrong password, and a redirect when it works.

Get the code · $3React · Tailwind · TypeScript
Pull-Cord Login, preview

Use it in Next.js

app/login/page.tsx

"use client";
import { useRouter } from "next/navigation";
import { signInWithEmailAndPassword } from "firebase/auth";
import PullCordLogin from "@/components/PullCordLogin";
import { auth } from "@/lib/firebase";

export default function LoginPage() {
  const router = useRouter();

  return (
    <main className="grid min-h-dvh place-items-center overflow-hidden bg-[#07080c]">
      <PullCordLogin
        defaultOn
        subtitle="Sign in to your account"
        forgotHref="/reset-password"
        onFooterAction={() => router.push("/signup")}
        onSubmit={async (email, password) => {
          // A rejected promise makes the card shake; a resolved one shows the success label.
          await signInWithEmailAndPassword(auth, email, password);
          setTimeout(() => router.push("/dashboard"), 900);
        }}
      />
    </main>
  );
}

lib/firebase.ts

import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Reuse the app on hot reload instead of initializing it twice.
export const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
export const auth = getAuth(app);

Good to know

  • onSubmit waits for your promise. signInWithEmailAndPassword throws on a wrong password, so the card shakes and the button resets. The piece doesn't print the error text, so add your own line under it if you want to show Firebase's message.
  • defaultOn shows the card straight away. Leave it off if you want visitors to pull the cord first, but then a returning user has to find the cord to sign in.
  • The room is drawn at 1000 x 660. On small screens, scale it with the className or style props.
  • This signs the user in on the client. To protect server routes, check the session server-side as Firebase's docs describe; that part isn't in the piece.

Install

  1. Copy from the zipPut react/src/components into src/, then npm i framer-motion firebase.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

onSubmit
(email, password) → promise; reject to shake
defaultOn
start with the light on
onFooterAction
the Create one link
forgotHref
your reset-password page
accent
bead and button colour

How qodesign compares

All comparisons, with prices read on each library's own site.

Questions

Does it work with Google sign-in too?

The piece is an email and password form. Put a Google button next to it and call signInWithPopup yourself.

Why a timeout before the redirect?

It lets the success label show for a moment. Drop it if you'd rather redirect at once.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.