auth-react

This library was generated with Nx.

React adapter for @brabander/auth-core, providing the generic building blocks for working with a session in a React app:

• storage — createLocalStorageSessionStore(), a SessionStore implementation backed by localStorage (key AUTH_SESSION_STORAGE_KEY).
• context — AuthProvider, which holds the current session and makes it available to the component tree. Its store prop is injectable (defaults to the localStorage adapter), so a different SessionStore — e.g. an in-memory one in tests — can be used without changing this package.
• hook — useAuth(), reading the session from context and exposing session, isAuthenticated, setSession, clearSession.

This package does not verify credentials or perform a login — setSession simply persists whatever AuthSession the caller passes in. Constructing that session (checking credentials, or anything else app-specific) is the responsibility of the consuming application.

Gebruik

1. AuthProvider opzetten

Plaats AuthProvider hoog in de boom (bv. in main.tsx). Zonder store-prop gebruikt hij standaard createLocalStorageSessionStore():

import { AuthProvider } from '@brabander/auth-react';

root.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
);

2. Sessie lezen met useAuth

import { useAuth } from '@brabander/auth-react';

function Example() {
  const { session, isAuthenticated } = useAuth();

  return isAuthenticated ? (
    <p>Ingelogd (token: {session?.token})</p>
  ) : (
    <p>Niet ingelogd</p>
  );
}

useAuth moet binnen een AuthProvider gebruikt worden — daarbuiten gooit hij een expliciete error.

3. Sessie zetten/wissen

setSession/clearSession zijn bewust geen login-flow: ze slaan simpelweg op/verwijderen wat je meegeeft. Het verifiëren van credentials en het samenstellen van de AuthSession is aan de app zelf:

const { setSession, clearSession } = useAuth();

// Na een eigen credential-check in de app:
setSession({ token: 'abc123', expiresAt: null });

// Uitloggen:
clearSession();

4. Eigen storage injecteren (bv. in tests)

import { AuthProvider } from '@brabander/auth-react';
import type { SessionStore } from '@brabander/auth-core';

const myStore: SessionStore = /* een eigen SessionStore-implementatie */;

render(
  <AuthProvider store={myStore}>
    <App />
  </AuthProvider>,
);

5. Handmatig een sessie zetten tijdens development

De localStorage-adapter slaat de sessie op onder AUTH_SESSION_STORAGE_KEY ('brabander:auth-session') als JSON. Zolang er nog geen echte login-flow is, kan je dit in devtools zetten om ingelogd gedrag te simuleren:

localStorage.setItem(
  'brabander:auth-session',
  JSON.stringify({ token: 'dev', expiresAt: null }),
);

Running unit tests

Run nx test auth-react to execute the unit tests via Vitest.