Appeler une API REST depuis l'application : fetch, jetons et erreurs

# .env (développement, à ne pas confondre avec l'adresse de production)
EXPO_PUBLIC_API_URL=http://192.168.1.20:3000/v1

// src/lib/config.ts
// Adresse de l'API : jamais de secret ici, tout ce qui commence par EXPO_PUBLIC_ finit dans l'application.
export const URL_API = process.env.EXPO_PUBLIC_API_URL ?? 'http://192.168.1.20:3000/v1';

// Client de l'API d'AppliFrais. Aucun import de React Native ici : le même fichier
// tourne dans l'application, dans les tests Jest et dans un script Node.

export type Etat = 'CR' | 'CL' | 'VA' | 'MP';
export type ResumeFiche = { id: number; mois: string; etat: Etat; montantValide: number | null };
export type FraisHorsForfait = { id: number; date: string; libelle: string; montant: number; justificatif: boolean };
export type Fiche = ResumeFiche & { fraisHorsForfait: FraisHorsForfait[] };
export type NouveauFrais = { date: string; libelle: string; montant: number };

// Où ranger les jetons : SecureStore dans l'application, un objet en mémoire dans les tests.
export interface CoffreJetons {
  lireRafraichissement(): Promise<string | null>;
  ecrireRafraichissement(jeton: string): Promise<void>;
  effacer(): Promise<void>;
}

export class ErreurApi extends Error {
  status: number;
  type: string;
  erreurs: { champ: string; message: string }[];
  constructor(status: number, corps: any) {
    super(corps?.detail ?? corps?.title ?? `Erreur HTTP ${status}`);
    this.name = 'ErreurApi';
    this.status = status;
    this.type = corps?.type ?? 'about:blank';
    this.erreurs = corps?.erreurs ?? [];
  }
}

export class ErreurReseau extends Error {
  constructor(message: string) {
    super(message);
    this.name = 'ErreurReseau';
  }
}

type Options = { urlBase: string; coffre: CoffreJetons; delaiMs?: number; surDeconnexion?: () => void };

export function creerApi({ urlBase, coffre, delaiMs = 10000, surDeconnexion }: Options) {
  let jetonAcces: string | null = null; // en mémoire seulement
  let rafraichissementEnCours: Promise<boolean> | null = null;

  async function envoyer(chemin: string, init: RequestInit = {}): Promise<Response> {
    const controleur = new AbortController();
    const minuterie = setTimeout(() => controleur.abort(), delaiMs);
    const entetes = new Headers(init.headers);
    entetes.set('Accept', 'application/json');
    if (jetonAcces) entetes.set('Authorization', `Bearer ${jetonAcces}`);
    try {
      return await fetch(`${urlBase}${chemin}`, { ...init, headers: entetes, signal: controleur.signal });
    } catch {
      throw new ErreurReseau('Serveur injoignable. Vérifie ta connexion.');
    } finally {
      clearTimeout(minuterie);
    }
  }

  async function rafraichir(): Promise<boolean> {
    const jeton = await coffre.lireRafraichissement();
    if (!jeton) return false;
    const reponse = await envoyer('/auth/rafraichissement', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refreshToken: jeton }),
    });
    if (!reponse.ok) {
      await coffre.effacer();
      return false;
    }
    const corps = await reponse.json();
    jetonAcces = corps.accessToken;
    await coffre.ecrireRafraichissement(corps.refreshToken); // rotation : l'ancien ne vaut plus rien
    return true;
  }

  // Un seul rafraîchissement à la fois, même si trois écrans reçoivent 401 en même temps.
  function rafraichirUneFois(): Promise<boolean> {
    rafraichissementEnCours ??= rafraichir().finally(() => (rafraichissementEnCours = null));
    return rafraichissementEnCours;
  }

  async function requete<T>(chemin: string, init: RequestInit = {}, authentifiee = true): Promise<T> {
    let reponse = await envoyer(chemin, init);
    if (authentifiee && reponse.status === 401 && (await rafraichirUneFois())) {
      reponse = await envoyer(chemin, init); // on rejoue une seule fois
    }
    if (authentifiee && reponse.status === 401) {
      jetonAcces = null;
      surDeconnexion?.();
    }
    if (!reponse.ok) {
      const corps = await reponse.json().catch(() => null);
      throw new ErreurApi(reponse.status, corps);
    }
    if (reponse.status === 204) return undefined as T;
    return reponse.json() as Promise<T>;
  }

  return {
    async connexion(login: string, motDePasse: string): Promise<void> {
      const corps = await requete<{ accessToken: string; refreshToken: string }>('/auth/connexion', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ login, motDePasse }),
      }, false);
      jetonAcces = corps.accessToken;
      await coffre.ecrireRafraichissement(corps.refreshToken);
    },
    async reprendreSession(): Promise<boolean> {
      return rafraichirUneFois();
    },
    async deconnexion(): Promise<void> {
      const jeton = await coffre.lireRafraichissement();
      if (jeton) {
        await envoyer('/auth/deconnexion', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ refreshToken: jeton }),
        }).catch(() => undefined); // hors ligne : on efface quand même localement
      }
      jetonAcces = null;
      await coffre.effacer();
    },
    listerFiches: (page = 1) =>
      requete<{ donnees: ResumeFiche[]; pagination: { page: number; limite: number; total: number; pages: number } }>(`/fiches?page=${page}&limite=20`),
    lireFiche: (id: number) => requete<Fiche>(`/fiches/${id}`),
    ajouterFrais: (idFiche: number, frais: NouveauFrais, cleIdempotence: string) =>
      requete<FraisHorsForfait>(`/fiches/${idFiche}/frais-hors-forfait`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Idempotency-Key': cleIdempotence },
        body: JSON.stringify(frais),
      }),
    envoyerJustificatif: (idFrais: number, formulaire: FormData) =>
      requete<void>(`/frais-hors-forfait/${idFrais}/justificatif`, { method: 'PUT', body: formulaire }),
    enregistrerAppareil: (jetonPush: string, plateforme: string) =>
      requete<void>('/appareils', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ jetonPush, plateforme }),
      }),
  };
}

export type Api = ReturnType<typeof creerApi>;

import { creerApi } from './api';
import { URL_API } from './config';
import { coffreSecureStore } from './jetons';

let surExpiration = () => {};

export const api = creerApi({
  urlBase: URL_API,
  coffre: coffreSecureStore,
  surDeconnexion: () => surExpiration(),
});

export function quandSessionExpire(action: () => void) {
  surExpiration = action;
}

import { createContext, use, useEffect, useState, type PropsWithChildren } from 'react';

import { ErreurReseau } from '@/lib/api';
import { api, quandSessionExpire } from '@/lib/client';

type Etat = 'chargement' | 'connecte' | 'deconnecte';
type Session = {
  etat: Etat;
  connexion: (login: string, motDePasse: string) => Promise<void>;
  deconnexion: () => Promise<void>;
};

const SessionContext = createContext<Session | null>(null);

export function SessionProvider({ children }: PropsWithChildren) {
  const [etat, setEtat] = useState<Etat>('chargement');

  useEffect(() => {
    quandSessionExpire(() => setEtat('deconnecte'));
    api
      .reprendreSession()
      .then((ok) => setEtat(ok ? 'connecte' : 'deconnecte'))
      // Hors réseau, on garde la session : le jeton de rafraîchissement servira au retour du réseau.
      .catch((e) => setEtat(e instanceof ErreurReseau ? 'connecte' : 'deconnecte'));
  }, []);

  const valeur: Session = {
    etat,
    connexion: async (login, motDePasse) => {
      await api.connexion(login, motDePasse); // lève une erreur en cas de refus : l'écran l'affiche
      setEtat('connecte');
    },
    deconnexion: async () => {
      await api.deconnexion();
      setEtat('deconnecte');
    },
  };

  return <SessionContext value={valeur}>{children}</SessionContext>;
}

export function useSession(): Session {
  const session = use(SessionContext);
  if (!session) throw new Error('useSession doit être appelé sous <SessionProvider>');
  return session;
}

import { useState } from 'react';
import { KeyboardAvoidingView, Platform, StyleSheet, Text } from 'react-native';

import { Bouton } from '@/components/Bouton';
import { Champ } from '@/components/Champ';
import { useSession } from '@/context/session';
import { ErreurApi } from '@/lib/api';

export default function Connexion() {
  const { connexion } = useSession();
  const [login, setLogin] = useState('');
  const [motDePasse, setMotDePasse] = useState('');
  const [erreur, setErreur] = useState<string | null>(null);
  const [envoi, setEnvoi] = useState(false);

  async function valider() {
    setErreur(null);
    setEnvoi(true);
    try {
      await connexion(login.trim(), motDePasse);
      // Pas de navigation ici : la garde du _layout.tsx affiche les onglets.
    } catch (e) {
      setErreur(e instanceof ErreurApi && e.status === 401 ? 'Identifiant ou mot de passe incorrect.' : (e as Error).message);
      setMotDePasse('');
    } finally {
      setEnvoi(false);
    }
  }

  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.page}>
      <Text style={styles.titre}>AppliFrais</Text>
      <Champ
        libelle="Identifiant"
        value={login}
        onChangeText={setLogin}
        autoCapitalize="none"
        autoCorrect={false}
        autoComplete="username"
        textContentType="username"
      />
      <Champ
        libelle="Mot de passe"
        value={motDePasse}
        onChangeText={setMotDePasse}
        secureTextEntry
        autoComplete="current-password"
        textContentType="password"
        onSubmitEditing={valider}
      />
      {erreur && (
        <Text style={styles.erreur} accessibilityLiveRegion="polite">
          {erreur}
        </Text>
      )}
      <Bouton titre={envoi ? 'Connexion…' : 'Se connecter'} onPress={valider} desactive={envoi || !login || !motDePasse} />
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  page: { flex: 1, justifyContent: 'center', padding: 24, backgroundColor: '#f9fafb' },
  titre: { fontSize: 32, fontWeight: '700', textAlign: 'center', marginBottom: 32 },
  erreur: { color: '#b91c1c', marginBottom: 16 },
});

export default function DetailFiche() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const [fiche, setFiche] = useState<Fiche | null>(null);
  const [erreur, setErreur] = useState<string | null>(null);

  useFocusEffect(
    useCallback(() => {
      let actif = true; // évite de modifier l'état d'un écran quitté entre-temps
      api.lireFiche(Number(id)).then(
        (f) => actif && setFiche(f),
        (e: Error) => actif && setErreur(e.message),
      );
      return () => {
        actif = false;
      };
    }, [id]),
  );

  if (erreur) return <Text style={styles.erreur}>{erreur}</Text>;
  if (!fiche) return <ActivityIndicator style={styles.centre} size="large" />;

  const total = fiche.fraisHorsForfait.reduce((somme, frais) => somme + frais.montant, 0);

  return (
    <View style={styles.page}>
      <Stack.Screen options={{ title: formatMois(fiche.mois) }} />
      <Text style={styles.etat}>{LIBELLES_ETAT[fiche.etat]}</Text>
      <FlatList
        data={fiche.fraisHorsForfait}
        keyExtractor={(frais) => String(frais.id)}
        renderItem={({ item }) => (
          <View style={styles.frais}>
            <View style={styles.texteFrais}>
              <Text style={styles.libelle}>{item.libelle}</Text>
              <Text style={styles.date}>
                {item.date}
                {item.justificatif ? ' · justificatif joint' : ''}
              </Text>
            </View>
            <Text style={styles.montant}>{formatEuros(item.montant)}</Text>
          </View>
        )}
        ListEmptyComponent={<Text style={styles.vide}>Aucun frais hors forfait.</Text>}
        ListFooterComponent={<Text style={styles.total}>Total hors forfait : {formatEuros(total)}</Text>}
      />
      {fiche.etat === 'CR' && (
        <Bouton titre="Ajouter un frais" onPress={() => router.push({ pathname: '/fiche/[id]/frais', params: { id } })} />
      )}
    </View>
  );
}

const cle = useRef(Crypto.randomUUID()); // la même clé si l'utilisateur réessaie : pas de doublon

async function enregistrer() {
  const { frais, erreurs: trouvees } = validerFrais(saisie, aujourdhui());
  setErreurs(trouvees);
  if (!frais) return;
  setEnvoi(true);
  setMessage(null);
  try {
    const cree = await api.ajouterFrais(Number(id), frais, cle.current);
    if (photo) await api.envoyerJustificatif(cree.id, formulaireJustificatif(photo));
    router.back();
  } catch (e) {
    if (e instanceof ErreurReseau) {
      await mettreEnAttente(Number(id), frais, cle.current, photo); // envoyé au retour du réseau
      router.back();
    } else if (e instanceof ErreurApi && e.status === 422) {
      setErreurs(Object.fromEntries(e.erreurs.map((x) => [x.champ, x.message])));
    } else {
      setMessage((e as Error).message);
    }
  } finally {
    setEnvoi(false);
  }
}

const api = creerApi({ urlBase: 'http://localhost:3999/v1', coffre, surDeconnexion: () => deconnecte++ });

try { await api.connexion('lmartin', 'mauvais'); } catch (e) { console.log('connexion KO :', (e as ErreurApi).status, (e as Error).message); }
await api.connexion('lmartin', 'Visiteur#2026');
const premierRefresh = stocke;
await new Promise((r) => setTimeout(r, 1500)); // le jeton d'accès (1 s) expire
const [a, b, c] = await Promise.all([api.lireFiche(12), api.lireFiche(11), api.listerFiches()]);
console.log('après expiration :', a.id, b.id, c.donnees.length, 'refresh changé :', stocke !== premierRefresh);
const cle = crypto.randomUUID();
const f1 = await api.ajouterFrais(12, { date: '2026-10-20', libelle: 'Parking gare Part-Dieu', montant: 12 }, cle);
const f2 = await api.ajouterFrais(12, { date: '2026-10-20', libelle: 'Parking gare Part-Dieu', montant: 12 }, cle);
console.log('idempotence :', f1.id, f2.id, (await api.lireFiche(12)).fraisHorsForfait.length);

connexion KO : 401 Login ou mot de passe incorrect.
après expiration : 12 11 2 refresh changé : true
idempotence : 60 60 2
409 : 409 La fiche est à l'état VA : seuls les frais d'une fiche en cours se modifient.
422 : 422 [{"champ":"date","message":"date ISO invalide"},{"champ":"libelle","message":"Trop petit : chaîne de caractères doit avoir >=3 caractères"},{"champ":"montant","message":"Trop petit : nombre doit être >0"}]
rejeu du même jeton : 200 401 Jeton déjà utilisé : reconnecte-toi.
après déconnexion : 401 surDeconnexion appelé 1 fois
réseau : true Serveur injoignable. Vérifie ta connexion.