CORE-THEME

CORE-THEME 1

Auth handling for pages (built in)

When a page from this library (e.g. AdminPage, JobsListPage, …) is opened without a logged-in session, the data APIs reject with a 401 and the page would otherwise render empty ("no module") with no explanation.

This is handled inside the package — every exported page is already wrapped with an auth guard. A host app does nothing: just route to the page, and if it's opened without a session the user sees a clear "You haven't logged into this session. Please login to access the data." screen with a Login button.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AdminPage } from '@realtek/core-theme';
import '@realtek/core-theme/style.css';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* opened without login → shows the "not logged in" screen automatically */}
        <Route path="/admin" element={<AdminPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Guarding your own pages (optional)

The same guard is exported for any custom page the host app builds:

import { AuthGuard, withAuthGuard } from '@realtek/core-theme';

// wrap inline…
<AuthGuard><MyPage /></AuthGuard>

// …or bake it into your own component, like the library does:
const MyGuardedPage = withAuthGuard(MyPage);

Customizing the screen (AuthGuard / withAuthGuard props, all optional)

| Prop | Default | Purpose | | ------------ | ------------------------------------------------------------------- | -------------------------------------------------- | | title | "You're not logged in" | Heading on the error screen. | | message | "You haven't logged into this session. Please login to access the data." | Sub-text. | | loginPath | "/login" | Where the Login button sends the user. | | loginLabel | "Go to Login" | Login button text. | | onLogin | — | Custom handler for the Login button (overrides loginPath). | | fallback | — | Render your own screen instead of the default one. |

The guard re-checks the session live on login, logout, tab focus and cross-tab storage changes, so it reveals/hides content without a reload.