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.