@oussemasahbeni/keycloakify-login-shadcn 250004.0.9 → 250004.0.11

package/README.md

@@ -0,0 +1,317 @@
+# Keycloakify Shadcn Starter
+
+A modern, production-ready Keycloak login theme built with React, TypeScript, Tailwind CSS v4, shadcn/ui, and Keycloakify v11.
+
+**npm Package:** [@oussemasahbeni/keycloakify-login-shadcn](https://www.npmjs.com/package/@oussemasahbeni/keycloakify-login-shadcn)
+
+---
+
+## ✨ Features
+
+- 🎨 **Modern UI** - Beautiful, responsive design using Tailwind CSS v4 and shadcn/ui components
+- 🌙 **Dark Mode** - Built-in dark/light/system theme toggle with persistent preferences
+- 🌍 **Multi-language Support** - i18n ready with English, French, and Arabic translations (RTL supported)
+- 📧 **Custom Email Templates** - Styled email templates using jsx-email for all Keycloak events
+- 🔐 **Complete Login Flow** - All 35+ Keycloak login pages fully customized
+- 🎭 **Social Login Providers** - Pre-styled icons for 16+ OAuth providers (Google, GitHub, Microsoft, etc.)
+- 📖 **Storybook Integration** - Visual testing and documentation for all components
+- ⚡ **Vite Powered** - Fast development with HMR and optimized builds
+- 🔧 **Type-Safe** - Full TypeScript support throughout the codebase
+
+---
+
+## 🚀 Quick Start with npm
+
+Get started quickly by using the published npm package in your own project.
+
+### Step 1: Create a new Vite + React + TypeScript project
+
+```bash
+pnpm create vite
+```
+
+When prompted:
+
+- **Project name:** `keycloak-theme` (or your preferred name)
+- **Select a framework:** Choose **React**
+- **Select a variant:** Choose **TypeScript**
+
+```bash
+cd keycloak-theme
+```
+
+### Step 2: Install dependencies
+
+```bash
+pnpm add keycloakify @oussemasahbeni/keycloakify-login-shadcn
+pnpm install
+```
+
+### Step 3: Initialize Keycloakify
+
+```bash
+npx keycloakify init
+```
+
+When prompted:
+
+- **Which theme type would you like to initialize?** Select **(x) login**
+- **Do you want to install the Stories?** Select **(x) Yes (Recommended)**
+
+### Step 4: Configure Vite
+
+Update your `vite.config.ts` to include Tailwind CSS, path aliases, and the Keycloakify plugin:
+
+```typescript
+import react from "@vitejs/plugin-react";
+import { keycloakify } from "keycloakify/vite-plugin";
+import { defineConfig } from "vite";
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [
+        react(),
+        tailwindcss(),
+        keycloakify({
+            accountThemeImplementation: "none"
+        })
+    ],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src")
+        }
+    }
+});
+```
+
+### Step 5: Configure TypeScript paths
+
+Add the path alias to your `tsconfig.app.json`:
+
+```json
+{
+    "compilerOptions": {
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    }
+}
+```
+
+### Step 6: Run Storybook and build
+
+```bash
+# Run Storybook for component development and testing
+pnpm storybook
+
+# Build the Keycloak theme JAR file
+pnpm build-keycloak-theme
+```
+
+That's it! You now have a fully functional Keycloak login theme using the published package.
+
+---
+
+## 🛠️ Development (for contributors)
+
+If you want to clone this repository and develop/customize the theme locally:
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm (or npm/yarn)
+- [Maven](https://maven.apache.org/) (for building the theme JAR)
+
+### Clone and Install
+
+```bash
+# Clone the repository
+git clone https://github.com/Oussemasahbeni/keycloakify-shadcn-starter.git
+cd keycloakify-shadcn-starter
+
+# Install dependencies
+pnpm install
+```
+
+### Development Commands
+
+```bash
+# Start development server with hot reload
+pnpm dev
+
+# Run Storybook for component development
+pnpm storybook
+
+# Preview email templates
+pnpm emails:preview
+
+# Build the Keycloak theme JAR
+pnpm build-keycloak-theme
+```
+
+---
+
+## 🖼️ Supported Pages
+
+This theme includes custom implementations for all Keycloak login pages:
+
+| Authentication      | Account Management  | Security              |
+| ------------------- | ------------------- | --------------------- |
+| Login               | Register            | WebAuthn Authenticate |
+| Login with Username | Update Profile      | WebAuthn Register     |
+| Login with Password | Update Email        | Configure TOTP        |
+| Login OTP           | Delete Account      | Recovery Codes        |
+| Login with Passkeys | Logout Confirm      | Reset OTP             |
+| OAuth Grant         | Terms & Conditions  | X509 Info             |
+| Device Verification | Select Organization | Delete Credential     |
+
+---
+
+### Branding
+
+1. **Logo**: Replace `src/login/assets/img/auth-logo.svg` with your company logo
+2. **Colors**: Modify CSS variables in `src/login/index.css`
+3. **Fonts**: Update font imports in `src/login/assets/fonts/`
+
+### Internationalization
+
+Add or modify translations in `src/login/i18n.ts`:
+
+```typescript
+.withCustomTranslations({
+    en: {
+        welcomeMessage: "Welcome to Your App",
+        loginAccountTitle: "Login to your account",
+        // ... more translations
+    },
+    fr: { /* French translations */ },
+    ar: { /* Arabic translations */ }
+})
+```
+
+### UI Components
+
+The theme uses shadcn/ui components located in `src/components/ui/`:
+
+- `alert.tsx` - Alert messages
+- `button.tsx` - Buttons with variants
+- `card.tsx` - Card containers
+- `checkbox.tsx` - Checkbox inputs
+- `input.tsx` - Text inputs
+- `label.tsx` - Form labels
+- `dropdown-menu.tsx` - Dropdown menus
+- `radio-group.tsx` - Radio button groups
+- `tooltip.tsx` - Tooltips
+
+---
+
+## 📧 Email Templates
+
+Custom email templates are built with [jsx-email](https://jsx.email/) and support multiple languages.
+
+### Available Templates
+
+| Template                     | Description                     |
+| ---------------------------- | ------------------------------- |
+| `email-verification.tsx`     | Email verification              |
+| `password-reset.tsx`         | Password reset link             |
+| `executeActions.tsx`         | Required actions                |
+| `identity-provider-link.tsx` | IDP linking                     |
+| `org-invite.tsx`             | Organization invitation         |
+| `event-login_error.tsx`      | Login error notification        |
+| `event-update_password.tsx`  | Password change notification    |
+| `event-update_totp.tsx`      | TOTP configuration notification |
+| And more...                  |                                 |
+
+### Preview Emails Locally
+
+```bash
+pnpm emails:preview
+```
+
+### Email Locales
+
+Translations are in `src/email/locales/{locale}/translation.json`:
+
+- `en/` - English
+- `fr/` - French
+- `ar/` - Arabic
+
+---
+
+## 🔨 Building for Production
+
+### Install Maven
+
+Required for building the Keycloak theme JAR file.
+
+- **macOS**: `brew install maven`
+- **Ubuntu/Debian**: `sudo apt-get install maven`
+- **Windows**: `choco install openjdk && choco install maven`
+
+### Build the Theme
+
+```bash
+pnpm build-keycloak-theme
+```
+
+The built theme will be output as a `.jar` file in the `dist_keycloak/` directory.
+
+### Deploy to Keycloak
+
+1. Copy the `.jar` file to your Keycloak's `providers/` directory
+2. Restart Keycloak
+3. Go to Keycloak Admin Console → **Realm Settings** → **Themes**
+4. Select your custom theme from the dropdown
+
+---
+
+## 🧪 Testing
+
+### Storybook
+
+Run Storybook for visual testing and component documentation:
+
+```bash
+pnpm storybook
+```
+
+### Local Keycloak Testing
+
+For local testing with a Keycloak instance, see the [Keycloakify documentation](https://docs.keycloakify.dev/testing-your-theme).
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+---
+
+## 📄 License
+
+This project is licensed under the MIT License.
+
+---
+
+## 🙏 Acknowledgments
+
+- [Keycloakify](https://keycloakify.dev) - For making Keycloak theming with React possible
+- [shadcn/ui](https://ui.shadcn.com) - For the beautiful UI components
+- [Tailwind CSS](https://tailwindcss.com) - For the utility-first CSS framework
+- [jsx-email](https://jsx.email) - For React email templates
+
+---
+
+## 📦 Package Information
+
+**npm:** [@oussemasahbeni/keycloakify-login-shadcn](https://www.npmjs.com/package/@oussemasahbeni/keycloakify-login-shadcn)  
+**GitHub:** [Oussemasahbeni/keycloakify-shadcn-starter](https://github.com/Oussemasahbeni/keycloakify-shadcn-starter)

package/keycloak-theme/login/components/Template/Template.tsx

@@ -83,7 +83,7 @@ export function Template(props: {
             <div className="flex flex-col gap-4 px-0 py-0 pb-6 lg:p-6 lg:md:p-10 lg:pt-10 min-h-screen lg:min-h-0">
                 {/*  navigation */}
                 <div className="absolute top-4 right-4 lg:left-4  z-20 flex gap-2">
-                    <Button variant="outline" size="icon">
+                    <Button type="button" variant="outline" size="icon" asChild>
                         <a href={kcContext.client.baseUrl ?? redirectUrlOrigin}>
                             <FiHome />
                         </a>

package/keycloak-theme/login/components/Template/useInitializeTemplate.ts

@@ -1,36 +1,20 @@
-import { useEffect } from "react";
-import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
 import { useInsertLinkTags } from "@keycloakify/login-ui/tools/useInsertLinkTags";
-import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
+import { useEffect } from "react";
 import { BASE_URL } from "../../../kc.gen";
 import { useKcContext } from "../../KcContext";
 
 export function useInitializeTemplate() {
     const { kcContext } = useKcContext();
 
-    const { doUseDefaultCss } = useKcClsx();
-
     const { areAllStyleSheetsLoaded } = useInsertLinkTags({
         effectId: "Template",
-        hrefs: !doUseDefaultCss
-            ? []
-            : [
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/@patternfly/patternfly/patternfly.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/patternfly/dist/css/patternfly.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/lib/pficon/pficon.css`,
-                  `${BASE_URL}keycloak-theme/login/css/login.css`
-              ]
+        hrefs: []
     });
 
     const { insertScriptTags } = useInsertScriptTags({
         effectId: "Template",
         scriptTags: [
-            // NOTE: The importmap is added in by the FTL script because it's too late to add it here.
-            {
-                type: "module",
-                src: `${BASE_URL}keycloak-theme/login/js/menu-button-links.js`
-            },
             ...(kcContext.scripts === undefined
                 ? []
                 : kcContext.scripts.map(src => ({

package/keycloak-theme/login/pages/register/Form.tsx

@@ -61,8 +61,8 @@ export function Form() {
                 )}
             <div className={kcClsx("kcFormGroupClass")}>
                 {kcContext.recaptchaRequired &&
-                !kcContext.recaptchaVisible &&
-                kcContext.recaptchaAction !== undefined ? (
+                    !kcContext.recaptchaVisible &&
+                    kcContext.recaptchaAction !== undefined ? (
                     <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                         <button
                             className={clsx(
@@ -98,7 +98,7 @@ export function Form() {
             </div>
 
             <div className=" flex justify-end">
-                <Button variant="ghost">
+                <Button type="button" variant="ghost">
                     <a href={kcContext.url.loginUrl}>{msg("backToLogin")}</a>
                 </Button>
             </div>

package/keycloak-theme/public/keycloak-theme/login/js/authChecker.js

@@ -0,0 +1,95 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/login-ui version 250004.6.5.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ * 
+ * $ npx keycloakify own --path "login/js/authChecker.js" --public --revert
+ */
+
+
+
+const SESSION_POLLING_INTERVAL = 2000;
+const AUTH_SESSION_TIMEOUT_MILLISECS = 1000;
+const initialSession = getSession();
+const forms = Array.from(document.forms);
+let timeout;
+
+// Stop polling for a session when a form is submitted to prevent unexpected redirects.
+// This is required as Safari does not support the 'beforeunload' event properly.
+// See: https://bugs.webkit.org/show_bug.cgi?id=219102
+forms.forEach((form) =>
+  form.addEventListener("submit", () => stopSessionPolling()),
+);
+
+// Stop polling for a session when the page is unloaded to prevent unexpected redirects.
+globalThis.addEventListener("beforeunload", () => stopSessionPolling());
+
+/**
+ * Starts polling to check if a new session was started in another context (e.g. a tab or window), and redirects to the specified URL if a session is detected.
+ * @param {string} redirectUrl - The URL to redirect to if a new session is detected.
+ */
+export function startSessionPolling(redirectUrl) {
+  if (initialSession) {
+    // We started with a session, so there is nothing to do, exit.
+    return;
+  }
+
+  const session = getSession();
+
+  if (!session) {
+    // No new session detected, check again later.
+    timeout = setTimeout(
+      () => startSessionPolling(redirectUrl),
+      SESSION_POLLING_INTERVAL,
+    );
+  } else {
+    // A new session was detected, redirect to the specified URL and stop polling.
+    location.href = redirectUrl;
+    stopSessionPolling();
+  }
+}
+
+/**
+ * Stops polling the session.
+ */
+function stopSessionPolling() {
+  if (timeout) {
+    clearTimeout(timeout);
+    timeout = undefined;
+  }
+}
+
+export function checkAuthSession(pageAuthSessionHash) {
+  setTimeout(() => {
+    const cookieAuthSessionHash = getKcAuthSessionHash();
+    if (
+      cookieAuthSessionHash &&
+      cookieAuthSessionHash !== pageAuthSessionHash
+    ) {
+      location.reload();
+    }
+  }, AUTH_SESSION_TIMEOUT_MILLISECS);
+}
+
+function getKcAuthSessionHash() {
+  return getCookieByName("KC_AUTH_SESSION_HASH");
+}
+
+function getSession() {
+  return getCookieByName("KEYCLOAK_SESSION");
+}
+
+function getCookieByName(name) {
+  for (const cookie of document.cookie.split(";")) {
+    const [key, value] = cookie.split("=").map((value) => value.trim());
+    if (key === name) {
+      return value.startsWith('"') && value.endsWith('"')
+        ? value.slice(1, -1)
+        : value;
+    }
+  }
+  return null;
+}
+
+
+    
+    

package/keycloak-theme/public/keycloak-theme/login/js/passkeysConditionalAuth.js

@@ -0,0 +1,86 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/login-ui version 250004.6.5.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ * 
+ * $ npx keycloakify own --path "login/js/passkeysConditionalAuth.js" --public --revert
+ */
+
+import { base64url } from "./rfc4648.js";
+import { returnSuccess, returnFailure } from "./webauthnAuthenticate.js";
+
+export function initAuthenticate(input) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(input.errmsg);
+        return;
+    }
+    if (input.isUserIdentified || typeof PublicKeyCredential.isConditionalMediationAvailable === "undefined") {
+        document.getElementById("kc-form-passkey-button").style.display = 'block';
+    } else {
+        tryAutoFillUI(input);
+    }
+}
+
+function doAuthenticate(input) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(input.errmsg);
+        return;
+    }
+
+    const publicKey = {
+        rpId : input.rpId,
+        challenge: base64url.parse(input.challenge, { loose: true })
+    };
+
+    publicKey.allowCredentials = !input.isUserIdentified ? [] : getAllowCredentials();
+
+    if (input.createTimeout !== 0) {
+        publicKey.timeout = input.createTimeout * 1000;
+    }
+
+    if (input.userVerification !== 'not specified') {
+        publicKey.userVerification = input.userVerification;
+    }
+
+    return navigator.credentials.get({
+        publicKey: publicKey,
+        ...input.additionalOptions
+    });
+}
+
+async function tryAutoFillUI(input) {
+    const isConditionalMediationAvailable = await PublicKeyCredential.isConditionalMediationAvailable();
+    if (isConditionalMediationAvailable) {
+        document.getElementById("kc-form-login").style.display = "block";
+        input.additionalOptions = { mediation: 'conditional'};
+        try {
+            const result = await doAuthenticate(input);
+            returnSuccess(result);
+        } catch (error) {
+            returnFailure(error);
+        }
+    } else {
+        document.getElementById("kc-form-passkey-button").style.display = 'block';
+    }
+}
+
+function getAllowCredentials() {
+    const allowCredentials = [];
+    const authnUse = document.forms['authn_select'].authn_use_chk;
+    if (authnUse !== undefined) {
+        if (authnUse.length === undefined) {
+            allowCredentials.push({
+                id: base64url.parse(authnUse.value, {loose: true}),
+                type: 'public-key',
+            });
+        } else {
+            authnUse.forEach((entry) =>
+                allowCredentials.push({
+                    id: base64url.parse(entry.value, {loose: true}),
+                    type: 'public-key',
+                }));
+        }
+    }
+    return allowCredentials;
+}

package/keycloak-theme/public/keycloak-theme/login/js/rfc4648.js

@@ -0,0 +1,185 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/login-ui version 250004.6.5.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ * 
+ * $ npx keycloakify own --path "login/js/rfc4648.js" --public --revert
+ */
+
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+function parse(string, encoding, opts) {
+  var _opts$out;
+
+  if (opts === void 0) {
+    opts = {};
+  }
+
+  // Build the character lookup table:
+  if (!encoding.codes) {
+    encoding.codes = {};
+
+    for (var i = 0; i < encoding.chars.length; ++i) {
+      encoding.codes[encoding.chars[i]] = i;
+    }
+  } // The string must have a whole number of bytes:
+
+
+  if (!opts.loose && string.length * encoding.bits & 7) {
+    throw new SyntaxError('Invalid padding');
+  } // Count the padding bytes:
+
+
+  var end = string.length;
+
+  while (string[end - 1] === '=') {
+    --end; // If we get a whole number of bytes, there is too much padding:
+
+    if (!opts.loose && !((string.length - end) * encoding.bits & 7)) {
+      throw new SyntaxError('Invalid padding');
+    }
+  } // Allocate the output:
+
+
+  var out = new ((_opts$out = opts.out) != null ? _opts$out : Uint8Array)(end * encoding.bits / 8 | 0); // Parse the data:
+
+  var bits = 0; // Number of bits currently in the buffer
+
+  var buffer = 0; // Bits waiting to be written out, MSB first
+
+  var written = 0; // Next byte to write
+
+  for (var _i = 0; _i < end; ++_i) {
+    // Read one character from the string:
+    var value = encoding.codes[string[_i]];
+
+    if (value === undefined) {
+      throw new SyntaxError('Invalid character ' + string[_i]);
+    } // Append the bits to the buffer:
+
+
+    buffer = buffer << encoding.bits | value;
+    bits += encoding.bits; // Write out some bits if the buffer has a byte's worth:
+
+    if (bits >= 8) {
+      bits -= 8;
+      out[written++] = 0xff & buffer >> bits;
+    }
+  } // Verify that we have received just enough bits:
+
+
+  if (bits >= encoding.bits || 0xff & buffer << 8 - bits) {
+    throw new SyntaxError('Unexpected end of data');
+  }
+
+  return out;
+}
+function stringify(data, encoding, opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
+
+  var _opts = opts,
+      _opts$pad = _opts.pad,
+      pad = _opts$pad === void 0 ? true : _opts$pad;
+  var mask = (1 << encoding.bits) - 1;
+  var out = '';
+  var bits = 0; // Number of bits currently in the buffer
+
+  var buffer = 0; // Bits waiting to be written out, MSB first
+
+  for (var i = 0; i < data.length; ++i) {
+    // Slurp data into the buffer:
+    buffer = buffer << 8 | 0xff & data[i];
+    bits += 8; // Write out as much as we can:
+
+    while (bits > encoding.bits) {
+      bits -= encoding.bits;
+      out += encoding.chars[mask & buffer >> bits];
+    }
+  } // Partial character:
+
+
+  if (bits) {
+    out += encoding.chars[mask & buffer << encoding.bits - bits];
+  } // Add padding characters until we hit a byte boundary:
+
+
+  if (pad) {
+    while (out.length * encoding.bits & 7) {
+      out += '=';
+    }
+  }
+
+  return out;
+}
+
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+var base16Encoding = {
+  chars: '0123456789ABCDEF',
+  bits: 4
+};
+var base32Encoding = {
+  chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567',
+  bits: 5
+};
+var base32HexEncoding = {
+  chars: '0123456789ABCDEFGHIJKLMNOPQRSTUV',
+  bits: 5
+};
+var base64Encoding = {
+  chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
+  bits: 6
+};
+var base64UrlEncoding = {
+  chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_',
+  bits: 6
+};
+var base16 = {
+  parse: function parse$1(string, opts) {
+    return parse(string.toUpperCase(), base16Encoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base16Encoding, opts);
+  }
+};
+var base32 = {
+  parse: function parse$1(string, opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
+
+    return parse(opts.loose ? string.toUpperCase().replace(/0/g, 'O').replace(/1/g, 'L').replace(/8/g, 'B') : string, base32Encoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base32Encoding, opts);
+  }
+};
+var base32hex = {
+  parse: function parse$1(string, opts) {
+    return parse(string, base32HexEncoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base32HexEncoding, opts);
+  }
+};
+var base64 = {
+  parse: function parse$1(string, opts) {
+    return parse(string, base64Encoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base64Encoding, opts);
+  }
+};
+var base64url = {
+  parse: function parse$1(string, opts) {
+    return parse(string, base64UrlEncoding, opts);
+  },
+  stringify: function stringify$1(data, opts) {
+    return stringify(data, base64UrlEncoding, opts);
+  }
+};
+var codec = {
+  parse: parse,
+  stringify: stringify
+};
+
+export { base16, base32, base32hex, base64, base64url, codec };

package/keycloak-theme/public/keycloak-theme/login/js/webauthnAuthenticate.js

@@ -0,0 +1,113 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/login-ui version 250004.6.5.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ * 
+ * $ npx keycloakify own --path "login/js/webauthnAuthenticate.js" --public --revert
+ */
+
+
+    
+import { base64url } from "./rfc4648.js";
+
+// singleton
+let abortController = undefined;
+
+export function signal() {
+    if (abortController) {
+        // abort the previous call
+        const abortError = new Error("Cancelling pending WebAuthn call");
+        abortError.name = "AbortError";
+        abortController.abort(abortError);
+    }
+
+    abortController = new AbortController();
+    return abortController.signal;
+}
+
+export async function authenticateByWebAuthn(input) {
+    if (!input.isUserIdentified) {
+        try {
+            const result = await doAuthenticate([], input.challenge, input.userVerification, input.rpId, input.createTimeout, input.errmsg);
+            returnSuccess(result);
+        } catch (error) {
+            returnFailure(error);
+        }
+        return;
+    }
+    checkAllowCredentials(input.challenge, input.userVerification, input.rpId, input.createTimeout, input.errmsg);
+}
+
+async function checkAllowCredentials(challenge, userVerification, rpId, createTimeout, errmsg) {
+    const allowCredentials = [];
+    const authnUse = document.forms['authn_select'].authn_use_chk;
+    if (authnUse !== undefined) {
+        if (authnUse.length === undefined) {
+            allowCredentials.push({
+                id: base64url.parse(authnUse.value, {loose: true}),
+                type: 'public-key',
+            });
+        } else {
+            authnUse.forEach((entry) =>
+                allowCredentials.push({
+                    id: base64url.parse(entry.value, {loose: true}),
+                    type: 'public-key',
+                }));
+        }
+    }
+    try {
+        const result = await doAuthenticate(allowCredentials, challenge, userVerification, rpId, createTimeout, errmsg);
+        returnSuccess(result);
+    } catch (error) {
+        returnFailure(error);
+    }
+}
+
+function doAuthenticate(allowCredentials, challenge, userVerification, rpId, createTimeout, errmsg) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(errmsg);
+        return;
+    }
+
+    const publicKey = {
+        rpId : rpId,
+        challenge: base64url.parse(challenge, { loose: true })
+    };
+
+    if (createTimeout !== 0) {
+        publicKey.timeout = createTimeout * 1000;
+    }
+
+    if (allowCredentials.length) {
+        publicKey.allowCredentials = allowCredentials;
+    }
+
+    if (userVerification !== 'not specified') {
+        publicKey.userVerification = userVerification;
+    }
+
+    return navigator.credentials.get({
+        publicKey: publicKey,
+        signal: signal()
+    });
+}
+
+export function returnSuccess(result) {
+    document.getElementById("clientDataJSON").value = base64url.stringify(new Uint8Array(result.response.clientDataJSON), { pad: false });
+    document.getElementById("authenticatorData").value = base64url.stringify(new Uint8Array(result.response.authenticatorData), { pad: false });
+    document.getElementById("signature").value = base64url.stringify(new Uint8Array(result.response.signature), { pad: false });
+    document.getElementById("credentialId").value = result.id;
+    if (result.response.userHandle) {
+        document.getElementById("userHandle").value = base64url.stringify(new Uint8Array(result.response.userHandle), { pad: false });
+    }
+    document.getElementById("webauth").requestSubmit();
+}
+
+export function returnFailure(err) {
+    document.getElementById("error").value = err;
+    document.getElementById("webauth").requestSubmit();
+}
+
+    
+    
+    

package/keycloak-theme/public/keycloak-theme/login/js/webauthnRegister.js

@@ -0,0 +1,153 @@
+/**
+ * This file has been claimed for ownership from @keycloakify/login-ui version 250004.6.5.
+ * To relinquish ownership and restore this file to its original content, run the following command:
+ * 
+ * $ npx keycloakify own --path "login/js/webauthnRegister.js" --public --revert
+ */
+
+
+
+import { base64url } from "./rfc4648.js";
+
+export async function registerByWebAuthn(input) {
+
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(input.errmsg);
+        return;
+    }
+
+    const publicKey = {
+        challenge: base64url.parse(input.challenge, {loose: true}),
+        rp: {id: input.rpId, name: input.rpEntityName},
+        user: {
+            id: base64url.parse(input.userid, {loose: true}),
+            name: input.username,
+            displayName: input.username
+        },
+        pubKeyCredParams: getPubKeyCredParams(input.signatureAlgorithms),
+    };
+
+    if (input.attestationConveyancePreference !== 'not specified') {
+        publicKey.attestation = input.attestationConveyancePreference;
+    }
+
+    const authenticatorSelection = {};
+    let isAuthenticatorSelectionSpecified = false;
+
+    if (input.authenticatorAttachment !== 'not specified') {
+        authenticatorSelection.authenticatorAttachment = input.authenticatorAttachment;
+        isAuthenticatorSelectionSpecified = true;
+    }
+
+    if (input.requireResidentKey !== 'not specified') {
+        if (input.requireResidentKey === 'Yes') {
+            authenticatorSelection.requireResidentKey = true;
+        } else {
+            authenticatorSelection.requireResidentKey = false;
+        }
+        isAuthenticatorSelectionSpecified = true;
+    }
+
+    if (input.userVerificationRequirement !== 'not specified') {
+        authenticatorSelection.userVerification = input.userVerificationRequirement;
+        isAuthenticatorSelectionSpecified = true;
+    }
+
+    if (isAuthenticatorSelectionSpecified) {
+        publicKey.authenticatorSelection = authenticatorSelection;
+    }
+
+    if (input.createTimeout !== 0) {
+        publicKey.timeout = input.createTimeout * 1000;
+    }
+
+    const excludeCredentials = getExcludeCredentials(input.excludeCredentialIds);
+    if (excludeCredentials.length > 0) {
+        publicKey.excludeCredentials = excludeCredentials;
+    }
+
+    try {
+        const result = await doRegister(publicKey);
+        returnSuccess(result, input.initLabel, input.initLabelPrompt);
+    } catch (error) {
+        returnFailure(error);
+    }
+}
+
+function doRegister(publicKey) {
+    return navigator.credentials.create({publicKey});
+}
+
+function getPubKeyCredParams(signatureAlgorithmsList) {
+    const pubKeyCredParams = [];
+    if (signatureAlgorithmsList.length === 0) {
+        pubKeyCredParams.push({type: "public-key", alg: -7});
+        return pubKeyCredParams;
+    }
+
+    for (const entry of signatureAlgorithmsList) {
+        pubKeyCredParams.push({
+            type: "public-key",
+            alg: entry
+        });
+    }
+
+    return pubKeyCredParams;
+}
+
+function getExcludeCredentials(excludeCredentialIds) {
+    const excludeCredentials = [];
+    if (excludeCredentialIds === "") {
+        return excludeCredentials;
+    }
+
+    for (const entry of excludeCredentialIds.split(',')) {
+        excludeCredentials.push({
+            type: "public-key",
+            id: base64url.parse(entry, {loose: true})
+        });
+    }
+
+    return excludeCredentials;
+}
+
+function getTransportsAsString(transportsList) {
+    if (!Array.isArray(transportsList)) {
+        return "";
+    }
+
+    return transportsList.join();
+}
+
+function returnSuccess(result, initLabel, initLabelPrompt) {
+    document.getElementById("clientDataJSON").value = base64url.stringify(new Uint8Array(result.response.clientDataJSON), {pad: false});
+    document.getElementById("attestationObject").value = base64url.stringify(new Uint8Array(result.response.attestationObject), {pad: false});
+    document.getElementById("publicKeyCredentialId").value = base64url.stringify(new Uint8Array(result.rawId), {pad: false});
+
+    if (typeof result.response.getTransports === "function") {
+        const transports = result.response.getTransports();
+        if (transports) {
+            document.getElementById("transports").value = getTransportsAsString(transports);
+        }
+    } else {
+        console.log("Your browser is not able to recognize supported transport media for the authenticator.");
+    }
+
+    let labelResult = window.prompt(initLabelPrompt, initLabel);
+    if (labelResult === null) {
+        labelResult = initLabel;
+    }
+    document.getElementById("authenticatorLabel").value = labelResult;
+
+    document.getElementById("register").requestSubmit();
+}
+
+function returnFailure(err) {
+    document.getElementById("error").value = err;
+    document.getElementById("register").requestSubmit();
+}
+
+
+    
+    

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oussemasahbeni/keycloakify-login-shadcn",
-  "version": "250004.0.9",
+  "version": "250004.0.11",
   "description": "Keycloakify Shadcn Theme extensions",
   "license": "MIT",
   "repository": {