authentification OpenID Connect (Keycloak) : flux authorization code, state signé, validation du token ID via JWKS, provisioning automatique des utilisateurs

backend/web/src/routes/(public)/login/+page.svelte

@@ -2,8 +2,9 @@
   import logo from "$lib/assets/logo-txt.png"
   import { auth, setToken } from '$lib/state/auth.svelte';
   import { goto } from '$app/navigation';
-  import { authApi } from "$lib/api/endpoints/auth"
+  import { authApi, type OIDCProvider } from "$lib/api/endpoints/auth"
   import { validateEmail } from "$lib/utilities/validators"
+  import { onMount } from "svelte"
 
   type Credentials = {
     email: string
@@ -17,6 +18,18 @@
     validemail: false
   })
 
+  let providers: OIDCProvider[] = $state([])
+
+  onMount(() => {
+    authApi.oidcProviders()
+      .then((res) => { providers = res ?? [] })
+      .catch(() => { providers = [] })
+  })
+
+  const oidcLogin = (providerId: string) => {
+    window.location.href = authApi.oidcLoginUrl(providerId)
+  }
+
   const formSubmitEmail = () => {
     credentials.validemail = validateEmail(credentials.email)
   }
@@ -85,22 +98,21 @@
         {/if}
 
 
-        <hr class="my-4">
+        {#if providers.length > 0}
+          <hr class="my-4">
 
-        <div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4">
-          <button class="bt p-5 text-center" title="Connexion avec Google">
-              <i class="icon-google"></i>
-          </button>
-          <button class="bt p-5 text-center" title="Connexion avec Facebook">
-              <i class="icon-facebook"></i>
-          </button>
-          <button class="bt p-5 text-center" title="Connexion avec Github">
-              <i class="icon-github"></i>
-          </button>
-          <button class="bt p-5 text-center" title="Connexion avec Apple">
-              <i class="icon-apple"></i>
-          </button>
-        </div>
+          <div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4">
+            {#each providers as provider (provider.id)}
+              <button
+                class="bt p-5 text-center"
+                title="Connexion avec {provider.label}"
+                onclick={() => oidcLogin(provider.id)}
+              >
+                  {provider.label}
+              </button>
+            {/each}
+          </div>
+        {/if}
 
     </div>
 </div>