LiteLoginPage

Preview

Sign in

Enter your credentials to continue

Email

Password

Powered by next-lite-auth

↑ Interactive preview — try submitting with wrong credentials

The built-in login UI rendered automatically by LiteAuthProvider when a user visits a protected route without being authenticated. You do not need to use this component directly.

Automatic rendering

LiteAuthProvider renders LiteLoginPage automatically — no setup required:

<LiteAuthProvider protect={["/dashboard"]}>
  {children}
</LiteAuthProvider>

When /dashboard is visited without a session, the login UI appears. After a successful login, the original page renders immediately.

Manual use

If you need to render the login UI manually (e.g. in a modal or custom layout):

import { LiteLoginPage } from "next-lite-auth/client";

<LiteLoginPage
  title="Welcome back"
  description="Sign in to your account"
/>

Props

Prop	Type	Default	Description
title	string	"Sign in"	Card heading
description	string	"Enter your credentials to continue"	Card subheading

Tailwind requirement

Uses shadcn/ui Tailwind CSS variables. Add the library to your Tailwind content config:

// tailwind.config.ts
content: [
  "./app/**/*.{ts,tsx}",
  "./node_modules/next-lite-auth/dist/**/*.{js,mjs}",
]