Authentification alignée sur le back-end (Étapes 7/8) : - src/api : schema auth (AccountRead, TokenResponse…), session.ts (jeton Bearer partagé + callback 401), méthodes auth du client HTTP (POST .../auth/login, .../auth/magic-link, .../auth/verify, GET /auth/me) et du mock (comptes coordination + référents + bénévoles, tokens magiques, sessions). - src/auth : AuthProvider/useAuth (jeton en localStorage, réhydratation via /auth/me, déconnexion sur 401), RequireAuth (garde + contrôle de rôle), HomeRedirect, table ROUTE_ROLES. - Pages : /connexion (lien magique, avec lien de démo affiché en mode mock), /connexion/coordination (email + mot de passe). - Router : toutes les routes métier passées derrière <RequireAuth> ; redirection vers l'accueil du rôle. - AppShell : onglets filtrés par rôle (01/02/03/06 coordination, 04 bénévole, 05 référent), email + rôle + bouton Déconnexion. - Mobile bénévole : cible le bénévole du compte connecté ; dégradation propre quand l'API refuse le détail des créneaux à un bénévole. - Mobile référent : cible le poste dont le compte est référent. - i18n : clés auth / rôles. - Vérifs : build tsc + vite, eslint (0 problème), npm run smoke (flux login / lien magique + rendu des 6 écrans par rôle et des pages publiques). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AwswqSChc3Rwtu61pRXiY2
185 lines
6.0 KiB
TypeScript
185 lines
6.0 KiB
TypeScript
// Vérifs headless : flux d'auth du mock + rendu de chaque écran.
|
|
// Lancement : npx tsx --tsconfig tsconfig.app.json scripts/smoke.tsx
|
|
import { createElement, type ReactNode } from 'react';
|
|
import { renderToString } from 'react-dom/server';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { MemoryRouter, RouterProvider, createMemoryRouter } from 'react-router-dom';
|
|
|
|
import {
|
|
ApiError,
|
|
DEMO_COORDINATOR_EMAIL,
|
|
DEMO_COORDINATOR_PASSWORD,
|
|
EDITION_ID,
|
|
api,
|
|
devMagicToken,
|
|
setAuthToken,
|
|
} from '@/api';
|
|
import type { AccountRead } from '@/api/schema';
|
|
import { queryKeys } from '@/api/hooks';
|
|
import { AuthContext, AuthProvider, type AuthContextValue } from '@/auth/auth-context';
|
|
import { routes } from '@/app/router';
|
|
import { ConfigPage } from '@/pages/ConfigPage';
|
|
import { GrillePage } from '@/pages/GrillePage';
|
|
import { MobileLeadPage } from '@/pages/MobileLeadPage';
|
|
import { MobileVolunteerPage } from '@/pages/MobileVolunteerPage';
|
|
import { PublicationPage } from '@/pages/PublicationPage';
|
|
import { VolunteerViewPage } from '@/pages/VolunteerViewPage';
|
|
|
|
const e = EDITION_ID;
|
|
let failures = 0;
|
|
const fail = (label: string, err: unknown) => {
|
|
failures += 1;
|
|
console.error(`FAIL ${label}`, err);
|
|
};
|
|
|
|
let coordinator: AccountRead | null = null;
|
|
let volunteerAccount: AccountRead | null = null;
|
|
let leadAccount: AccountRead | null = null;
|
|
let coordinatorToken = '';
|
|
|
|
async function checkAuth() {
|
|
let badRejected = 'non';
|
|
try {
|
|
await api.auth.login(e, { email: DEMO_COORDINATOR_EMAIL, password: 'faux' });
|
|
} catch (err) {
|
|
badRejected = err instanceof ApiError ? err.code : String(err);
|
|
}
|
|
|
|
const session = await api.auth.login(e, {
|
|
email: DEMO_COORDINATOR_EMAIL,
|
|
password: DEMO_COORDINATOR_PASSWORD,
|
|
});
|
|
coordinator = session.account;
|
|
coordinatorToken = session.access_token;
|
|
setAuthToken(coordinatorToken);
|
|
const me = await api.auth.me();
|
|
|
|
const vols = await api.volunteers.list(e);
|
|
const volEmail = vols.find((v) => v.email)?.email ?? '';
|
|
await api.auth.requestMagicLink(e, { email: volEmail });
|
|
const raw = devMagicToken(volEmail);
|
|
volunteerAccount = raw ? (await api.auth.verifyMagicLink(e, { token: raw })).account : null;
|
|
|
|
await api.auth.requestMagicLink(e, { email: 'referent1@lessonsdautomne.fr' });
|
|
const leadRaw = devMagicToken('referent1@lessonsdautomne.fr');
|
|
leadAccount = leadRaw ? (await api.auth.verifyMagicLink(e, { token: leadRaw })).account : null;
|
|
|
|
setAuthToken(coordinatorToken);
|
|
console.log(
|
|
JSON.stringify(
|
|
{
|
|
badPasswordRejectedWith: badRejected,
|
|
loginRole: session.account.role,
|
|
meRole: me.role,
|
|
magicVolunteerRole: volunteerAccount?.role,
|
|
magicVolunteerLinked: Boolean(volunteerAccount?.volunteer_id),
|
|
magicLeadRole: leadAccount?.role,
|
|
},
|
|
null,
|
|
2,
|
|
),
|
|
);
|
|
}
|
|
|
|
async function prefetchCore(client: QueryClient) {
|
|
await Promise.all([
|
|
client.prefetchQuery({ queryKey: queryKeys.volunteers, queryFn: () => api.volunteers.list(e) }),
|
|
client.prefetchQuery({ queryKey: queryKeys.positions, queryFn: () => api.positions.list(e) }),
|
|
client.prefetchQuery({ queryKey: queryKeys.shifts(), queryFn: () => api.shifts.list(e) }),
|
|
client.prefetchQuery({ queryKey: queryKeys.assignments(), queryFn: () => api.assignments.list(e) }),
|
|
client.prefetchQuery({ queryKey: queryKeys.matrix, queryFn: () => api.matrix.get(e) }),
|
|
]);
|
|
}
|
|
|
|
function authValue(account: AccountRead): AuthContextValue {
|
|
return {
|
|
status: 'authed',
|
|
account,
|
|
loginWithPassword: async () => account,
|
|
requestMagicLink: async () => {},
|
|
verifyMagicLink: async () => account,
|
|
logout: () => {},
|
|
};
|
|
}
|
|
|
|
async function renderProtected(
|
|
label: string,
|
|
account: AccountRead,
|
|
node: ReactNode,
|
|
extra?: (client: QueryClient) => Promise<void>,
|
|
) {
|
|
try {
|
|
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
await prefetchCore(client);
|
|
if (extra) await extra(client);
|
|
const html = renderToString(
|
|
createElement(
|
|
QueryClientProvider,
|
|
{ client },
|
|
createElement(
|
|
AuthContext.Provider,
|
|
{ value: authValue(account) },
|
|
createElement(MemoryRouter, null, node),
|
|
),
|
|
),
|
|
);
|
|
console.log(`ok ${label.padEnd(26)} ${html.length} octets`);
|
|
} catch (err) {
|
|
fail(label, err);
|
|
}
|
|
}
|
|
|
|
function renderPublic(path: string) {
|
|
try {
|
|
const client = new QueryClient();
|
|
const router = createMemoryRouter(routes, { initialEntries: [path] });
|
|
const html = renderToString(
|
|
createElement(
|
|
QueryClientProvider,
|
|
{ client },
|
|
createElement(AuthProvider, null, createElement(RouterProvider, { router })),
|
|
),
|
|
);
|
|
console.log(`ok ${path.padEnd(26)} ${html.length} octets`);
|
|
} catch (err) {
|
|
fail(path, err);
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------------------------------- //
|
|
await checkAuth().catch((err) => fail('checkAuth', err));
|
|
|
|
renderPublic('/connexion');
|
|
renderPublic('/connexion/coordination');
|
|
|
|
if (coordinator) {
|
|
setAuthToken(coordinatorToken);
|
|
await renderProtected('/grille', coordinator, createElement(GrillePage));
|
|
await renderProtected('/benevoles', coordinator, createElement(VolunteerViewPage));
|
|
await renderProtected('/publication', coordinator, createElement(PublicationPage));
|
|
await renderProtected('/configuration', coordinator, createElement(ConfigPage));
|
|
}
|
|
if (volunteerAccount) {
|
|
const vid = volunteerAccount.volunteer_id as string;
|
|
await renderProtected(
|
|
'/mobile-benevole',
|
|
volunteerAccount,
|
|
createElement(MobileVolunteerPage),
|
|
async (client) => {
|
|
await client.prefetchQuery({
|
|
queryKey: queryKeys.assignments({ volunteerId: vid }),
|
|
queryFn: () => api.assignments.list(e, { volunteerId: vid }),
|
|
});
|
|
await client.prefetchQuery({
|
|
queryKey: ['volunteer', e, vid],
|
|
queryFn: () => api.volunteers.get(e, vid),
|
|
});
|
|
},
|
|
);
|
|
}
|
|
if (leadAccount) {
|
|
await renderProtected('/mobile-referent', leadAccount, createElement(MobileLeadPage));
|
|
}
|
|
|
|
process.exit(failures ? 1 : 0);
|