@leancodepl/kratos 10.0.2 → 10.1.0

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [10.1.0](https://github.com/leancodepl/js_corelibrary/compare/v10.0.2...v10.1.0) (2026-02-16)
+
+### Bug Fixes
+
+- Add OIDC providers config to example app and fix type issues
+  ([6c7f13b](https://github.com/leancodepl/js_corelibrary/commit/6c7f13b63498314ccdd742b2656767d3f4dd62b3))
+- Address code review feedback
+  ([7830178](https://github.com/leancodepl/js_corelibrary/commit/7830178cba6147cd533bc6cbd7cd25e3c2d26fb1))
+- Properly type OidcProviderUiNode attributes to avoid 'any'
+  ([27acdce](https://github.com/leancodepl/js_corelibrary/commit/27acdce9a874dfbe8e30566fc19f9b51aa6314d9))
+- Remove unused imports and variables from OIDC provider implementation
+  ([2590a39](https://github.com/leancodepl/js_corelibrary/commit/2590a392e63181d0a6ea1ce4dc10ddf9b392c0d7))
+- Resolve build failures in kratos package
+  ([c356f93](https://github.com/leancodepl/js_corelibrary/commit/c356f9366fbf623d32829e58d53afd58e374ca7d))
+- Resolve linter errors and warnings
+  ([a900e5c](https://github.com/leancodepl/js_corelibrary/commit/a900e5c80664d4914114b0d2ca9f45fdb2c86854))
+- Update documentation to show correct provider capitalization
+  ([980b62b](https://github.com/leancodepl/js_corelibrary/commit/980b62b707ac63f61c864d37ddd580b7225f94d6))
+
+### Features
+
+- Add support for custom OIDC providers
+  ([a1ae459](https://github.com/leancodepl/js_corelibrary/commit/a1ae459ebb1a2d14bd9def97af7ec4dfec2e15da))
+- Add type-safe OIDC provider support
+  ([b52ab23](https://github.com/leancodepl/js_corelibrary/commit/b52ab233096eeb91fae6850e7c30e5b0cb0a5b15))
+- Make OidcFormProps generic with OidcProvidersConfig type
+  ([7957ff8](https://github.com/leancodepl/js_corelibrary/commit/7957ff84fb634b859a8a5f6bc114d2dc2ba3ec1d))
+- remove label from oidc provider type amd spread oidc components
+  ([aa25a5f](https://github.com/leancodepl/js_corelibrary/commit/aa25a5f7ff0bb6b1cd2e36d23b3c61dd3621d77e))
+- unify oidcProviderComponents implementations
+  ([74f7ad3](https://github.com/leancodepl/js_corelibrary/commit/74f7ad38211ff88826ffb21b9c73580854e27f3a))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [10.0.2](https://github.com/leancodepl/js_corelibrary/compare/v10.0.1...v10.0.2) (2026-02-13)
 
 **Note:** Version bump only for package @leancodepl/kratos

package/README.md

@@ -12,7 +12,7 @@ yarn add @leancodepl/kratos
 
 ## API
 
-### `mkKratos(queryClient, basePath, traits, SessionManager)`
+### `mkKratos(queryClient, basePath, traits, SessionManager, oidcProviders)`
 
 Creates a Kratos client factory with authentication flows, session management, and React providers.
 
@@ -23,6 +23,8 @@ Creates a Kratos client factory with authentication flows, session management, a
 - `traits?: TTraitsConfig` - Optional traits configuration object for user schema validation
 - `SessionManager?: new (props: BaseSessionManagerContructorProps) => TSessionManager` - Optional session manager
   constructor, defaults to BaseSessionManager
+- `oidcProviders?: readonly OidcProviderConfig[]` - Optional array of custom OIDC provider configurations. Each provider
+  should have an `id` (matching Kratos provider ID)
 
 **Returns:** Object with the following structure:
 
@@ -201,6 +203,98 @@ const {
 })
 ```
 
+### Custom OIDC Providers
+
+You can configure custom OIDC providers (like Microsoft, GitHub, etc.) in addition to the default providers (Apple, Google, Facebook):
+
+```typescript
+// kratosService.ts
+
+import { mkKratos } from "@leancodepl/kratos"
+import { environment } from "./environments"
+import { queryClient } from "./queryService"
+import { traitsConfig } from "./traits"
+
+const {
+  session: { sessionManager },
+  providers: { KratosProviders },
+  flows: { LoginFlow, RegistrationFlow, SettingsFlow },
+} = mkKratos({
+  queryClient,
+  basePath: environment.authUrl,
+  traits: traitsConfig,
+  oidcProviders: [
+    { id: "microsoft" },
+    { id: "github" },
+    { id: "reddit" },
+  ],
+})
+```
+
+The OIDC providers are automatically made available in the flow forms as capitalized component properties. For example, a provider with `id: "microsoft"` will be available as `oidcProviders.Microsoft`.
+
+With TypeScript, the library generates type-safe provider types from your configuration, ensuring you can only access providers you've configured:
+
+```tsx
+// kratosService.ts
+
+const oidcProvidersConfig = [
+  { id: "microsoft" },
+  { id: "github" },
+  { id: "reddit" },
+] as const
+
+const {
+  session: { sessionManager },
+  providers: { KratosProviders },
+  flows: { LoginFlow, RegistrationFlow, SettingsFlow },
+} = mkKratos({
+  queryClient,
+  basePath: environment.authUrl,
+  traits: traitsConfig,
+  oidcProviders: oidcProvidersConfig,
+})
+
+export type OidcProvidersConfig = typeof oidcProvidersConfig
+```
+
+```tsx
+// loginPage.tsx
+
+import { loginFlow } from "@leancodepl/kratos"
+import type { OidcProvidersConfig } from "./kratosService"
+
+// Note: Provider IDs are capitalized (first letter only) in the component names.
+// For example, "github" becomes "Github", "microsoft" becomes "Microsoft".
+function ChooseMethodForm(props: loginFlow.ChooseMethodFormProps<OidcProvidersConfig>) {
+  const { oidcProviders: { Microsoft, Github, Reddit }, isSubmitting, isValidating } = props
+
+  return (
+    <div>
+      {Microsoft && (
+        <Microsoft>
+          <button disabled={isSubmitting || isValidating}>Sign in with Microsoft</button>
+        </Microsoft>
+      )}
+
+      {Github && (
+        <Github>
+          <button disabled={isSubmitting || isValidating}>Sign in with GitHub</button>
+        </Github>
+      )}
+
+      {Reddit && (
+        <Reddit>
+          <button disabled={isSubmitting || isValidating}>Sign in with Reddit</button>
+        </Reddit>
+      )}
+    </div>
+  )
+}
+```
+
+The same pattern applies to registration and settings flows. Only providers configured in your Kratos instance will be available in the `oidcProviders` object, and TypeScript will provide autocomplete and type checking for the available providers.
+
 ### Session Management
 
 ```tsx
@@ -435,6 +529,7 @@ export const Input = ({ errors, ...props }: InputProps) => (
 import { loginFlow } from "@leancodepl/kratos"
 import { LoginFlow, getErrorMessage } from "./kratosService"
 import type { AuthTraitsConfig } from "./traits"
+import type { OidcProvidersConfig } from "./kratosService"
 
 function LoginPage() {
   return (
@@ -445,11 +540,11 @@ function LoginPage() {
   )
 }
 
-function ChooseMethodForm(props: loginFlow.ChooseMethodFormProps) {
-  const { errors, isSubmitting, isValidating } = props
+function ChooseMethodForm(props: loginFlow.ChooseMethodFormProps<OidcProvidersConfig>) {
+  const { errors, isSubmitting, isValidating, oidcProviders: { Google, Apple, Facebook } } = props
 
   if (props.isRefresh) {
-    const { passwordFields, Google, Passkey, Apple, Facebook, identifier } = props
+    const { passwordFields, Passkey, identifier } = props
 
     return (
       <div>
@@ -508,10 +603,7 @@ function ChooseMethodForm(props: loginFlow.ChooseMethodFormProps) {
 
   const {
     passwordFields: { Identifier, Password, Submit },
-    Google,
     Passkey,
-    Apple,
-    Facebook,
   } = props
 
   return (
@@ -528,17 +620,23 @@ function ChooseMethodForm(props: loginFlow.ChooseMethodFormProps) {
         <button>Login</button>
       </Submit>
 
-      <Google>
-        <button>Sign in with Google</button>
-      </Google>
+      {Google && (
+        <Google>
+          <button>Sign in with Google</button>
+        </Google>
+      )}
 
-      <Apple>
-        <button>Sign in with Apple</button>
-      </Apple>
+      {Apple && (
+        <Apple>
+          <button>Sign in with Apple</button>
+        </Apple>
+      )}
 
-      <Facebook>
-        <button>Sign in with Facebook</button>
-      </Facebook>
+      {Facebook && (
+        <Facebook>
+          <button>Sign in with Facebook</button>
+        </Facebook>
+      )}
 
       <Passkey>
         <button>Sign in with Passkey</button>
@@ -561,7 +659,7 @@ function ChooseMethodForm(props: loginFlow.ChooseMethodFormProps) {
 ```tsx
 import { registrationFlow } from "@leancodepl/kratos"
 import { RegistrationFlow, getErrorMessage } from "./kratosService"
-import type { AuthTraitsConfig } from "./traits"
+import type { AuthTraitsConfig, OidcProvidersConfig } from "./kratosService"
 
 function RegisterPage() {
   return (
@@ -575,36 +673,30 @@ function RegisterPage() {
 
 function TraitsForm({
   errors,
-  Email,
-  RegulationsAccepted,
-  GivenName,
-  Google,
-  Apple,
-  Facebook,
+  oidcProviders: { Google, Apple, Facebook },
+  traitFields: { Email, GivenName, RegulationsAccepted, Submit },
   isSubmitting,
   isValidating,
-}: registrationFlow.TraitsFormProps<AuthTraitsConfig>) {
+}: registrationFlow.TraitsFormProps<AuthTraitsConfig, OidcProvidersConfig>) {
   return (
     <div>
-      {Email && (
-        <Email>
-          <input placeholder="Email" />
-        </Email>
-      )}
-      {GivenName && (
-        <GivenName>
-          <input placeholder="First name" />
-        </GivenName>
-      )}
-      {RegulationsAccepted && (
-        <RegulationsAccepted>
-          <input placeholder="Regulations accepted" type="checkbox">
-            I accept the regulations
-          </input>
-        </RegulationsAccepted>
-      )}
+      <Email>
+        <input placeholder="Email" />
+      </Email>
 
-      <button type="submit">Register</button>
+      <GivenName>
+        <input placeholder="First name" />
+      </GivenName>
+
+      <RegulationsAccepted>
+        <input placeholder="Regulations accepted" type="checkbox">
+          I accept the regulations
+        </input>
+      </RegulationsAccepted>
+
+      <Submit>
+        <button>Register</button>
+      </Submit>
 
       {Google && (
         <Google>