@authup/client-web-kit 1.0.0-beta.21 → 1.0.0-beta.22

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { REALM_MASTER_NAME, DomainEventName, buildDomainChannelName, DomainType, isRealmResourceWritable, IdentityProviderProtocol, IdentityProviderPreset, getIdentityProviderProtocolForPreset } from '@authup/core-kit';
-import { hasInjectionContext, inject as inject$2, provide as provide$1, ref, computed, getCurrentScope, onScopeDispose, toRaw, isRef, isReactive, toRef, unref, h, onMounted, onUnmounted, watch, shallowRef, watchEffect, defineComponent, reactive, nextTick, getCurrentInstance, resolveDynamicComponent, mergeProps } from 'vue';
+import { hasInjectionContext, inject as inject$2, provide as provide$1, ref, computed, getCurrentScope, onScopeDispose, toRaw, isRef, isReactive, toRef, unref, h, onMounted, onUnmounted, watch, shallowRef, watchEffect, defineComponent, reactive, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createBlock, withCtx, normalizeClass, withModifiers, toDisplayString, getCurrentInstance, resolveDynamicComponent, mergeProps } from 'vue';
 import { Client, isClientTokenExpiredError, CookieName, ClientResponseErrorTokenHook } from '@authup/core-http-kit';
 import { defineStore, storeToRefs as storeToRefs$1 } from 'pinia';
 import { BuiltInPolicyType, PolicyError, maybeInvertPolicyOutcome, PermissionBindingPolicyValidator, PolicyEngine as PolicyEngine$1, PermissionMemoryProvider, PermissionChecker, TokenError, buildEventFullName, EventNameSuffix, hasOwnProperty, createNanoID, isOAuth2OpenIDProviderMetadata, isObject as isObject$2 } from '@authup/kit';
@@ -90,6 +90,91 @@ class PolicyEngine extends PolicyEngine$1 {
     }
 }
 
+/*
+ * Copyright (c) 2024.
+ * Author Peter Placzek (tada5hi)
+ * For the full copyright and license information,
+ * view the LICENSE file that was distributed with this source code.
+ */ var StoreDispatcherEventName = /*#__PURE__*/ function(StoreDispatcherEventName) {
+    StoreDispatcherEventName["LOGGING_IN"] = "loggingIn";
+    StoreDispatcherEventName["LOGGED_IN"] = "loggedIn";
+    StoreDispatcherEventName["LOGGING_OUT"] = "loggingOut";
+    StoreDispatcherEventName["LOGGED_OUT"] = "loggedOut";
+    StoreDispatcherEventName["RESOLVING"] = "resolving";
+    StoreDispatcherEventName["RESOLVED"] = "resolved";
+    StoreDispatcherEventName["ACCESS_TOKEN_UPDATED"] = "accessTokenUpdated";
+    StoreDispatcherEventName["ACCESS_TOKEN_EXPIRE_DATE_UPDATED"] = "accessTokenExpireDateUpdated";
+    StoreDispatcherEventName["REFRESH_TOKEN_UPDATED"] = "refreshTokenUpdated";
+    StoreDispatcherEventName["USER_UPDATED"] = "userUpdated";
+    StoreDispatcherEventName["REALM_UPDATED"] = "realmUpdated";
+    StoreDispatcherEventName["REALM_MANAGEMENT_UPDATED"] = "realmManagementUpdated";
+    return StoreDispatcherEventName;
+}({});
+
+// src/event-emitter.ts
+var EventEmitter = class {
+    on(type, handler) {
+        if (!this.all.has(type)) {
+            this.all.set(type, []);
+        }
+        const handlers = this.all.get(type);
+        handlers.push(handler);
+        return ()=>handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+    }
+    off(type, handler) {
+        if (!type) {
+            return this.all.clear();
+        }
+        const handlers = this.all.get(type);
+        if (handlers) {
+            if (handler) {
+                handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+            } else {
+                this.all.delete(type);
+            }
+        }
+    }
+    /**
+   * Invoke all handlers for the given type.
+   * If present, `'*'` handlers are invoked after type-matched handlers.
+   *
+   * Note: Manually firing `'*'` handlers is not supported.
+   *
+   * @param type The event type to invoke
+   * @param payload Any value to each handler
+   */ emit(type, ...payload) {
+        let handlers = this.all.get(type);
+        handlers?.slice().map((handler)=>{
+            handler(...payload);
+        });
+        handlers = this.all.get("*");
+        if (handlers) {
+            handlers.slice().map((handler)=>{
+                handler(type, payload);
+            });
+        }
+    }
+    constructor(all){
+        this.all = all || /* @__PURE__ */ new Map();
+    }
+};
+
+function createStoreDispatcher() {
+    return new EventEmitter();
+}
+
+const sym$1 = Symbol.for('AuthupStoreEventBus');
+function injectStoreDispatcher(app) {
+    const instance = inject$1(sym$1, app);
+    if (!instance) {
+        throw new Error('The store dispatcher has not been injected in the app context.');
+    }
+    return instance;
+}
+function provideStoreDispatcher(eventBus, app) {
+    provide(sym$1, eventBus, app);
+}
+
 function createPromiseShareWrapperFn(fn) {
     let promise;
     return (...args)=>{
@@ -107,41 +192,45 @@ function createPromiseShareWrapperFn(fn) {
         return promise;
     };
 }
-function createStore(context = {}) {
+function createStore(context) {
     const client = new Client({
         baseURL: context.baseURL
     });
-    const initialized = ref(false);
-    const setInitialized = (value)=>{
-        initialized.value = value;
+    const cookiesRead = ref(false);
+    const setCookiesRead = (value)=>{
+        cookiesRead.value = value;
     };
     // --------------------------------------------------------------------
-    const accessToken = ref(undefined);
+    const accessToken = ref(null);
     const setAccessToken = (input)=>{
         accessToken.value = input;
+        context.dispatcher.emit(StoreDispatcherEventName.ACCESS_TOKEN_UPDATED, input);
     };
     // --------------------------------------------------------------------
-    const accessTokenExpireDate = ref(undefined);
+    const accessTokenExpireDate = ref(null);
     const setAccessTokenExpireDate = (input)=>{
         if (typeof input === 'number' || typeof input === 'string') {
             accessTokenExpireDate.value = new Date(input); // verify microseconds or seconds
-            return;
+        } else {
+            accessTokenExpireDate.value = input;
         }
-        accessTokenExpireDate.value = input;
+        context.dispatcher.emit(StoreDispatcherEventName.ACCESS_TOKEN_EXPIRE_DATE_UPDATED, accessTokenExpireDate.value);
     };
     // --------------------------------------------------------------------
-    const refreshToken = ref(undefined);
+    const refreshToken = ref(null);
     const setRefreshToken = (input)=>{
         refreshToken.value = input;
+        context.dispatcher.emit(StoreDispatcherEventName.REFRESH_TOKEN_UPDATED, input);
     };
     // --------------------------------------------------------------------
-    const user = ref(undefined);
-    const userId = computed(()=>user.value ? user.value.id : undefined);
-    const setUser = (entity)=>{
-        user.value = entity;
+    const user = ref(null);
+    const userId = computed(()=>user.value ? user.value.id : null);
+    const setUser = (input)=>{
+        user.value = input;
+        context.dispatcher.emit(StoreDispatcherEventName.USER_UPDATED, input);
     };
     // --------------------------------------------------------------------
-    const realm = ref(undefined);
+    const realm = ref(null);
     const realmId = computed(()=>realm.value ? realm.value.id : undefined);
     const realmName = computed(()=>realm.value ? realm.value.name : undefined);
     const realmIsRoot = computed(()=>{
@@ -150,14 +239,16 @@ function createStore(context = {}) {
         }
         return false;
     });
-    const setRealm = (entity)=>{
-        realm.value = entity;
+    const setRealm = (input)=>{
+        realm.value = input;
+        context.dispatcher.emit(StoreDispatcherEventName.REALM_UPDATED, input);
     };
-    const realmManagement = ref(undefined);
+    const realmManagement = ref(null);
     const realmManagementId = computed(()=>realmManagement.value ? realmManagement.value.id : realmId.value);
     const realmManagementName = computed(()=>realmManagement.value ? realmManagement.value.name : realmName.value);
-    const setRealmManagement = (entity)=>{
-        realmManagement.value = entity;
+    const setRealmManagement = (input)=>{
+        realmManagement.value = input;
+        context.dispatcher.emit(StoreDispatcherEventName.REALM_MANAGEMENT_UPDATED, input);
     };
     // --------------------------------------------------------------------
     const permissionRepository = new PermissionMemoryProvider();
@@ -210,11 +301,15 @@ function createStore(context = {}) {
         });
     };
     // --------------------------------------------------------------------
-    const handleTokenGrantResponse = (response)=>{
+    const applyTokenGrantResponse = (response)=>{
         const expireDate = new Date(Date.now() + response.expires_in * 1000);
         setAccessTokenExpireDate(expireDate);
         setAccessToken(response.access_token);
-        setRefreshToken(response.refresh_token);
+        if (response.refresh_token) {
+            setRefreshToken(response.refresh_token);
+        } else {
+            setRefreshToken(null);
+        }
     };
     // --------------------------------------------------------------------
     const refreshSession = createPromiseShareWrapperFn(async ()=>{
@@ -223,8 +318,8 @@ function createStore(context = {}) {
         }
         return client.token.createWithRefreshToken({
             refresh_token: refreshToken.value
-        }).then((r)=>handleTokenGrantResponse(r)).catch((e)=>{
-            logout();
+        }).then((r)=>applyTokenGrantResponse(r)).catch((e)=>{
+            reset();
             return Promise.reject(e);
         }).finally(()=>{
             tokenResolved.value = false;
@@ -233,6 +328,7 @@ function createStore(context = {}) {
     });
     // --------------------------------------------------------------------
     const resolveInternal = async ()=>{
+        context.dispatcher.emit(StoreDispatcherEventName.RESOLVING);
         try {
             if (!accessToken.value && refreshToken.value) {
                 await refreshSession();
@@ -250,45 +346,72 @@ function createStore(context = {}) {
             }
             throw e;
         }
+        context.dispatcher.emit(StoreDispatcherEventName.RESOLVED);
         return Promise.resolve();
     };
     const resolve = createPromiseShareWrapperFn(resolveInternal);
     const loggedIn = computed(()=>!!accessToken.value);
     const login = async (ctx)=>{
+        context.dispatcher.emit(StoreDispatcherEventName.LOGGING_IN);
+        const response = await client.token.createWithPasswordGrant({
+            username: ctx.name,
+            password: ctx.password,
+            ...realmId.value ? {
+                realm_id: ctx.realmId
+            } : {}
+        });
+        applyTokenGrantResponse(response);
         try {
-            const response = await client.token.createWithPasswordGrant({
-                username: ctx.name,
-                password: ctx.password,
-                ...realmId.value ? {
-                    realm_id: ctx.realmId
-                } : {}
-            });
-            handleTokenGrantResponse(response);
             await resolve();
         } catch (e) {
-            logout();
+            await logout();
             throw e;
         }
+        context.dispatcher.emit(StoreDispatcherEventName.LOGGED_IN);
     };
-    const logout = ()=>{
-        setAccessToken(undefined);
-        setAccessTokenExpireDate(undefined);
-        setRefreshToken(undefined);
-        setUser(undefined);
-        setRealm(undefined);
-        setRealmManagement(undefined);
+    const reset = ()=>{
+        setAccessToken(null);
+        setAccessTokenExpireDate(null);
+        setRefreshToken(null);
+        setUser(null);
+        setRealm(null);
+        setRealmManagement(null);
+        permissionRepository.setMany([]);
         tokenResolved.value = false;
         userResolved.value = false;
     };
+    const logout = async ()=>{
+        context.dispatcher.emit(StoreDispatcherEventName.LOGGING_OUT);
+        try {
+            if (accessToken.value) {
+                await client.token.revoke({
+                    token: accessToken.value
+                });
+            }
+        } catch (e) {
+        // ...
+        }
+        try {
+            if (refreshToken.value) {
+                await client.token.revoke({
+                    token: refreshToken.value
+                });
+            }
+        } catch (e) {
+        // ...
+        }
+        reset();
+        context.dispatcher.emit(StoreDispatcherEventName.LOGGED_OUT);
+    };
     return {
-        initialized,
-        setInitialized,
+        cookiesRead,
+        setCookiesRead,
         permissionChecker,
         login,
         logout,
         loggedIn,
         resolve,
-        handleTokenGrantResponse,
+        applyTokenGrantResponse,
         accessToken,
         setAccessToken,
         accessTokenExpireDate,
@@ -375,7 +498,7 @@ function shouldUpdate(dependencies, newCookies, oldCookies) {
     return false;
 }
 
-const StoreSymbol = Symbol.for('AuthupStore');
+const sym = Symbol.for('AuthupStore');
 function useStore(pinia, app) {
     const instance = injectStoreFactory(app);
     if (!instance) {
@@ -384,25 +507,28 @@ function useStore(pinia, app) {
     return instance(pinia);
 }
 function injectStoreFactory(app) {
-    const instance = inject$1(StoreSymbol, app);
+    const instance = inject$1(sym, app);
     if (!instance) {
         throw new Error('The store factory has not been injected in the app context.');
     }
     return instance;
 }
 function hasStoreFactory(app) {
-    return !!inject$1(StoreSymbol, app);
+    return !!inject$1(sym, app);
 }
 function provideStoreFactory(store, app) {
-    provide(StoreSymbol, store, app);
+    provide(sym, store, app);
 }
 
 function installStore(app, options = {}) {
     if (hasStoreFactory(app)) {
         return;
     }
+    const storeDispatcher = createStoreDispatcher();
+    provideStoreDispatcher(storeDispatcher, app);
     const storeFactory = defineStore(STORE_ID, ()=>createStore({
-            baseURL: options.baseURL
+            baseURL: options.baseURL,
+            dispatcher: storeDispatcher
         }));
     const store = storeFactory(options.pinia);
     let cookieGet;
@@ -430,11 +556,11 @@ function installStore(app, options = {}) {
         const cookies = useCookies();
         cookieUnset = cookies.remove;
     }
-    const initStore = ()=>{
-        if (store.initialized) {
+    const readCookies = ()=>{
+        if (store.cookiesRead) {
             return;
         }
-        store.setInitialized(true);
+        store.setCookiesRead(true);
         const keys = Object.values(CookieName);
         let value;
         for(let i = 0; i < keys.length; i++){
@@ -476,51 +602,60 @@ function installStore(app, options = {}) {
             }
         }
     };
-    store.$onAction((action)=>{
-        if (action.store.$id !== STORE_ID) {
-            return;
+    const maxAgeFn = ()=>{
+        if (!store.accessTokenExpireDate) {
+            return undefined;
         }
-        if (action.name === 'logout') {
-            cookieUnset(CookieName.ACCESS_TOKEN, {});
+        return Math.floor(Math.max(1000, new Date(`${store.accessTokenExpireDate}`).getTime() - Date.now()) / 1000);
+    };
+    storeDispatcher.on(StoreDispatcherEventName.ACCESS_TOKEN_EXPIRE_DATE_UPDATED, (input)=>{
+        if (input) {
+            cookieSet(CookieName.ACCESS_TOKEN_EXPIRE_DATE, input, {
+                maxAge: maxAgeFn()
+            });
+        } else {
             cookieUnset(CookieName.ACCESS_TOKEN_EXPIRE_DATE, {});
-            cookieUnset(CookieName.REFRESH_TOKEN, {});
-            cookieUnset(CookieName.USER, {});
-            cookieUnset(CookieName.REALM, {});
-            cookieUnset(CookieName.REALM_MANAGEMENT, {});
         }
     });
-    initStore();
-    store.$subscribe((mutation, state)=>{
-        if (mutation.storeId !== STORE_ID) {
-            return;
-        }
-        let maxAge;
-        if (state.accessTokenExpireDate) {
-            maxAge = Math.floor(Math.max(1000, new Date(`${state.accessTokenExpireDate}`).getTime() - Date.now()) / 1000);
-        }
-        if (state.accessToken) {
-            cookieSet(CookieName.ACCESS_TOKEN, state.accessToken, {
-                maxAge
-            });
-        }
-        if (state.accessTokenExpireDate) {
-            cookieSet(CookieName.ACCESS_TOKEN_EXPIRE_DATE, state.accessTokenExpireDate, {
+    storeDispatcher.on(StoreDispatcherEventName.ACCESS_TOKEN_UPDATED, (input)=>{
+        if (input) {
+            const maxAge = maxAgeFn();
+            cookieSet(CookieName.ACCESS_TOKEN, input, {
                 maxAge
             });
+        } else {
+            cookieUnset(CookieName.ACCESS_TOKEN, {});
         }
-        if (state.refreshToken) {
-            cookieSet(CookieName.REFRESH_TOKEN, state.refreshToken, {});
+    });
+    storeDispatcher.on(StoreDispatcherEventName.REFRESH_TOKEN_UPDATED, (input)=>{
+        if (input) {
+            cookieSet(CookieName.REFRESH_TOKEN, input, {});
+        } else {
+            cookieUnset(CookieName.REFRESH_TOKEN, {});
         }
-        if (state.user) {
-            cookieSet(CookieName.USER, state.user, {});
+    });
+    storeDispatcher.on(StoreDispatcherEventName.USER_UPDATED, (input)=>{
+        if (input) {
+            cookieSet(CookieName.USER, input, {});
+        } else {
+            cookieUnset(CookieName.USER, {});
         }
-        if (state.realm) {
-            cookieSet(CookieName.REALM, state.realm, {});
+    });
+    storeDispatcher.on(StoreDispatcherEventName.REALM_UPDATED, (input)=>{
+        if (input) {
+            cookieSet(CookieName.REALM, input, {});
+        } else {
+            cookieUnset(CookieName.REALM, {});
         }
-        if (state.realmManagement) {
-            cookieSet(CookieName.REALM_MANAGEMENT, state.realmManagement, {});
+    });
+    storeDispatcher.on(StoreDispatcherEventName.REALM_MANAGEMENT_UPDATED, (input)=>{
+        if (input) {
+            cookieSet(CookieName.REALM_MANAGEMENT, input, {});
+        } else {
+            cookieUnset(CookieName.REALM_MANAGEMENT, {});
         }
     });
+    readCookies();
     provideStoreFactory(storeFactory, app);
 }
 
@@ -558,30 +693,36 @@ function installHTTPClient(app, options = {}) {
             });
         },
         tokenCreated: (response)=>{
-            store.handleTokenGrantResponse(response);
+            store.applyTokenGrantResponse(response);
         },
         tokenFailed: ()=>{
-            store.logout();
+            Promise.resolve().then(()=>store.logout());
         },
         timer: !options.isServer
     });
-    store.$subscribe((mutation, state)=>{
-        if (mutation.storeId !== STORE_ID) return;
-        if (state.accessToken) {
+    const storeDispatcher = injectStoreDispatcher(app);
+    const handleAccessTokenEvent = ()=>{
+        if (store.accessToken) {
             client.setAuthorizationHeader({
                 type: 'Bearer',
-                token: state.accessToken
+                token: store.accessToken
             });
             tokenHook.mount();
         } else {
             client.unsetAuthorizationHeader();
             tokenHook.unmount();
         }
-        if (state.refreshToken && state.accessTokenExpireDate) {
-            const expiresIn = Math.floor((state.accessTokenExpireDate.getTime() - Date.now()) / 1000);
-            tokenHook.setTimer(expiresIn, ()=>refreshToken.value);
+    };
+    const handleAccessTokenExpireDateEvent = ()=>{
+        if (store.accessTokenExpireDate) {
+            const expiresIn = Math.floor((store.accessTokenExpireDate.getTime() - Date.now()) / 1000);
+            tokenHook.setTimer(expiresIn, ()=>refreshToken.value || undefined);
         }
-    });
+    };
+    storeDispatcher.on(StoreDispatcherEventName.ACCESS_TOKEN_UPDATED, ()=>handleAccessTokenEvent());
+    storeDispatcher.on(StoreDispatcherEventName.ACCESS_TOKEN_EXPIRE_DATE_UPDATED, ()=>handleAccessTokenExpireDateEvent());
+    handleAccessTokenEvent();
+    handleAccessTokenExpireDateEvent();
     provideHTTPClient(client, app);
 }
 
@@ -1036,7 +1177,7 @@ function createList(context) {
         }
     }
     const handleCreated = buildListCreatedHandler(data, (cbEntity)=>{
-        total.value--;
+        total.value++;
         if (context.onCreated) {
             context.onCreated(cbEntity, meta.value);
         }
@@ -1069,7 +1210,7 @@ function createList(context) {
             noMore: renderOptions.noMore,
             body: renderOptions.body,
             loading: renderOptions.loading,
-            total,
+            total: total.value,
             load,
             busy: busy.value,
             data: data.value,
@@ -1078,16 +1219,19 @@ function createList(context) {
                 if (context.setup.emit) {
                     context.setup.emit('created', value);
                 }
+                handleCreated(value);
             },
             onDeleted: (value)=>{
                 if (context.setup.emit) {
                     context.setup.emit('deleted', value);
                 }
+                handleDeleted(value);
             },
             onUpdated: (value)=>{
                 if (context.setup.emit) {
                     context.setup.emit('updated', value);
                 }
+                handleUpdated(value);
             },
             slotItems: context.setup.slots || {}
         });
@@ -4067,7 +4211,11 @@ const AIdentityProviderPreset = defineComponent({
     }
 });
 
-const AIdentityProviderPicker = defineComponent({
+var _sfc_main = defineComponent({
+    components: {
+        AIdentityProviderPreset,
+        AIdentityProviderProtocol
+    },
     props: {
         protocol: {
             type: String
@@ -4080,113 +4228,139 @@ const AIdentityProviderPicker = defineComponent({
         'pick'
     ],
     setup (props, setup) {
-        const protocols = [];
-        const presets = [];
-        Object.values(IdentityProviderProtocol).map((id)=>{
-            protocols.push({
-                id
-            });
-            return id;
-        });
-        Object.values(IdentityProviderPreset).map((id)=>{
-            presets.push({
-                id
-            });
-            return id;
-        });
-        const pick = (ctx)=>{
-            setup.emit('pick', ctx);
+        const protocols = Object.values(IdentityProviderProtocol);
+        const presets = Object.values(IdentityProviderPreset);
+        const pickProtocol = (protocol)=>{
+            setup.emit('pick', 'protocol', protocol);
         };
-        return ()=>{
-            const protocolNode = buildList({
-                data: protocols,
-                header: {
-                    content: h('h6', 'Protocols')
-                },
-                body: {
-                    class: 'd-flex flex-row',
-                    item: {
-                        class: [
-                            'me-1 list-item'
-                        ],
-                        icon: false,
-                        content: (item)=>h(AIdentityProviderProtocol, {
-                                id: item.id
-                            }, {
-                                default: (element)=>[
-                                        h('i', {
-                                            class: [
-                                                element.icon,
-                                                'pe-1'
-                                            ]
-                                        }),
-                                        element.name,
-                                        h('button', {
-                                            class: 'btn btn-xs btn-dark ms-1',
-                                            onClick ($event) {
-                                                $event.preventDefault();
-                                                pick({
-                                                    protocol: item.id
-                                                });
-                                            }
-                                        }, [
-                                            h('i', {
-                                                class: 'fa fa-plus'
-                                            })
-                                        ])
-                                    ]
-                            })
-                    }
-                }
-            });
-            const protocolNodeConfigurationNode = buildList({
-                data: presets,
-                header: {
-                    content: h('h6', 'Presets')
-                },
-                body: {
-                    class: 'd-flex flex-row',
-                    item: {
-                        class: 'me-1 list-item',
-                        icon: false,
-                        content: (preset)=>h(AIdentityProviderPreset, {
-                                id: preset.id
-                            }, {
-                                default: (item)=>h('div', [
-                                        h('i', {
-                                            class: [
-                                                item.icon,
-                                                'pe-1'
-                                            ]
-                                        }),
-                                        item.name,
-                                        h('button', {
-                                            class: 'btn btn-xs btn-dark ms-1',
-                                            onClick ($event) {
-                                                $event.preventDefault();
-                                                pick({
-                                                    preset: preset.id,
-                                                    protocol: getIdentityProviderProtocolForPreset(preset.id)
-                                                });
-                                            }
-                                        }, [
-                                            h('i', {
-                                                class: 'fa fa-plus'
-                                            })
-                                        ])
-                                    ])
-                            })
-                    }
-                }
-            });
-            return [
-                protocolNode,
-                protocolNodeConfigurationNode
-            ];
+        const pickPreset = (preset)=>{
+            setup.emit('pick', 'preset', preset);
+        };
+        return {
+            protocols,
+            presets,
+            pickProtocol,
+            pickPreset
         };
     }
 });
 
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _hoisted_1 = {
+    class: "d-flex flex-column gap-2"
+};
+const _hoisted_2 = {
+    class: "d-flex flex-row gap-2 flex-wrap"
+};
+const _hoisted_3 = [
+    "onClick"
+];
+const _hoisted_4 = {
+    class: "d-flex flex-row gap-2 flex-wrap"
+};
+const _hoisted_5 = [
+    "onClick"
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_AIdentityProviderProtocol = resolveComponent("AIdentityProviderProtocol");
+    const _component_AIdentityProviderPreset = resolveComponent("AIdentityProviderPreset");
+    return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", null, [
+            _cache[0] || (_cache[0] = createElementVNode("h6", null, "Protocols", -1)),
+            createElementVNode("div", _hoisted_2, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.protocols, (item, key)=>{
+                    return openBlock(), createBlock(_component_AIdentityProviderProtocol, {
+                        key,
+                        id: item
+                    }, {
+                        default: withCtx((props)=>[
+                                createElementVNode("div", {
+                                    class: normalizeClass([
+                                        {
+                                            "active": item === _ctx.protocol && !_ctx.preset
+                                        },
+                                        "d-flex flex-column gap-1 text-center identity-provider-picker-item"
+                                    ]),
+                                    onClick: withModifiers(($event)=>_ctx.pickProtocol(item), [
+                                        "prevent"
+                                    ])
+                                }, [
+                                    createElementVNode("div", null, [
+                                        createElementVNode("i", {
+                                            class: normalizeClass([
+                                                "fa-2x",
+                                                props.icon
+                                            ])
+                                        }, null, 2)
+                                    ]),
+                                    createElementVNode("div", null, toDisplayString(props.name), 1)
+                                ], 10, _hoisted_3)
+                            ]),
+                        _: 2
+                    }, 1032, [
+                        "id"
+                    ]);
+                }), 128))
+            ])
+        ]),
+        createElementVNode("div", null, [
+            _cache[1] || (_cache[1] = createElementVNode("h6", null, "Presets", -1)),
+            createElementVNode("div", _hoisted_4, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.presets, (item, key)=>{
+                    return openBlock(), createBlock(_component_AIdentityProviderPreset, {
+                        key,
+                        id: item
+                    }, {
+                        default: withCtx((props)=>[
+                                createElementVNode("div", {
+                                    class: normalizeClass([
+                                        {
+                                            "active": item === _ctx.preset
+                                        },
+                                        "d-flex flex-column gap-1 text-center identity-provider-picker-item"
+                                    ]),
+                                    onClick: withModifiers(($event)=>_ctx.pickPreset(item), [
+                                        "prevent"
+                                    ])
+                                }, [
+                                    createElementVNode("div", null, [
+                                        createElementVNode("i", {
+                                            class: normalizeClass([
+                                                "fa-2x",
+                                                props.icon
+                                            ])
+                                        }, null, 2)
+                                    ]),
+                                    createElementVNode("div", null, toDisplayString(props.name), 1)
+                                ], 10, _hoisted_5)
+                            ]),
+                        _: 2
+                    }, 1032, [
+                        "id"
+                    ]);
+                }), 128))
+            ])
+        ])
+    ]);
+}
+var AIdentityProviderPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [
+    [
+        "render",
+        _sfc_render
+    ],
+    [
+        "__scopeId",
+        "data-v-0df1e731"
+    ]
+]);
+
 const AIdentityProviderOAuth2ClientFields = defineComponent({
     props: {
         entity: {
@@ -4724,17 +4898,16 @@ const AIdentityProviderForm = defineComponent({
         set();
         onChange(updatedAt, ()=>set());
         const renderPicker = ()=>h(AIdentityProviderPicker, {
-                onPick (value) {
-                    if (value.protocol) {
-                        protocol.value = value.protocol;
-                    } else {
-                        protocol.value = null;
-                    }
-                    if (value.preset) {
-                        preset.value = value.preset;
-                    } else {
-                        preset.value = null;
+                protocol: protocol.value,
+                preset: preset.value,
+                onPick (type, value) {
+                    if (type === 'preset') {
+                        preset.value = value;
+                        protocol.value = `${getIdentityProviderProtocolForPreset(value)}`;
+                        return;
                     }
+                    protocol.value = value;
+                    preset.value = null;
                 }
             });
         const render = (node)=>{
@@ -7114,5 +7287,5 @@ var index = {
     install
 };
 
-export { AClient, AClientForm, AClientRedirectUris, AClientRedirectUrisItem, AClientScope, AClientScopeAssignment, AClientScopeAssignments, AClientScopes, AClients, AEntityDelete, AIdentityProvider, AIdentityProviderForm, AIdentityProviderIcon, AIdentityProviderLdapForm, AIdentityProviderOAuth2Form, AIdentityProviderPreset, AIdentityProviderProtocol, AIdentityProviderRoleAssignment, AIdentityProviderRoleAssignments, AIdentityProviders, APagination, APermission, APermissionCheck, APermissionForm, APermissionRobotAssignments, APermissionRoleAssignments, APermissionUserAssignments, APermissions, ARealm, ARealmForm, ARealms, ARobot, ARobotForm, ARobotPermissionAssignment, ARobotPermissionAssignments, ARobotRoleAssignment, ARobotRoleAssignments, ARobots, ARole, ARoleForm, ARolePermissionAssignment, ARolePermissionAssignments, ARoleRobotAssignments, ARoleUserAssignments, ARoles, AScope, AScopeClientAssignments, AScopeForm, AScopes, ASearch, ATitle, AUser, AUserForm, AUserPasswordForm, AUserPermissionAssignment, AUserPermissionAssignments, AUserRoleAssignment, AUserRoleAssignments, AUsers, EntityManagerError, HTTPClientSymbol, LanguageSwitcherDropdown, STORE_ID, SocketClientSymbol, StoreSymbol, TranslatorTranslationClientKey, TranslatorTranslationDefaultKey, TranslatorTranslationGroup, TranslatorTranslationVuecsKey, VuelidateCustomRule, VuelidateCustomRuleKey, buildEntityManagerSlotProps, buildFormSubmitWithTranslations, buildListCreatedHandler, buildListDeletedHandler, buildListUpdatedHandler, createEntityManager, createFormSubmitTranslations, createList, createPermissionCheckerReactiveFn, createStore, index as default, defineEntityManagerEvents, defineEntityManagerProps, defineListEvents, defineListProps, extendObjectProperties, extractVuelidateResultsFromChild, getVuelidateSeverity, hasHTTPClient, hasNormalizedSlot, hasStoreFactory, initFormAttributesFromSource, inject$1 as inject, injectHTTPClient, injectSocketManager, injectStoreFactory, injectTranslatorLocale, install, installHTTPClient, installSocketManager, installStore, installTranslator, isQuerySortedDescByDate, isSocketManagerUsable, mergeListOptions, normalizeSlot, onChange, provide, provideHTTPClient, provideSocketManager, provideStoreFactory, renderEntityAssignAction, storeToRefs, useIsEditing, usePermissionCheck, useRealmResourceWritableCheck, useStore, useTranslation, useTranslationsForBaseValidation, useTranslationsForGroup, useTranslationsForNestedValidation, useUpdatedAt, wrapFnWithBusyState };
+export { AClient, AClientForm, AClientRedirectUris, AClientRedirectUrisItem, AClientScope, AClientScopeAssignment, AClientScopeAssignments, AClientScopes, AClients, AEntityDelete, AIdentityProvider, AIdentityProviderForm, AIdentityProviderIcon, AIdentityProviderLdapForm, AIdentityProviderOAuth2Form, AIdentityProviderPreset, AIdentityProviderProtocol, AIdentityProviderRoleAssignment, AIdentityProviderRoleAssignments, AIdentityProviders, APagination, APermission, APermissionCheck, APermissionForm, APermissionRobotAssignments, APermissionRoleAssignments, APermissionUserAssignments, APermissions, ARealm, ARealmForm, ARealms, ARobot, ARobotForm, ARobotPermissionAssignment, ARobotPermissionAssignments, ARobotRoleAssignment, ARobotRoleAssignments, ARobots, ARole, ARoleForm, ARolePermissionAssignment, ARolePermissionAssignments, ARoleRobotAssignments, ARoleUserAssignments, ARoles, AScope, AScopeClientAssignments, AScopeForm, AScopes, ASearch, ATitle, AUser, AUserForm, AUserPasswordForm, AUserPermissionAssignment, AUserPermissionAssignments, AUserRoleAssignment, AUserRoleAssignments, AUsers, EntityManagerError, HTTPClientSymbol, LanguageSwitcherDropdown, STORE_ID, SocketClientSymbol, StoreDispatcherEventName, TranslatorTranslationClientKey, TranslatorTranslationDefaultKey, TranslatorTranslationGroup, TranslatorTranslationVuecsKey, VuelidateCustomRule, VuelidateCustomRuleKey, buildEntityManagerSlotProps, buildFormSubmitWithTranslations, buildListCreatedHandler, buildListDeletedHandler, buildListUpdatedHandler, createEntityManager, createFormSubmitTranslations, createList, createPermissionCheckerReactiveFn, createStore, createStoreDispatcher, index as default, defineEntityManagerEvents, defineEntityManagerProps, defineListEvents, defineListProps, extendObjectProperties, extractVuelidateResultsFromChild, getVuelidateSeverity, hasHTTPClient, hasNormalizedSlot, hasStoreFactory, initFormAttributesFromSource, inject$1 as inject, injectHTTPClient, injectSocketManager, injectStoreDispatcher, injectStoreFactory, injectTranslatorLocale, install, installHTTPClient, installSocketManager, installStore, installTranslator, isQuerySortedDescByDate, isSocketManagerUsable, mergeListOptions, normalizeSlot, onChange, provide, provideHTTPClient, provideSocketManager, provideStoreDispatcher, provideStoreFactory, renderEntityAssignAction, storeToRefs, useIsEditing, usePermissionCheck, useRealmResourceWritableCheck, useStore, useTranslation, useTranslationsForBaseValidation, useTranslationsForGroup, useTranslationsForNestedValidation, useUpdatedAt, wrapFnWithBusyState };
 //# sourceMappingURL=index.mjs.map