docs(docs): 📝 Updated KeyCloak docs

Author: itpropro

docs/app/components/content/contentImage.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 interface Props {
   src: string
-  preset?: string | null
   fit?: 'cover' | 'contain' | 'fill' | 'inside' | 'outside'
   alt?: string
   title?: string
@@ -11,17 +10,56 @@ withDefaults(defineProps<Props>(), {
   fit: 'cover',
   alt: '',
 })
+
+const popoverId = useId()
+const contentId = useId()
+const imagePopover = ref<HTMLDialogElement | null>(null)
+const imagecontent = ref<HTMLDialogElement | null>(null)
+
+onMounted(() => {
+  imagePopover.value = document.getElementById(popoverId) as HTMLDialogElement
+  imagecontent.value = document.getElementById(contentId) as HTMLDialogElement
+  onClickOutside(imagecontent, _event => closeModal())
+})
+
+function closeModal() {
+  imagePopover.value?.hidePopover()
+}
 </script>
 
 <template>
-  <img
-    :alt="alt"
-    :src="src"
-    :preset="preset || null"
-    fit="fill"
-    class="mb-2 rounded-lg transition-[filter] dark:brightness-75 dark:hover:brightness-100 shadow-lg mx-auto max-h-[500px]"
-  >
-  <p v-if="alt || title" class="text-center mt-0 opacity-70">
-    {{ title || alt }}
-  </p>
+  <div class="flex justify-center">
+    <button :popovertarget="popoverId">
+      <NuxtImg
+        :alt="alt"
+        :src="src"
+        fit="fill"
+        sizes="100vw sm:50vw md:400px"
+        class="mb-2 rounded-lg transition-[filter] dark:brightness-75 dark:hover:brightness-100 shadow-lg max-h-[500px]"
+      />
+      <p v-if="alt || title" class="text-center mt-0 opacity-70">
+        {{ title || alt }}
+      </p>
+    </button>
+    <div :id="popoverId" popover="auto" class="transition-opacity ease-out transition-discrete h-full w-full bg-transparent p-0 justify-center place-items-center opacity-0 popover-open:grid popover-open:opacity-100 backdrop-blur-lg starting:popover-open:opacity-0">
+      <div :id="contentId" class="max-w-[80%]">
+        <div class="flex justify-between h-10 px-3 py-2 items-center mx-auto">
+          <span class="text-xl font-bold">{{ title || alt }}</span>
+          <button
+            popovertarget="unocss-popover"
+            class="size-6"
+            @click="closeModal"
+          >
+            <UIcon name="i-carbon-close-outline" size="1.5rem" />
+            <span class="sr-only">Close</span>
+          </button>
+        </div>
+        <img
+          :alt="alt"
+          :src="src"
+          class="mt-2 rounded-lg shadow-lg max-h-screen"
+        >
+      </div>
+    </div>
+  </div>
 </template>

docs/content/2.provider/1.index.md

@@ -11,7 +11,7 @@ Nuxt OIDC Auth includes presets for the following providers with tested default
 - [AWS Cognito](/provider/aws-cognito)
 - [Entra ID/Microsoft](/provider/entra)
 - [GitHub](/provider/github)
-- [Keycloak](/provider/keycloak)
+- [KeyCloak](/provider/keycloak)
 - [PayPal](/provider/paypal)
 - [Zitadel](/provider/zitadel)
 - [Generic OIDC](/provider/oidc)

docs/content/2.provider/auth0.md renamed to docs/content/2.provider/2.auth0.md

@@ -1,6 +1,6 @@
 ---
-title: Keycloak
-description: Keycloak provider documentation
+title: KeyCloak
+description: KeyCloak provider documentation
 icon: i-simple-icons-keycloak
 ---
 
@@ -14,29 +14,32 @@ icon: i-simple-icons-keycloak
 
 ## Introduction
 
-## Provider specific parameters
+KeyCloak is an open-source identity and access management solution that provides features like single sign-on (SSO), social login, and user management, making it a popular choice for securing applications. This provider has tested defaults for KeyCloak to offer seamless OpenID Connect (OIDC) authentication with minimal necessary configuration.
 
-Additional parameters to be used in additionalAuthParameters,
- additionalTokenParameters or additionalLogoutParameters:
+## Example Configurations
 
-| Option | Type | Default | Description |
-|---|---|---|---|
-| realm | `string` | - | Optional. This parameter allows to slightly customize the login flow on the Keycloak server side. For example, enforce displaying the login screen in case of value login. |
-| realm | `string` | - | Optional. Used to pre-fill the username/email field on the login form. |
-| realm | `string` | - | Optional. Used to tell Keycloak to skip showing the login page and automatically redirect to the specified identity provider instead. |
-| realm | `string` | - | Optional. Sets the 'ui_locales' query param. |
+::callout{icon="i-carbon-warning-alt" color="amber"}
+Never store sensitive values like your client secret in your Nuxt config. Our recommendation is to inject at least client id and client secret via. environment variables.
+::
 
-For more information on these parameters, check the [KeyCloak documentation](https://www.keycloak.org/docs/latest/securing_apps/#methods).
+### Minimal
 
-For Keycloak you have to provide at least the `baseUrl`, `clientId` and `clientSecret` properties. The `baseUrl` is used to dynamically create the `authorizationUrl`, `tokenUrl`, `logoutUrl` and `userInfoUrl`.
-Please include the realm you want to use in the `baseUrl` (e.g. `https://<keycloak-url>/realms/<realm>`).
-If you don't want to use the post logout redirect feature of key cloak, set `logoutUrl` to `undefined` or `''`.
-Also remember to enable `Client authentication` to be able to get a client secret.
+```typescript [nuxt.config.ts]
+keycloak: {
+  audience: 'account',
+  baseUrl: '',
+  clientId: '',
+  clientSecret: '',
+  redirectUri: 'http://localhost:3000/auth/keycloak/callback',
+},
+```
 
-## Example Configuration
+### Use logout url
 
-::callout{icon="i-carbon-warning-alt" color="amber"}
-Never store sensitive values like your client secret in your Nuxt config. Our recommendation is to inject at least client id and client secret via. environment variables.
+The to redirect to a specific url after logout, use the `logoutRedirectUri` configuration.
+You have to specifically allow a redirect uri, if you want your application to redirect to there after logout:
+
+::contentImage{src="/content/keycloak-logoutredirect.png" alt="KeyCloak logout redirect"}
 ::
 
 ```typescript [nuxt.config.ts]
@@ -47,9 +50,15 @@ keycloak: {
   clientSecret: '',
   redirectUri: 'http://localhost:3000/auth/keycloak/callback',
   userNameClaim: 'preferred_username',
+  logoutRedirectUri: 'http://localhost:3000',  // Target of your post logout redirection
 },
 ```
 
+By default, the following settings are already set internall, but can be overwritten, if needed
+
+- `logoutUrl`: `protocol/openid-connect/logout`,
+- `logoutRedirectParameterName`: `post_logout_redirect_uri`,
+
 ### Environment variables
 
 Dotenv files are only for (local) development. Use a proper configuration management or injection system in production.
@@ -59,3 +68,21 @@ NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET=CLIENT_SECRET
 NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID=CLIENT_ID
 NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL=http://localhost:8080/realms/nuxt-oidc-test
 ```
+
+## Provider specific parameters
+
+Additional parameters to be used in additionalAuthParameters, additionalTokenParameters or additionalLogoutParameters:
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| realm | `string` | - | Optional. This parameter allows to slightly customize the login flow on the KeyCloak server side. For example, enforce displaying the login screen in case of value login. |
+| realm | `string` | - | Optional. Used to pre-fill the username/email field on the login form. |
+| realm | `string` | - | Optional. Used to tell KeyCloak to skip showing the login page and automatically redirect to the specified identity provider instead. |
+| realm | `string` | - | Optional. Sets the 'ui_locales' query param. |
+
+For more information on these parameters, check the [KeyCloak documentation](https://www.keycloak.org/docs/latest/securing_apps/#methods).
+
+For KeyCloak you have to provide at least the `baseUrl`, `clientId` and `clientSecret` properties. The `baseUrl` is used to dynamically create the `authorizationUrl`, `tokenUrl`, `logoutUrl` and `userInfoUrl`.
+Please include the realm you want to use in the `baseUrl` (e.g. `https://<keycloak-url>/realms/<realm>`).
+If you don't want to use the post logout redirect feature of key cloak, set `logoutUrl` to `undefined` or `''`.
+Also remember to enable `Client authentication` to be able to get a client secret.

docs/content/2.provider/aws-cognito.md renamed to docs/content/2.provider/3.aws-cognito.md

@@ -64,10 +64,9 @@ export default defineNuxtConfig({
     clientBundle: {
       scan: true,
     },
-    serverBundle: false,
-    /*     {
-      collections: ['simple-icons', 'carbon'],
-    }, */
+    serverBundle: {
+      collections: ['simple-icons', 'carbon', 'heroicons'],
+    },
   },
 
   site: {

docs/content/2.provider/entra.md renamed to docs/content/2.provider/4.entra.md

@@ -9,7 +9,8 @@
     "dev": "nuxi dev",
     "generate": "nuxi generate",
     "build": "set NODE_OPTIONS=--disable-warning=DEP0155 --disable-warning=DEP0166 && nuxi build",
-    "preview": "nuxi preview"
+    "preview": "nuxi preview",
+    "swadeploy": "dotenv -- swa deploy .output/public --api-location .output/server --api-language \"node\" --api-version \"20\" --env production"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.2.1",
@@ -27,7 +28,9 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",
+    "@azure/static-web-apps-cli": "^2.0.1",
     "@nuxt/eslint": "^0.5.7",
+    "dotenv-cli": "^7.4.2",
     "eslint": "^9.11.1",
     "typescript": "^5.6.2",
     "vue-tsc": "^2.1.6"

docs/content/2.provider/github.md renamed to docs/content/2.provider/5.github.md

@@ -1,21 +1,9 @@
 {
   "routes": [
-    {
-      "route": "/provider/paypal",
-      "rewrite": "/provider/paypal/index.html"
-    },
     {
       "route": "/getting-started/installation",
       "rewrite": "/getting-started/installation/index.html"
     },
-    {
-      "route": "/provider/auth0",
-      "rewrite": "/provider/auth0/index.html"
-    },
-    {
-      "route": "/provider/keycloak",
-      "rewrite": "/provider/keycloak/index.html"
-    },
     {
       "route": "/provider/zitadel",
       "rewrite": "/provider/zitadel/index.html"
@@ -25,24 +13,36 @@
       "rewrite": "/provider/entra/index.html"
     },
     {
-      "route": "/provider/github",
-      "rewrite": "/provider/github/index.html"
+      "route": "/provider/aws-cognito",
+      "rewrite": "/provider/aws-cognito/index.html"
     },
     {
       "route": "/provider/oidc",
       "rewrite": "/provider/oidc/index.html"
     },
     {
-      "route": "/provider/aws-cognito",
-      "rewrite": "/provider/aws-cognito/index.html"
+      "route": "/provider/microsoft",
+      "rewrite": "/provider/microsoft/index.html"
     },
     {
-      "route": "/hooks",
-      "rewrite": "/hooks/index.html"
+      "route": "/provider/github",
+      "rewrite": "/provider/github/index.html"
     },
     {
-      "route": "/server-utils/middleware",
-      "rewrite": "/server-utils/middleware/index.html"
+      "route": "/provider/paypal",
+      "rewrite": "/provider/paypal/index.html"
+    },
+    {
+      "route": "/provider/keycloak",
+      "rewrite": "/provider/keycloak/index.html"
+    },
+    {
+      "route": "/provider/auth0",
+      "rewrite": "/provider/auth0/index.html"
+    },
+    {
+      "route": "/hooks",
+      "rewrite": "/hooks/index.html"
     },
     {
       "route": "/server-utils/oidc-handlers",
@@ -52,6 +52,10 @@
       "route": "/server-utils/session-management",
       "rewrite": "/server-utils/session-management/index.html"
     },
+    {
+      "route": "/server-utils/middleware",
+      "rewrite": "/server-utils/middleware/index.html"
+    },
     {
       "route": "/configuration",
       "rewrite": "/configuration/index.html"

docs/content/2.provider/keycloak.md renamed to docs/content/2.provider/6.keycloak.md

@@ -1,5 +1,6 @@
 import type { Config } from 'tailwindcss'
 import defaultTheme from 'tailwindcss/defaultTheme'
+import plugin from 'tailwindcss/plugin'
 
 export default <Partial<Config>>{
   theme: {
@@ -27,4 +28,15 @@ export default <Partial<Config>>{
       },
     },
   },
+  plugins: [
+    plugin(({ addVariant, addUtilities }) => {
+      addVariant('popover-open', '&:popover-open')
+      addVariant('starting', '@starting-style')
+      addUtilities({
+        '.transition-discrete': {
+          transitionBehavior: 'allow-discrete',
+        },
+      })
+    }),
+  ],
 }