@alzore16/ls-aurora — Aurora Light

Aurora Light authentication theme (Login + Signup) for React — a card with a photo panel, config-driven fields, social login buttons and smooth animated transitions. Every color, font, spacing token, string, image and social provider lives in a single theme config object. No authentication provider is bundled or hard-coded.

Built with React 18/19 + Framer Motion (peer dependencies).

Installation

npm

npm install @alzore16/ls-aurora

pnpm

pnpm add @alzore16/ls-aurora

yarn

yarn add @alzore16/ls-aurora

bun

bun add @alzore16/ls-aurora

React, React DOM and Framer Motion are peer dependencies — your project must already have them installed.

Basic usage

import { useState } from "react";
import { AuthCard, themeConfig } from "@alzore16/ls-aurora";
import "@alzore16/ls-aurora/style.css";

function App() {
  const [mode, setMode] = useState("login");

  return (
    <AuthCard
      config={themeConfig}
      mode={mode}
      onModeChange={setMode}
      onSubmit={async (values, mode) => {
        // Your auth call goes here — see "Backend integration".
        const res = await fetch("/api/auth/" + mode, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(values),
        });
        if (!res.ok) throw new Error("Authentication failed");
        return res.json(); // { user, session }
      }}
      onAuthSuccess={(result, mode) => console.log("authenticated", mode, result)}
    />
  );
}

export default App;

CSS: import @alzore16/ls-aurora/style.css once in your app. It ships inside the package — nothing to copy from this repository.

Public API

Everything is exported from the package root — never import internal paths like @alzore16/ls-aurora/src/... or @alzore16/ls-aurora/dist/....

| Export | Description | | ----------------- | ------------------------------------------------------------------- | | AuthCard | The top-level auth card (photo panel + form, login/signup modes). | | AuthForm | The form (fields, validation, submit, social buttons). | | PhotoPanel | The left photo panel + logo chip. | | resolvePhoto | Photo resolution helper (images.photo → entry for a view). | | SocialButtons | Config-driven social login buttons. | | themeConfig / theme | The default theme configuration object. | | authBackend | The default backend adapter object (see below). |

Props

AuthCard

| Prop | Type | Description | | -------------------- | ----------------------------------- | ------------------------------------------------------------------ | | config | ThemeConfig | Theme config. Defaults to the exported themeConfig. | | initialMode | "login" \| "signup" | Initial mode when mode is uncontrolled. Default "login". | | mode | "login" \| "signup" | Controlled mode. Omit to let the card manage its own state. | | onModeChange | (mode) => void | Called when the user switches login ↔ signup. | | onSubmit | (values, mode) => unknown | Overrides the adapter for login/signup — your backend hook. | | onSocialLogin | (providerId, mode) => unknown | Overrides the adapter for social provider clicks. | | onForgotPassword | () => unknown | Overrides the adapter for "Forgot password?". | | onAuthSuccess | (result, mode) => void | Called with the backend result after a successful auth action. | | onBack | (view) => void | Replaces the default back-arrow behavior. |

Backend integration

The package contains no backend provider (no Supabase, Firebase, Auth0, Clerk, NextAuth, or custom API). The UI routes every action through a developer-controlled contract. Connect your own backend in two ways:

1. Props (recommended)

Pass onSubmit, onSocialLogin and onForgotPassword to AuthCard. They replace the default adapter entirely. Any thrown error or resolved { error: "message" } is displayed inside the card.

2. The authBackend adapter object

The exported authBackend follows a documented contract:

interface AuthBackend {
  signup(data: SignupData): Promise<AuthResult>;
  login(data: LoginData): Promise<AuthResult>;
  logout(): Promise<void>;
  forgotPassword(email: string): Promise<AuthResult>;
  socialLogin(provider: string): Promise<AuthResult>;
}

• Resolve with { user, session } (or {}) for success.
• Resolve with { error: "user-friendly message" } or throw an Error to surface a failure in the UI.
• The demo stub in the package resolves with a fake success — replace it by providing the props above, or copy the adapter into your own module and implement each method against your API.

Security: never put backend credentials or service-role keys in the browser. Call your own API endpoints.

Customization

Everything comes from the theme config. Pass a full config object (based on the exported themeConfig) or build your own:

<AuthCard
  config={{
    ...themeConfig,
    colors: { ...themeConfig.colors, buttonBackground: "#3B82F6" },
    copy: { ...themeConfig.copy, login: { ...themeConfig.copy.login, heading: "Welcome back to Acme" } },
    socialProviders: [{ id: "google", label: "Continue with Google", icon: "google" }],
  }}
/>

The config shape (ThemeConfig) is exported as a type: meta, images, colors, typography, layout, copy, links, fields, socialProviders, toggles, validation. Photos are remote URLs by default (Unsplash) — point them at your own assets.

Supported React usage

• Vite / Create React App / Webpack / Rspack — any bundler that understands npm packages with exports.
• Next.js App Router — client components ("use client").
• Remix / Astro / Gatsby — client-rendered auth pages.
• Works with TypeScript: component props, theme config and backend adapter types are all exported (autocomplete + type checking out of the box).

Styling notes

• Import @alzore16/ls-aurora/style.css exactly once in your app.
• The theme is designed as a full-viewport auth card (min-height 100vh). Its CSS resets body margins and sets overflow-x: hidden on html, body — if you embed it inside an existing page, scope it to a dedicated auth route.
• No fonts are bundled: the theme uses the Inter stack with system fallbacks. Load Inter yourself (e.g. Google Fonts) for the intended typography.
• Responsive: desktop side-by-side card, tablet and mobile stack the photo panel above the form — unchanged from the original theme.

TypeScript

The package ships with full type declarations (dist/index.d.ts), including:

• AuthCardProps, AuthFormProps, PhotoPanelProps, SocialButtonsProps
• ThemeConfig and all sub-config types
• AuthUser, AuthResult, SignupData, LoginData, AuthBackend

import { AuthCard, type AuthCardProps } from "@alzore16/ls-aurora";

const props: AuthCardProps = {
  initialMode: "login",
  onSubmit: async (values, mode) => {
    /* ... */
  },
};

License

MIT