syneliadev-rnpp-connect 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Synelia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,683 @@
+# syneliadev-rnpp-connect
+
+SDK officiel d'intégration **SSO RNPP Connect** (Synelia · ONECI).
+
+Il permet à une application web d'ajouter l'authentification unique en quelques
+lignes : une clé de projet suffit, la configuration (realm, client, URLs par
+environnement) est déjà embarquée et gérée par Synelia.
+
+- **API simplifiée et stable** : `init`, `login`, `getUser`, `logout`.
+- **Bouton prêt à l'emploi** « Continuer avec RNPP Connect » (icône ONECI).
+- **Popup avec repli automatique** en redirection pleine page.
+- **Erreurs uniformes** avec des codes stables.
+- **Rafraîchissement de session** automatique et **événements** d'authentification.
+- **Aucune configuration sensible** côté application (ni realm, ni client-id, ni URL).
+
+---
+
+## Sommaire
+
+1. [Prérequis](#prérequis)
+2. [Installation](#installation)
+3. [Démarrage rapide](#démarrage-rapide)
+4. [Concepts](#concepts)
+5. [Référence API](#référence-api)
+6. [Bouton prêt à l'emploi](#bouton-prêt-à-lemploi)
+7. [Événements d'authentification](#événements-dauthentification)
+8. [Gestion des erreurs](#gestion-des-erreurs)
+9. [Intégrations par framework](#intégrations-par-framework)
+10. [Sécurité](#sécurité)
+11. [TypeScript et navigateurs](#typescript-et-navigateurs)
+12. [Dépannage / FAQ](#dépannage--faq)
+13. [Support et licence](#support-et-licence)
+
+---
+
+## Prérequis
+
+- Une **clé de projet** fournie par Synelia (par exemple `rnpp-connect-pilot`).
+- Un navigateur moderne (Chrome, Edge, Firefox, Safari — versions récentes).
+- **HTTPS** en staging et production (les popups et cookies de session
+  l'exigent). `http://localhost` est accepté en développement.
+- L'**origine de votre application** doit être enregistrée côté Synelia
+  (liste blanche) pour que le retour d'authentification soit autorisé.
+
+## Installation
+
+```bash
+npm install syneliadev-rnpp-connect
+```
+
+Fonctionne avec tout bundler moderne (Vite, Webpack, Next.js, Angular CLI,
+Nuxt, SvelteKit…). Le paquet expose **ESM**, **CommonJS** et les **types
+TypeScript**.
+
+## Démarrage rapide
+
+```ts
+import RNPPConnect from 'syneliadev-rnpp-connect';
+
+// 1. Initialiser (à faire une seule fois, au démarrage de l'application)
+await RNPPConnect.init({ project: 'rnpp-connect-pilot' });
+
+// 2. Authentifier l'utilisateur (popup, repli automatique en redirection)
+await RNPPConnect.login();
+
+// 3. Lire l'utilisateur connecté
+const user = RNPPConnect.getUser();
+console.log(user?.name, user?.email);
+
+// 4. Se déconnecter
+await RNPPConnect.logout();
+```
+
+Avec le bouton prêt à l'emploi :
+
+```ts
+import RNPPConnect, { mountLoginButton } from 'syneliadev-rnpp-connect';
+
+await RNPPConnect.init({ project: 'rnpp-connect-pilot' });
+mountLoginButton('#login'); // affiche « Continuer avec RNPP Connect »
+```
+
+```html
+<div id="login"></div>
+```
+
+## Concepts
+
+### Clé de projet
+
+Une **clé de projet** identifie votre application auprès du SSO. Elle est
+fournie par Synelia et remplace toute la configuration technique (realm, client,
+URLs). Votre code ne contient donc **aucune valeur sensible**.
+
+### Environnements
+
+La même clé de projet fonctionne en local, staging et production. Le SDK
+détecte l'environnement (`localhost` → `local`) et choisit automatiquement les
+bons points d'accès. Vous pouvez le forcer avec `environment`.
+
+### Popup et redirection
+
+Par défaut, `login()` ouvre l'authentification dans une **popup**. Si la popup
+est bloquée par le navigateur, le SDK bascule **automatiquement** en
+**redirection** pleine page : aucun code supplémentaire n'est nécessaire.
+
+### Page de callback (popup)
+
+Le flux popup a besoin d'une page servie par votre application, qui termine
+l'authentification et renvoie le résultat à la fenêtre principale. Par défaut,
+le SDK attend `/rnpp-connect-popup-callback.html` ; il est recommandé de définir
+`popupRedirectUri` vers une route de votre application (voir les exemples par
+framework). Cette page appelle simplement :
+
+```ts
+import { handlePopupCallback } from 'syneliadev-rnpp-connect';
+
+handlePopupCallback({ project: 'rnpp-connect-pilot' });
+```
+
+> La page de callback doit être servie sur **la même origine** que
+> l'application.
+
+### Rafraîchissement de session
+
+La session est rafraîchie automatiquement. En cas d'expiration, un événement
+`expired` est émis et `AUTH_REQUIRED` est renvoyé : il suffit alors de relancer
+`login()`.
+
+## Référence API
+
+Import par défaut (instance unique, recommandée) :
+
+```ts
+import RNPPConnect from 'syneliadev-rnpp-connect';
+```
+
+### Méthodes
+
+| Méthode | Retour | Description |
+| --- | --- | --- |
+| `init(options)` | `Promise<boolean>` | Résout la configuration du projet et initialise la session. Renvoie `true` si un utilisateur est déjà authentifié. |
+| `login(options?)` | `Promise<void>` | Authentifie l'utilisateur (popup, repli redirection). |
+| `loginRedirect(options?)` | `Promise<void>` | Force le flux par redirection pleine page. |
+| `loginWithPopup(options?)` | `Promise<void>` | Force le flux par popup. |
+| `logout(options?)` | `Promise<void>` | Termine la session et nettoie l'état local. |
+| `isAuthenticated()` | `boolean` | `true` si une session valide et non expirée existe. |
+| `getUser()` | `RNPPConnectUser \| null` | Profil de l'utilisateur connecté, ou `null`. |
+| `getAuthState()` | `AuthState` | État courant (sûr même avant `init`). |
+| `isInitialized()` | `boolean` | Indique si le SDK a été initialisé. |
+| `refresh(minValidity?)` | `Promise<boolean>` | Rafraîchit le jeton si nécessaire. |
+| `onAuthChange(listener)` | `() => void` | S'abonne aux changements d'état ; retourne une fonction de désabonnement. |
+| `getToken()` | `string \| undefined` | Jeton d'accès courant. |
+| `getRefreshToken()` | `string \| undefined` | Jeton de rafraîchissement. |
+| `getIdToken()` | `string \| undefined` | Jeton d'identité. |
+| `getTokenParsed()` | `object \| undefined` | Contenu décodé du jeton d'accès. |
+| `getTokens()` | `RNPPConnectTokens` | Ensemble des jetons courants. |
+| `getProject()` | `{ key, displayName, environment } \| undefined` | Identité du projet (aucune donnée technique brute). |
+| `handlePopupCallback(options)` | `Promise<RNPPConnectTokens>` | À utiliser dans la page de callback (import nommé). |
+
+### Options d'initialisation (`init`)
+
+| Option | Type | Défaut | Description |
+| --- | --- | --- | --- |
+| `project` | `string` | — | **Requis.** Clé de projet fournie par Synelia. |
+| `environment` | `string` | auto | `local`, `staging`, `production`. |
+| `popupRedirectUri` | `string` | `/rnpp-connect-popup-callback.html` | URL de la page de callback popup. |
+| `onLoad` | `'check-sso' \| 'login-required'` | `'check-sso'` | Authentifier immédiatement ou vérifier la session existante. |
+| `scope` | `string` | `openid profile email` | Scopes demandés. |
+| `onAuthChange` | `(state, event) => void` | — | Abonnement aux événements dès l'initialisation. |
+| `registryUrl` | `string` | — | Charge la configuration depuis une URL (usage avancé). |
+| `baseUrl` | `string` | — | Surcharge le point d'accès (usage avancé). |
+| `checkLoginIframe` | `boolean` | `false` | Vérification silencieuse par iframe. |
+| `silentCheckSsoRedirectUri` | `string` | — | URL de vérification silencieuse. |
+
+### Options de `login`
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `idp` | `string` | Cible un fournisseur d'identité externe (option avancée). |
+| `redirectUri` | `string` | URL de retour après authentification. |
+| `useRedirect` | `boolean` | `true` pour forcer la redirection. |
+
+### Options de `logout`
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `redirectUri` | `string` | URL de retour après déconnexion. |
+
+### Objet utilisateur (`RNPPConnectUser`)
+
+```ts
+interface RNPPConnectUser {
+  id: string;              // identifiant stable
+  username?: string;
+  email?: string;
+  emailVerified?: boolean;
+  firstName?: string;
+  lastName?: string;
+  name?: string;
+  roles: string[];         // rôles applicatifs
+}
+```
+
+### Instance multiple (avancé)
+
+Le SDK expose aussi la classe `RNPPConnectClient` pour gérer plusieurs
+instances, et `setDefaultRNPPConnect(instance)` pour l'utiliser avec le bouton
+prêt à l'emploi.
+
+## Bouton prêt à l'emploi
+
+```ts
+import RNPPConnect, { mountLoginButton } from 'syneliadev-rnpp-connect';
+
+await RNPPConnect.init({ project: 'rnpp-connect-pilot' });
+mountLoginButton('#login'); // « Continuer avec RNPP Connect » + icône ONECI
+```
+
+Ou directement en HTML (après `defineLoginButton()`) :
+
+```html
+<rnpp-connect-login-button project="rnpp-connect-pilot"></rnpp-connect-login-button>
+```
+
+| Option | Type | Défaut | Description |
+| --- | --- | --- | --- |
+| `project` | `string` | — | Clé de projet (si le SDK n'est pas déjà initialisé). |
+| `label` | `string` | `Continuer avec RNPP Connect` | Libellé du bouton. |
+| `icon` | `boolean \| string` | icône ONECI | `false` pour masquer, ou URL d'une image personnalisée. |
+| `mode` | `'popup' \| 'redirect'` | `'popup'` | Flux d'authentification. |
+| `provider` | `string` | — | Cible un fournisseur externe (option avancée). |
+| `sso` | `RNPPConnect` | instance par défaut | Instance à utiliser. |
+| `onSuccess` | `() => void` | — | Appelé après une authentification réussie. |
+| `onError` | `(error) => void` | — | Appelé en cas d'échec. |
+
+Le bouton émet aussi un événement DOM `rnpp-connect-error` (détail :
+`RNPPConnectError`).
+
+## Événements d'authentification
+
+`onAuthChange` notifie les changements d'état et retourne une fonction de
+désabonnement. C'est le moyen recommandé de synchroniser votre interface.
+
+```ts
+import RNPPConnect, { type AuthState, type AuthChangeEvent } from 'syneliadev-rnpp-connect';
+
+const unsubscribe = RNPPConnect.onAuthChange((state: AuthState, event: AuthChangeEvent) => {
+  // event: 'init' | 'login' | 'logout' | 'refresh' | 'expired'
+  console.log(event, state.authenticated, state.user);
+});
+
+// plus tard
+unsubscribe();
+```
+
+- `getAuthState()` lit l'état courant à tout moment.
+- `expired` signale une session à réauthentifier (`AUTH_REQUIRED`).
+
+## Gestion des erreurs
+
+Toute défaillance rejette une `RNPPConnectError` exposant un `code` stable et
+un `message` lisible.
+
+| Code | Signification | Traitement conseillé |
+| --- | --- | --- |
+| `CONFIG_INVALID` | Configuration invalide | Corriger la configuration, ne pas réessayer. |
+| `CONFIG_UNKNOWN_PROJECT` | Clé de projet inconnue | Vérifier la clé fournie par Synelia. |
+| `CONFIG_ENVIRONMENT_UNKNOWN` | Environnement inconnu | Vérifier `environment`. |
+| `NOT_INITIALIZED` | API appelée avant `init` | Appeler `init` au démarrage. |
+| `INIT_FAILED` | Échec d'initialisation | Vérifier le réseau. |
+| `LOGIN_FAILED` | Échec d'authentification | Afficher un message, proposer de réessayer. |
+| `LOGIN_CANCELLED` | Popup fermée par l'utilisateur | Ignorer silencieusement. |
+| `LOGIN_POPUP_BLOCKED` | Popup bloquée (repli effectué) | Informationnel. |
+| `LOGOUT_FAILED` | Échec de déconnexion | Nettoyer l'état local, réessayer. |
+| `TOKEN_REFRESH_FAILED` | Rafraîchissement échoué | Redemander une authentification. |
+| `AUTH_REQUIRED` | Session expirée | Relancer `login()`. |
+| `NETWORK_ERROR` | Réseau indisponible | Réessayer avec un délai progressif. |
+
+```ts
+import { RNPPConnectError } from 'syneliadev-rnpp-connect';
+
+try {
+  await RNPPConnect.login();
+} catch (error) {
+  if (error instanceof RNPPConnectError) {
+    if (error.code === 'LOGIN_CANCELLED') return;      // fermée par l'utilisateur
+    if (error.code === 'AUTH_REQUIRED') return RNPPConnect.login();
+  }
+  throw error;
+}
+```
+
+## Intégrations par framework
+
+> Dans tous les exemples, remplacez `VOTRE_CLE` par la clé de projet fournie
+> par Synelia, et enregistrez l'origine de votre application côté Synelia.
+
+### React (Vite)
+
+```tsx
+// src/main.tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import RNPPConnect from 'syneliadev-rnpp-connect';
+import App from './App';
+
+async function bootstrap() {
+  await RNPPConnect.init({
+    project: 'VOTRE_CLE',
+    popupRedirectUri: `${window.location.origin}/callback`,
+  });
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+}
+void bootstrap();
+```
+
+```tsx
+// src/App.tsx
+import { useEffect, useRef, useState } from 'react';
+import RNPPConnect, { mountLoginButton } from 'syneliadev-rnpp-connect';
+
+export default function App() {
+  const host = useRef<HTMLDivElement>(null);
+  const [authenticated, setAuthenticated] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = RNPPConnect.onAuthChange((state) => setAuthenticated(state.authenticated));
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    if (!host.current) return;
+    const button = mountLoginButton(host.current);
+    return () => button.remove();
+  }, []);
+
+  if (authenticated) {
+    const user = RNPPConnect.getUser();
+    return (
+      <>
+        <p>Bonjour {user?.name ?? user?.username}</p>
+        <button onClick={() => RNPPConnect.logout()}>Se déconnecter</button>
+      </>
+    );
+  }
+
+  return <div ref={host} />;
+}
+```
+
+Page de callback (`src/Callback.tsx`, montée sur la route `/callback`) :
+
+```tsx
+import { useEffect } from 'react';
+import { handlePopupCallback } from 'syneliadev-rnpp-connect';
+
+export default function Callback() {
+  useEffect(() => {
+    handlePopupCallback({ project: 'VOTRE_CLE' }).catch(() => window.close());
+  }, []);
+  return <p>Authentification en cours…</p>;
+}
+```
+
+### Next.js (App Router)
+
+Le SDK s'exécute dans le navigateur : utilisez des composants clients.
+
+```tsx
+// app/providers.tsx
+'use client';
+
+import { useEffect, useRef } from 'react';
+import RNPPConnect, { mountLoginButton } from 'syneliadev-rnpp-connect';
+
+export function SsoButton() {
+  const host = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    void RNPPConnect.init({
+      project: 'VOTRE_CLE',
+      popupRedirectUri: `${window.location.origin}/callback`,
+    });
+    if (!host.current) return;
+    const button = mountLoginButton(host.current);
+    return () => button.remove();
+  }, []);
+
+  return <div ref={host} />;
+}
+```
+
+```tsx
+// app/callback/page.tsx
+'use client';
+
+import { useEffect } from 'react';
+import { handlePopupCallback } from 'syneliadev-rnpp-connect';
+
+export default function CallbackPage() {
+  useEffect(() => {
+    handlePopupCallback({ project: 'VOTRE_CLE' }).catch(() => window.close());
+  }, []);
+  return <p>Authentification en cours…</p>;
+}
+```
+
+> Pour les composants rendus côté serveur, importez le SDK uniquement dans des
+> composants `'use client'` (ou via `next/dynamic` avec `{ ssr: false }`).
+
+### Vue 3 (Vite)
+
+```ts
+// src/main.ts
+import { createApp } from 'vue';
+import RNPPConnect from 'syneliadev-rnpp-connect';
+import App from './App.vue';
+import router from './router';
+
+await RNPPConnect.init({
+  project: 'VOTRE_CLE',
+  popupRedirectUri: `${window.location.origin}/callback`,
+});
+
+createApp(App).use(router).mount('#app');
+```
+
+```vue
+<!-- src/App.vue -->
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import RNPPConnect, { mountLoginButton } from 'syneliadev-rnpp-connect';
+
+const host = ref<HTMLDivElement>();
+const authenticated = ref(false);
+let unsubscribe: (() => void) | undefined;
+let button: { remove: () => void } | undefined;
+
+onMounted(() => {
+  unsubscribe = RNPPConnect.onAuthChange((state) => (authenticated.value = state.authenticated));
+  if (host.value) button = mountLoginButton(host.value);
+});
+onUnmounted(() => {
+  unsubscribe?.();
+  button?.remove();
+});
+</script>
+
+<template>
+  <div v-if="!authenticated" ref="host" />
+  <div v-else>
+    <p>Bonjour {{ RNPPConnect.getUser()?.name }}</p>
+    <button @click="RNPPConnect.logout()">Se déconnecter</button>
+  </div>
+</template>
+```
+
+Route `/callback` : un composant qui appelle
+`handlePopupCallback({ project: 'VOTRE_CLE' })` dans `onMounted`.
+
+### Nuxt 3
+
+```ts
+// plugins/rnpp-connect.client.ts
+import RNPPConnect from 'syneliadev-rnpp-connect';
+
+export default defineNuxtPlugin(async () => {
+  await RNPPConnect.init({
+    project: 'VOTRE_CLE',
+    popupRedirectUri: `${window.location.origin}/callback`,
+  });
+  return { provide: { sso: RNPPConnect } };
+});
+```
+
+```vue
+<!-- pages/callback.vue -->
+<script setup lang="ts">
+import { handlePopupCallback } from 'syneliadev-rnpp-connect';
+
+onMounted(() => {
+  handlePopupCallback({ project: 'VOTRE_CLE' }).catch(() => window.close());
+});
+</script>
+
+<template>
+  <p>Authentification en cours…</p>
+</template>
+```
+
+Dans une page, récupérez l'instance via `const { $sso } = useNuxtApp()` et
+montez le bouton avec `mountLoginButton`.
+
+### Angular
+
+```ts
+// src/app/sso.service.ts
+import { Injectable } from '@angular/core';
+import RNPPConnect from 'syneliadev-rnpp-connect';
+
+@Injectable({ providedIn: 'root' })
+export class SsoService {
+  init(): Promise<boolean> {
+    return RNPPConnect.init({
+      project: 'VOTRE_CLE',
+      popupRedirectUri: `${window.location.origin}/callback`,
+    });
+  }
+  readonly sso = RNPPConnect;
+}
+```
+
+```ts
+// src/main.ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+import { SsoService } from './app/sso.service';
+
+async function bootstrap() {
+  await new SsoService().init();
+  await bootstrapApplication(AppComponent, appConfig);
+}
+void bootstrap();
+```
+
+```ts
+// composant avec le bouton
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { mountLoginButton, type RNPPConnectLoginButton } from 'syneliadev-rnpp-connect';
+import { SsoService } from './sso.service';
+
+@Component({ selector: 'app-login', standalone: true, template: '<div #host></div>' })
+export class LoginComponent implements OnInit, OnDestroy {
+  @ViewChild('host', { static: true }) host!: ElementRef<HTMLDivElement>;
+  private button?: RNPPConnectLoginButton;
+
+  constructor(private readonly ssoService: SsoService) {}
+
+  ngOnInit(): void {
+    this.button = mountLoginButton(this.host.nativeElement, { sso: this.ssoService.sso });
+  }
+  ngOnDestroy(): void {
+    this.button?.remove();
+  }
+}
+```
+
+Route `/callback` : un composant qui appelle
+`handlePopupCallback({ project: 'VOTRE_CLE' })` dans `ngOnInit`.
+
+### Svelte / SvelteKit
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import RNPPConnect, { mountLoginButton } from 'syneliadev-rnpp-connect';
+
+  let host: HTMLDivElement;
+
+  onMount(() => {
+    void RNPPConnect.init({
+      project: 'VOTRE_CLE',
+      popupRedirectUri: `${window.location.origin}/callback`,
+    });
+    const button = mountLoginButton(host);
+    return () => button.remove();
+  });
+</script>
+
+<div bind:this={host} />
+```
+
+```svelte
+<!-- src/routes/callback/+page.svelte -->
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { handlePopupCallback } from 'syneliadev-rnpp-connect';
+
+  onMount(() => {
+    handlePopupCallback({ project: 'VOTRE_CLE' }).catch(() => window.close());
+  });
+</script>
+
+<p>Authentification en cours…</p>
+```
+
+### HTML / JavaScript (sans framework)
+
+```html
+<!doctype html>
+<html lang="fr">
+  <body>
+    <div id="login"></div>
+    <pre id="user"></pre>
+
+    <script type="module">
+      import RNPPConnect, { mountLoginButton } from 'syneliadev-rnpp-connect';
+
+      await RNPPConnect.init({
+        project: 'VOTRE_CLE',
+        popupRedirectUri: `${window.location.origin}/rnpp-connect-popup-callback.html`,
+      });
+      mountLoginButton('#login');
+      document.getElementById('user').textContent = JSON.stringify(RNPPConnect.getUser(), null, 2);
+    </script>
+  </body>
+</html>
+```
+
+Page `rnpp-connect-popup-callback.html` :
+
+```html
+<!doctype html>
+<html lang="fr">
+  <body>
+    <p>Authentification en cours…</p>
+    <script type="module">
+      import { handlePopupCallback } from 'syneliadev-rnpp-connect';
+      handlePopupCallback({ project: 'VOTRE_CLE' }).catch(() => window.close());
+    </script>
+  </body>
+</html>
+```
+
+## Sécurité
+
+- Les jetons sont conservés **en mémoire** et ne sont pas persistés dans
+  `localStorage` par défaut.
+- **Ne journalisez jamais** les jetons et ne les transmettez pas hors de votre
+  domaine.
+- Utilisez **HTTPS** en staging et production.
+- Enregistrez uniquement les **origines nécessaires** côté Synelia.
+- Appelez `logout()` pour terminer proprement la session.
+
+## TypeScript et navigateurs
+
+- Types inclus (aucun `@types` supplémentaire).
+- ESM, CommonJS et définitions `.d.ts`.
+- Navigateurs modernes : Chrome, Edge, Firefox, Safari (2 dernières versions
+  majeures).
+
+Types principaux exportés : `RNPPConnectUser`, `RNPPConnectTokens`,
+`RNPPConnectInitOptions`, `RNPPConnectLoginOptions`, `RNPPConnectLogoutOptions`,
+`AuthState`, `AuthChangeEvent`, `AuthChangeListener`, `RNPPConnectError`,
+`LoginButtonOptions`.
+
+## Dépannage / FAQ
+
+**Le bouton ne fait rien / `NOT_INITIALIZED`.**
+Appelez `await RNPPConnect.init({ project })` au démarrage, avant d'utiliser le
+bouton ou `login()`.
+
+**La popup est bloquée.**
+Le SDK bascule automatiquement en redirection. Pour forcer ce comportement,
+utilisez `mountLoginButton('#login', { mode: 'redirect' })` ou
+`login({ useRedirect: true })`.
+
+**`Invalid parameter: redirect_uri`.**
+L'origine ou l'URL de retour n'est pas autorisée : vérifiez qu'elle est bien
+enregistrée côté Synelia.
+
+**Je reste « déconnecté » après le retour d'authentification.**
+Assurez-vous d'attendre la fin de `init()` avant de lire l'état, et abonnez-vous
+à `onAuthChange` pour mettre à jour l'interface automatiquement.
+
+**`AUTH_REQUIRED` après un moment.**
+La session a expiré : relancez `login()`.
+
+**Les libellés / l'écran de connexion.**
+L'écran d'authentification RNPP Connect (ONECI) est fourni par Synelia ; sa
+personnalisation par application est gérée côté plateforme.
+
+## Support et licence
+
+- **Support** : saintcyrwin@gmail.com — https://synelia.tech
+- **Licence** : [MIT](./LICENSE) © 2026 Synelia

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "syneliadev-rnpp-connect",
+  "version": "1.0.0",
+  "description": "SDK officiel d'intégration SSO RNPP Connect (Synelia / ONECI).",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "verify": "npm run typecheck && npm run test && npm run build"
+  },
+  "dependencies": {
+    "keycloak-js": "^26.0.0"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.8"
+  }
+}