@slindgr7/auth-component

Reusable React authentication components built with React + TypeScript.

Includes AuthProvider, useAuth, LoginForm and RegisterForm.
Works out of the box with a default mock API and can be connected to a real backend by passing a custom api implementation.

Features

• LoginForm
• RegisterForm
• Global auth state via AuthProvider + useAuth
• E-mail verification support (isVerified)
• Pluggable API (AuthApi) — use mock or connect your backend
• Type-safe exports

Installation

Local (Monorepo with npm workspaces)

Add the dependency in your package.json:

"@slindgr7/auth-component": "workspace:*"

and run:

npm install

From npm (future release)

When published:

npm install @slindgr7/auth-component

Quick Start

Wrap your application with AuthProvider:

import { AuthProvider, LoginForm } from "@slindgr7/auth-component";

function App() {
  return (
    <AuthProvider>
      <LoginForm />
    </AuthProvider>
  );
}

export default App;

Using the useAuth Hook

import { useAuth } from "@slindgr7/auth-component";

const Dashboard = () => {
  const { user, isAuthenticated, logout } = useAuth();

  if (!isAuthenticated) return <p>Not logged in</p>;

  return (
    <div>
      <p>Logged in as {user?.email}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

E-mail Verification

This package supports e-mail verification flows. If your backend returns a user object with an isVerified property, the package will expose this via the useAuth hook and context.

• If a user is not verified (isVerified: false), you can show a message or block access in your UI.
• Example:

  const { user, isAuthenticated, isVerified } = useAuth();
  if (user && !isVerified) {
    return <div>You must verify your e-mail before you can log in.</div>;
  }

You can also add a button to resend the verification e-mail if your backend supports it.

Connecting a Custom Backend

The package includes a built-in mockApi by default, so it works without a backend.

To connect your own backend, pass a custom AuthApi implementation to AuthProvider.

Example:

import { AuthProvider, type AuthApi } from "@slindgr7/auth-component";

const realApi: AuthApi = {
  async login(email, password) {
    const res = await fetch("/api/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });

    const data = await res.json();
    if (!res.ok) throw new Error(data.message);

    return data.user; // Should include isVerified if your backend supports e-mail verification
  },

  async register(email, password) {
    const res = await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });

    const data = await res.json();
    if (!res.ok) throw new Error(data.message);

    return data.user;
  },

  async logout() {
    await fetch("/api/logout", { method: "POST" });
  },
};

<AuthProvider api={realApi}>
  <App />
</AuthProvider>;

Public API

This package exports:

• AuthProvider
• useAuth
• LoginForm
• RegisterForm
• AuthApi
• User

Types

You can import the shared types:

import type { AuthApi, User } from "@slindgr7/auth-component";
// User: { email: string; isVerified: boolean }

Notes

• This package is frontend-only.
• Backend logic (JWT, database, password hashing, and e-mail verification) should be implemented in the consuming application.
• The AuthApi interface allows you to connect any backend implementation.
• E-mail verification is supported if your backend returns isVerified on the user object.

License

MIT

Copyright (c) 2026 Sally & Mikaela