@jtl-software/cloud-apps-auth

Authentication (OIDC authorization code + PKCE) and session UI for JTL Platform cloud apps. A thin wrapper over react-oidc-context with the JTL defaults baked in, so a scaffolded app needs only a provider and a gate.

// main.tsx — the app reads its VITE_JTL_* env and passes them in (keeps the library env-agnostic)
import { JtlAuthProvider } from "@jtl-software/cloud-apps-auth";

<JtlAuthProvider
  issuer={import.meta.env.VITE_JTL_ISSUER}
  clientId={import.meta.env.VITE_JTL_CLIENT_ID}
  scope={import.meta.env.VITE_JTL_SCOPE}
>
  <App />
</JtlAuthProvider>;

// gate a standalone (non-embedded) view: unauthenticated visitors go straight to the JTL sign-in,
// land back where they started, and get the sign-out top bar above the app.
import { RequireJtlAuth, useJtlAuth } from "@jtl-software/cloud-apps-auth";

<RequireJtlAuth>
  <YourPage />
</RequireJtlAuth>;

const { user } = useJtlAuth(); // user.profile, user.access_token, …

Exports

• JtlAuthProvider — wraps the app in the OIDC provider (or renders children as-is when the app isn't registered yet).
• RequireJtlAuth — the login gate; renders the top bar when signed in, a "not configured" hint when the client id is missing.
• JtlAuthBar — the signed-in top bar on its own.
• useJtlAuth — the session hook (re-export of react-oidc-context's useAuth).
• useJtlAuthConfigured, isJtlAuthConfigured, buildOidcConfig, JtlAuthConfig.

Peer dependencies

react, react-dom, and @jtl-software/platform-ui-react (for the top bar) come from the host app.

Styling

The components use platform-ui-react plus a few Tailwind utility classes, emitted in this package's dist. Like platform-ui-react, Tailwind must scan that dist for the classes to be generated — Tailwind ignores node_modules by default. With Tailwind v4, add an @source next to the one for platform-ui-react in your app's CSS:

@import "tailwindcss";
@source "../../node_modules/@jtl-software/platform-ui-react/dist";
@source "../../node_modules/@jtl-software/cloud-apps-auth/dist";

The scaffolded React template already does this.