tokenidp-react 0.3.5

package/README.md

@@ -0,0 +1,170 @@
+# TokenIDP React SDK
+
+Official React SDK for integrating TokenIDP OAuth and OpenID Connect authentication into React applications.
+
+The SDK handles Authorization Code + PKCE, OAuth callback processing, token persistence, refresh-token rotation, logout and revocation, hosted-login redirects, auth state, and tenant propagation.
+
+## Package
+
+```bash
+npm install tokenidp-react
+```
+
+For local development from this repository:
+
+```bash
+cd sdks/react-idp-sdk
+npm install
+npm run build
+npm run pack
+```
+
+Then install the generated `.tgz` in a React app.
+
+## Exports
+
+```js
+import {
+  AuthCallback,
+  IdpAuthProvider,
+  LoginPage,
+  defaultAuthConfig,
+  useAuth,
+} from "tokenidp-react";
+```
+
+## Configure Auth
+
+Wrap the app with `IdpAuthProvider`.
+
+```jsx
+import { IdpAuthProvider } from "tokenidp-react";
+
+export function Root() {
+  return (
+    <IdpAuthProvider
+      config={{
+        authority: "https://idp.example.com",
+        clientId: "react-client",
+        redirectUri: `${window.location.origin}/auth/callback`,
+        postLoginRedirectUri: "/dashboard",
+        postLogoutRedirectUri: "/login?logged_out=1",
+        scope: "openid profile offline_access",
+        storage: "sessionStorage",
+      }}
+    >
+      <App />
+    </IdpAuthProvider>
+  );
+}
+```
+
+Required values:
+
+- `authority`
+- `clientId`
+- `redirectUri`
+
+Common optional values:
+
+- `scope`, default `openid profile offline_access`
+- `audience`
+- `postLoginRedirectUri`, default `/`
+- `postLogoutRedirectUri`, default `/login`
+- `storage`, one of `memory`, `sessionStorage`, or `localStorage`
+- `autoRefresh`, default `true`
+- `refreshSkewSeconds`, default `180`
+
+## Routes
+
+Add a login route and callback route with React Router.
+
+```jsx
+import { AuthCallback, LoginPage } from "tokenidp-react";
+
+<Routes>
+  <Route path="/login" element={<LoginPage />} />
+  <Route path="/auth/callback" element={<AuthCallback />} />
+</Routes>
+```
+
+`LoginPage` automatically redirects to TokenIDP unless the URL contains `logged_out=1`, in which case it shows a signed-out state and a sign-in button.
+
+`AuthCallback` reads `code` and `state`, validates OAuth state, exchanges the code for tokens, stores the session, and navigates to `postLoginRedirectUri` unless `redirectTo` is supplied.
+
+## Use Auth State
+
+```jsx
+import { useAuth } from "tokenidp-react";
+
+export function LoginButton() {
+  const auth = useAuth();
+
+  if (auth.isAuthenticated) {
+    return <button onClick={auth.logout}>Logout</button>;
+  }
+
+  return <button onClick={() => auth.login()}>Login</button>;
+}
+```
+
+The `useAuth()` value includes:
+
+- `isAuthenticated`
+- `tenantKey`
+- `landingPage`
+- `accessToken`
+- `refreshToken`
+- `idToken`
+- `expiresAt`
+- `error`
+- `login(options)`
+- `logout()`
+- `handleCallback({ code, state })`
+- `refresh()`
+- `setError(message)`
+
+## Login Options
+
+`login(options)` supports:
+
+- `prompt`
+- `loginHint`
+- `audience`
+- `tenantKey`
+
+```jsx
+auth.login({
+  loginHint: "user@example.com",
+  tenantKey: "tenant-a",
+});
+```
+
+## Tenant Propagation
+
+Tenant propagation is controlled by:
+
+- `tenantKey`
+- `tenantPropagationMode`: `all`, `api`, or `none`
+- `tenantQueryParameter`, default `tenant`
+- `tenantHeaderName`, default `X-Tenant-Key`
+- `tenantKeyStorageKey`, default `idp_tenant_key`
+
+Modes:
+
+- `all`: add tenant query parameter to hosted authorization and built-in auth endpoint calls
+- `api`: resolve and persist tenant for application API usage without adding tenant to hosted auth endpoint calls
+- `none`: do not resolve or propagate tenant automatically
+
+The SDK resolves tenant key from explicit login options, provider config, the current URL query parameter, or session storage.
+
+## Logout
+
+`logout()` attempts to revoke the refresh token, clears the local session, and redirects to the TokenIDP logout endpoint with `client_id` and `post_logout_redirect_uri`.
+
+## Notes
+
+- PKCE uses `S256`.
+- OAuth state is stored in `sessionStorage` and validated during callback handling.
+- Refresh uses the configured refresh token and keeps the previous refresh token if the server does not return a rotated value.
+- The SDK stores tokens according to the configured storage mode. Use `sessionStorage` or `memory` for browser clients unless the application explicitly accepts the persistence tradeoff of `localStorage`.

package/dist/index.css

@@ -0,0 +1,50 @@
+/* src/styles/idp-default.css */
+.login-page {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background:
+    radial-gradient(
+      circle at top,
+      #eef3fb 0%,
+      #f7f9fc 45%,
+      #f1f4f9 100%);
+}
+.redirect-card {
+  max-width: 440px;
+  width: 100%;
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 28px 24px;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
+  border: 1px solid #e5e7eb;
+  text-align: center;
+}
+.redirect-card h1 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 6px;
+}
+.redirect-card p {
+  font-size: 0.95rem;
+  color: #6b7280;
+  margin-bottom: 12px;
+}
+.logo {
+  width: 56px;
+  height: 56px;
+  margin: -24px auto 14px auto;
+  border-radius: 50%;
+  background: #1e3a8a;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px;
+  box-shadow: 0 10px 24px rgba(30, 58, 138, 0.25);
+  border: 4px solid #ffffff;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/idp-default.css"],"sourcesContent":["/* Page background (same as /authorize) */\r\n.login-page {\r\n  min-height: 100vh;\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: radial-gradient(\r\n    circle at top,\r\n    #eef3fb 0%,\r\n    #f7f9fc 45%,\r\n    #f1f4f9 100%\r\n  );\r\n}\r\n\r\n/* Card container */\r\n.redirect-card {\r\n  max-width: 440px;\r\n  width: 100%;\r\n  background: #ffffff;\r\n  border-radius: 16px;\r\n  padding: 28px 24px;\r\n  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);\r\n  border: 1px solid #e5e7eb;\r\n  text-align: center;\r\n}\r\n\r\n/* Title */\r\n.redirect-card h1 {\r\n  font-size: 1.6rem;\r\n  font-weight: 700;\r\n  color: #0f172a;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n/* Subtext */\r\n.redirect-card p {\r\n  font-size: 0.95rem;\r\n  color: #6b7280;\r\n  margin-bottom: 12px;\r\n}\r\n\r\n/* Logo badge */\r\n.logo {\r\n  width: 56px;\r\n  height: 56px;\r\n  margin: -24px auto 14px auto; /* slightly floating but not too much */\r\n  border-radius: 50%;\r\n  background: #1e3a8a;\r\n  color: #ffffff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 26px;\r\n  box-shadow: 0 10px 24px rgba(30, 58, 138, 0.25);\r\n  border: 4px solid #ffffff; /* nice layered effect */\r\n}\r\n"],"mappings":";AACA,CAAC;AACC,cAAY;AACZ,SAAO;AACP,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB;AAAA,IAAY;AAAA,MACV,OAAO,GAAG,GADA;AAAA,MAEV,QAAQ,EAFE;AAAA,MAGV,QAAQ,GAHE;AAAA,MAIV,QAAQ;AAEZ;AAGA,CAAC;AACC,aAAW;AACX,SAAO;AACP,cAAY;AACZ,iBAAe;AACf,WAAS,KAAK;AACd,cAAY,EAAE,KAAK,KAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACzC,UAAQ,IAAI,MAAM;AAClB,cAAY;AACd;AAGA,CAZC,cAYc;AACb,aAAW;AACX,eAAa;AACb,SAAO;AACP,iBAAe;AACjB;AAGA,CApBC,cAoBc;AACb,aAAW;AACX,SAAO;AACP,iBAAe;AACjB;AAGA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,UAAQ,MAAM,KAAK,KAAK;AACxB,iBAAe;AACf,cAAY;AACZ,SAAO;AACP,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,aAAW;AACX,cAAY,EAAE,KAAK,KAAK,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;AAC1C,UAAQ,IAAI,MAAM;AACpB;","names":[]}