react-auth

Authentication UI and state for Khata front-ends: a JWT-backed AuthProvider context, a pluggable login/register AuthPage, profile screens, and an axios factory that attaches bearer tokens and reacts to 401 responses.

What this library gives you

• AuthProvider + useAuth - manages the current user, token, and loading/error state; persists the token in localStorage and re-fetches the current user whenever the token changes.
• createApiClient - creates an axios instance whose request interceptor adds Authorization: Bearer <token>, and whose response interceptor clears the token and dispatches a auth:unauthorized window event on 401.
• AuthPage - a ready-made login/register screen driven by the useAuth callbacks.
• ProfileCreate / ProfileEdit / ProfileView - presentational profile screens that delegate persistence to callbacks you supply.
• tokenStore - the raw localStorage accessor (get/set/clear).

Wiring

import { AuthProvider, useAuth, AuthPage } from "react-auth";

function LoginGate() {
  const auth = useAuth();
  if (!auth.currentUser) {
    return (
      <AuthPage
        mode="login"
        onBack={() => history.back()}
        onSwitchMode={() => setMode("register")}
        login={auth.login}
        register={auth.register}
        loading={auth.loading}
        error={auth.error}
        currentUser={auth.currentUser}
      />
    );
  }
  return <App />;
}

export default function Root() {
  return (
    <AuthProvider
      authConfig={{
        serverUrl: "https://api.example.com",
        loginPath: "/auth/login",
        registerPath: "/auth/register",
        logoutPath: "/auth/logout",
        mePath: "/auth/me",
        introspectPath: "/auth/introspect",
      }}
    >
      <LoginGate />
    </AuthProvider>
  );
}
Copy