@openeventkit/event-site 2.0.91 → 2.0.93

package/gatsby-browser.js

@@ -44,28 +44,24 @@ export const onClientEntry = () => {
       },
       release: process.env.GATSBY_SENTRY_RELEASE,
       integrations: [
-
-          new RewriteFramesIntegration
-          (
-          {
-                  iteratee: (frame) => {
-                    // @see https://github.com/getsentry/sentry-javascript/blob/f46f5660114ee625af6e4db895565ae4a36558ae/packages/integrations/src/rewriteframes.ts#L70
-                    // rewrite frames to remove the dynamic hash version to match the abs_path
-                    if (!frame.filename) {
-                      return frame;
-                    }
-                    const isComponentFrame = /component---src-pages-(\w*)-js(-\w*).js/.test(frame.filename);
-                    if(isComponentFrame){
-                      frame.filename = frame.filename.replace(/(component---src-pages-(\w*)-js)(-\w*).js$/,'$1.js')
-                    }
-                    const isAppFrame = /app(-\w*).js/.test(frame.filename);
-                    if(isAppFrame){
-                      frame.filename = frame.filename.replace(/app(-\w*).js$/,'app.js')
-                    }
-                    return frame;
-                  }
+        new RewriteFramesIntegration({
+          iteratee: (frame) => {
+            // @see https://github.com/getsentry/sentry-javascript/blob/f46f5660114ee625af6e4db895565ae4a36558ae/packages/integrations/src/rewriteframes.ts#L70
+            // rewrite frames to remove the dynamic hash version to match the abs_path
+            if (!frame.filename) {
+              return frame;
+            }
+            const isComponentFrame = /component---src-pages-(\w*)-js(-\w*).js/.test(frame.filename);
+            if(isComponentFrame){
+              frame.filename = frame.filename.replace(/(component---src-pages-(\w*)-js)(-\w*).js$/,'$1.js')
+            }
+            const isAppFrame = /app(-\w*).js/.test(frame.filename);
+            if(isAppFrame){
+              frame.filename = frame.filename.replace(/app(-\w*).js$/,'app.js')
+            }
+            return frame;
           }
-        ),
+        }),
         new Sentry.Replay()
       ],
     });

package/gatsby-config.js

@@ -71,22 +71,6 @@ const plugins = [
       }
     }
   },
-  {
-    // Add image assets before markdown or json files
-    resolve: "gatsby-source-filesystem",
-    options: {
-      path: `${__dirname}/static/img`,
-      name: "uploads"
-    }
-  },
-  {
-    // Add image assets before markdown or json files
-    resolve: "gatsby-source-filesystem",
-    options: {
-      path: `${__dirname}/src/img`,
-      name: "images"
-    }
-  },
   {
     // Add font assets before markdown or json files
     resolve: "gatsby-source-filesystem",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.91",
+  "version": "2.0.93",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -65,7 +65,7 @@
     "idtoken-verifier": "^2.2.2",
     "image-size": "^1.0.1",
     "immutability-helper": "2.9.1",
-    "immutable": "^3.7.6",
+    "immutable": "^5.0.0-beta.5",
     "jsdom": "^16.2.2",
     "lite-schedule-widget": "3.0.3",
     "live-event-widget": "4.0.2",
@@ -91,6 +91,7 @@
     "react-final-form": "6.5.9",
     "react-i18next": "^11.16.9",
     "react-iframe-comm": "^1.2.2",
+    "react-immutable-proptypes": "^2.2.0",
     "react-laag": "^2.0.5",
     "react-masonry-css": "^1.0.14",
     "react-medium-image-zoom": "^4.3.5",
@@ -120,7 +121,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "5.0.19",
+    "summit-registration-lite": "5.0.21",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "3.0.5",

package/src/cms/cms-utils.js

@@ -1,9 +1,8 @@
-if (typeof window !== 'undefined') {
-
-    // add admin.css
-    const link = document.createElement('link')
-    link.type = 'text/css'
-    link.rel = 'stylesheet'
-    link.href = '/admin/admin.css'
-    document.head.appendChild(link)    
+if (typeof window !== "undefined") {
+  // add admin.css
+  const link = document.createElement("link");
+  link.type = "text/css";
+  link.rel = "stylesheet";
+  link.href = "/admin/admin.css";
+  document.head.appendChild(link);
 }

package/src/cms/cms.js

@@ -6,6 +6,7 @@ import "./cms-utils";
 import { Widget as FileRelationWidget } from "@ncwidgets/file-relation";
 import { Widget as IdWidget } from "@ncwidgets/id";
 
+import IdentityProviderParamControl from "./widgets/IdentityProviderParamControl";
 import ContentPagePreview from "./preview-templates/ContentPagePreview";
 
 CMS.init({ config });
@@ -13,4 +14,5 @@ CMS.init({ config });
 CMS.registerWidget(IdWidget);
 CMS.registerWidget(FileRelationWidget);
 
+CMS.registerWidget("identityProviderParam", IdentityProviderParamControl);
 CMS.registerPreviewTemplate("contentPages", ContentPagePreview);

package/src/cms/config/collections/configurationsCollection/siteSettings/index.js

@@ -1,11 +1,13 @@
 import {
   booleanField,
+  numberField,
   stringField,
   textField,
   imageField,
   selectField,
   selectOption,
   objectField,
+  listField,
   fileField
 } from "../../../fields";
 
@@ -14,12 +16,17 @@ import {
   CMS_FONT_FILE_PATH
 } from "@utils/filePath";
 
+import {
+  getEnvVariable,
+  IDP_BASE_URL
+} from "@utils/envVariables";
+
 const FONT_FORMATS = {
   truetype: "ttf",
   opentype: "otf",
   woff: "woff",
   woff2: "woff2",
-  eot: "eot",
+  eot: "eot"
 };
 
 const getFontFormatOptions = () =>
@@ -169,6 +176,47 @@ const siteSettings = {
         }),
       ]
     }),
+    listField({
+      label: "Identity Provider Buttons",
+      name: "identityProviderButtons",
+      summary: "{{providerLabel}}",
+      fields: [
+        stringField({
+          label: "Button Color",
+          name: "buttonColor",
+          required: true
+        }),
+        stringField({
+          label: "Button Border Color",
+          name: "buttonBorderColor"
+        }),
+        stringField({
+          label: "Provider Label",
+          name: "providerLabel",
+          required: true
+        }),
+        {
+          widget: "identityProviderParam",
+          label: "Provider Param",
+          name: "providerParam",
+          endpoint: `${getEnvVariable(IDP_BASE_URL)}/oauth2/.well-known/openid-configuration`,
+          required: false
+        },
+        imageField({
+          label: "Provider Logo",
+          name: "providerLogo",
+          required: true
+        }),
+        numberField({
+          label: "Provider Logo Size",
+          name: "providerLogoSize",
+          default: 20,
+          valueType: "float",
+          min: 0,
+          required: true
+        })
+      ]
+    })
   ]
 };
 

package/src/cms/config/collections/configurationsCollection/siteSettings/typeDefs.js

@@ -21,9 +21,18 @@ module.exports = `
     schedule: Schedule
     chat: Chat
   }
+  type IdentityProviderButton {
+    buttonColor: String
+    buttonBorderColor: String
+    providerLabel: String
+    providerParam: String
+    providerLogo: File @fileByRelativePath
+    providerLogoSize: Float
+  }
   type SiteSettingsJson implements Node {
     siteMetadata: SiteMetadata
     favicon: Favicon
     widgets: Widgets
+    identityProviderButtons: [IdentityProviderButton]
   }
 `;

package/src/cms/config/fields.js

@@ -34,12 +34,14 @@ export const numberField = ({
   label = "Number",
   name = "number",
   required = false,
+  valueType,
   ...rest
 } = {}) => ({
   label,
   name,
   required,
   widget: "number",
+  ...(valueType ? { value_type: valueType } : {}),
   ...rest
 });
 

package/src/cms/config/index.js

@@ -32,7 +32,7 @@ const config = {
   collections: collections
 };
 
-if (!!CMS_BACKEND_REPO && !!CMS_BACKEND_BRANCH) {
+if (!CMS_BACKEND_REPO || !CMS_BACKEND_BRANCH) {
   config.local_backend = true;
 }
 

package/src/cms/widgets/IdentityProviderParamControl.js

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from "react";
+import CMS from "netlify-cms-app";
+import PropTypes from "prop-types";
+import ImmutablePropTypes from "react-immutable-proptypes";
+import { List } from "immutable";
+
+const StringControl = CMS.getWidget("string").control;
+const SelectControl = CMS.getWidget("select").control;
+
+const IdentityProviderParamControl = ({
+  onChange,
+  value,
+  forID,
+  classNameWrapper,
+  setActiveStyle,
+  setInactiveStyle,
+  field
+}) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchOptions = async () => {
+      try {
+        const response = await fetch(field.get("endpoint"));
+        const data = await response.json();
+        const fetchedOptions = data.third_party_identity_providers || [];
+        
+        setOptions(fetchedOptions.map(option => ({ label: option, value: option })));
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching OpenID configuration:", error);
+        setError(error);
+        setLoading(false);
+      }
+    };
+
+    fetchOptions();
+  }, [field]);
+
+  if (loading) {
+    return <div>Loading options...</div>;
+  }
+
+  if (error || !Array.isArray(options) || options.length === 0) {
+    return (
+      <StringControl
+        forID={forID}
+        value={value || ""}
+        onChange={onChange}
+        classNameWrapper={classNameWrapper}
+        setActiveStyle={setActiveStyle}
+        setInactiveStyle={setInactiveStyle}
+        field={field}
+      />
+    );
+  }
+
+  return (
+    <SelectControl
+      forID={forID}
+      value={value || ""}
+      onChange={onChange}
+      classNameWrapper={classNameWrapper}
+      setActiveStyle={setActiveStyle}
+      setInactiveStyle={setInactiveStyle}
+      field={field.set("options", List(options))}
+    />
+  );
+};
+
+IdentityProviderParamControl.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.node,
+  forID: PropTypes.string.isRequired,
+  classNameWrapper: PropTypes.string.isRequired,
+  setActiveStyle: PropTypes.func.isRequired,
+  setInactiveStyle: PropTypes.func.isRequired,
+  field: ImmutablePropTypes.contains({
+    endpoint: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export default IdentityProviderParamControl;

package/src/components/AuthComponent.js

@@ -9,7 +9,7 @@ import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parse
 import { doLogin, passwordlessStart } from 'openstack-uicore-foundation/lib/security/methods'
 import { setPasswordlessLogin, setUserOrder, checkOrderData } from "../actions/user-actions";
 import { getThirdPartyProviders } from "../actions/base-actions";
-import { formatThirdPartyProviders } from "../utils/loginUtils";
+import { validateIdentityProviderButtons } from "../utils/loginUtils";
 import 'summit-registration-lite/dist/index.css';
 import styles from '../styles/login-button.module.scss'
 import PropTypes from 'prop-types'
@@ -19,9 +19,11 @@ import { PHASES } from "@utils/phasesUtils";
 import { getDefaultLocation } from "@utils/loginUtils";
 import { userHasAccessLevel, VirtualAccessLevel } from "../utils/authorizedGroups";
 
+import useSiteSettings from "@utils/useSiteSettings";
+
 const AuthComponent = ({
     getThirdPartyProviders,
-    thirdPartyProviders,
+    availableThirdPartyProviders,
     setPasswordlessLogin,
     summit,
     marketingPageSettings,
@@ -61,8 +63,8 @@ const AuthComponent = ({
     }, []);
 
     useEffect(() => {
-        if (!thirdPartyProviders.length) getThirdPartyProviders();
-    }, [thirdPartyProviders]);
+        if (!availableThirdPartyProviders.length) getThirdPartyProviders();
+    }, [availableThirdPartyProviders]);
 
     const getBackURL = (encode = true) => {
         let backUrl = location.state?.backUrl
@@ -131,8 +133,10 @@ const AuthComponent = ({
         });
     }
 
+    const siteSettings = useSiteSettings();
+
     const loginComponentProps = {
-        loginOptions: formatThirdPartyProviders(thirdPartyProviders),
+        loginOptions: validateIdentityProviderButtons(siteSettings?.identityProviderButtons, availableThirdPartyProviders),
         login: (provider) => onClickLogin(provider),
         getLoginCode: (email) => sendCode(email),
         allowsNativeAuth: allowsNativeAuth,
@@ -210,7 +214,7 @@ const mapStateToProps = ({ userState, summitState, settingState, clockState, log
     return ({
         loadingProfile: userState.loading,
         loadingIDP: userState.loadingIDP,
-        thirdPartyProviders: summitState.third_party_providers,
+        availableThirdPartyProviders: summitState.third_party_providers,
         allowsNativeAuth: summitState.allows_native_auth,
         allowsOtpAuth: summitState.allows_otp_auth,
         summit: summitState.summit,

package/src/components/RegistrationLiteComponent.js

@@ -14,7 +14,7 @@ import {doLogout} from "openstack-uicore-foundation/lib/security/actions"
 import {getEnvVariable, SUMMIT_API_BASE_URL, OAUTH2_CLIENT_ID, REGISTRATION_BASE_URL, SUPPORT_EMAIL} from "../utils/envVariables"
 import {getUserProfile, setPasswordlessLogin, setUserOrder, checkOrderData} from "../actions/user-actions";
 import {getThirdPartyProviders} from "../actions/base-actions";
-import {formatThirdPartyProviders} from "../utils/loginUtils";
+import { validateIdentityProviderButtons } from "../utils/loginUtils";
 import Swal from "sweetalert2";
 import {checkRequireExtraQuestionsByAttendee} from "../actions/user-actions";
 import {userHasAccessLevel, VirtualAccessLevel} from "../utils/authorizedGroups";
@@ -22,32 +22,33 @@ import {userHasAccessLevel, VirtualAccessLevel} from "../utils/authorizedGroups"
 import { getExtraQuestions } from "../actions/summit-actions";
 
 import useMarketingSettings, { MARKETING_SETTINGS_KEYS }  from "@utils/useMarketingSettings";
+import useSiteSettings from "@utils/useSiteSettings";
 import { SentryFallbackFunction } from "./SentryErrorComponent";
 
-import styles from "../styles/marketing-hero.module.scss"
+import styles from "../styles/marketing-hero.module.scss";
 
 const RegistrationLiteComponent = ({
-                                       registrationProfile,
-                                       userProfile,
-                                       attendee,
-                                       getThirdPartyProviders,
-                                       thirdPartyProviders,
-                                       getUserProfile,
-                                       setPasswordlessLogin,
-                                       setUserOrder,
-                                       checkOrderData,
-                                       loadingProfile,
-                                       loadingIDP,
-                                       summit,
-                                       colorSettings,
-                                       marketingPageSettings,
-                                       allowsNativeAuth,
-                                       allowsOtpAuth,
-                                       checkRequireExtraQuestionsByAttendee,
-                                       getExtraQuestions,
-                                       children,
-                                       ignoreAutoOpen
-                                   }) => {
+   registrationProfile,
+   userProfile,
+   attendee,
+   getThirdPartyProviders,
+   availableThirdPartyProviders,
+   getUserProfile,
+   setPasswordlessLogin,
+   setUserOrder,
+   checkOrderData,
+   loadingProfile,
+   loadingIDP,
+   summit,
+   colorSettings,
+   marketingPageSettings,
+   allowsNativeAuth,
+   allowsOtpAuth,
+   checkRequireExtraQuestionsByAttendee,
+   getExtraQuestions,
+   children,
+   ignoreAutoOpen
+}) => {
     const [isActive, setIsActive] = useState(false);
     const [initialEmailValue, setInitialEmailValue] = useState("");
 
@@ -62,8 +63,8 @@ const RegistrationLiteComponent = ({
     }, []);
 
     useEffect(() => {
-        if (!thirdPartyProviders.length) getThirdPartyProviders();
-    }, [thirdPartyProviders]);
+        if (!availableThirdPartyProviders.length) getThirdPartyProviders();
+    }, [availableThirdPartyProviders]);
 
     const getBackURL = () => {
         let backUrl = "/#registration=1";
@@ -122,13 +123,15 @@ const RegistrationLiteComponent = ({
     const orderCompleteButton = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteOrderCompleteButton);
     const noAllowedTicketsMessage = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteNoAllowedTicketsMessage);
 
+    const siteSettings = useSiteSettings();
+
     const widgetProps = {
         apiBaseUrl: getEnvVariable(SUMMIT_API_BASE_URL),
         clientId: getEnvVariable(OAUTH2_CLIENT_ID),
         summitData: summit,
         profileData: registrationProfile,
         marketingData: colorSettings,
-        loginOptions: formatThirdPartyProviders(thirdPartyProviders),
+        loginOptions: validateIdentityProviderButtons(siteSettings?.identityProviderButtons, availableThirdPartyProviders),
         loading: loadingProfile || loadingIDP,
         // only show info if its not a recent purchase
         ticketOwned: userProfile?.summit_tickets?.length > 0,
@@ -219,22 +222,19 @@ RegistrationLiteComponent.propTypes = {
     ignoreAutoOpen: PropTypes.bool,
 };
 
-
-const mapStateToProps = ({userState, summitState, settingState}) => {
-    return ({
-        registrationProfile: userState.idpProfile,
-        userProfile: userState.userProfile,
-        attendee: userState.attendee,
-        loadingProfile: userState.loading,
-        loadingIDP: userState.loadingIDP,
-        thirdPartyProviders: summitState.third_party_providers,
-        allowsNativeAuth: summitState.allows_native_auth,
-        allowsOtpAuth: summitState.allows_otp_auth,
-        summit: summitState.summit,
-        colorSettings: settingState.colorSettings,
-        marketingPageSettings: settingState.marketingPageSettings
-    })
-};
+const mapStateToProps = ({userState, summitState, settingState}) => ({
+    registrationProfile: userState.idpProfile,
+    userProfile: userState.userProfile,
+    attendee: userState.attendee,
+    loadingProfile: userState.loading,
+    loadingIDP: userState.loadingIDP,
+    availableThirdPartyProviders: summitState.third_party_providers,
+    allowsNativeAuth: summitState.allows_native_auth,
+    allowsOtpAuth: summitState.allows_otp_auth,
+    summit: summitState.summit,
+    colorSettings: settingState.colorSettings,
+    marketingPageSettings: settingState.marketingPageSettings
+});
 
 export default connect(mapStateToProps, {
     getThirdPartyProviders,

package/src/components/Seo.js

@@ -13,7 +13,7 @@ const Seo = ({ title, description, location, children }) => {
   } = useSiteMetadata();
 
   const siteSettings = useSiteSettings();
-  const image = siteSettings.siteMetadata?.image
+  const image = siteSettings?.siteMetadata?.image
 
   const siteUrl = getEnvVariable(SITE_URL);
   const siteUrlInfo = siteUrl ? new URL(siteUrl) : null;

package/src/content/site-settings/index.json

@@ -12,5 +12,34 @@
   },
   "favicon": {
     "asset": "icon.png"
-  }
+  },
+  "identityProviderButtons": [
+    {
+      "buttonColor": "#082238",
+      "providerLabel": "Continue with FNid",
+      "providerLogo": "logo_fn.svg",
+      "providerLogoSize": 27
+    },
+    {
+      "buttonColor": "#0A66C2",
+      "providerLabel": "Sign in with LinkedIn",
+      "providerParam": "linkedin",
+      "providerLogo": "logo_linkedin.svg",
+      "providerLogoSize": 18
+    },
+    {
+      "buttonColor": "#000000",
+      "providerLabel": "Sign in with Apple",
+      "providerParam": "apple",
+      "providerLogoSize": 17,
+      "providerLogo": "logo_apple.svg"
+    },
+    {
+      "buttonColor": "#1877F2",
+      "providerLabel": "Login with Facebook",
+      "providerParam": "facebook",
+      "providerLogo": "logo_facebook.svg",
+      "providerLogoSize": 20
+    }
+  ]
 }

package/src/content/sponsors.json

@@ -1 +1 @@
-[{"id":228,"created":1691602669,"last_edited":1691602669,"order":1,"summit_id":49,"is_published":false,"side_image":null,"header_image":null,"header_image_mobile":null,"carousel_advertise_image":null,"marquee":"","intro":"","external_link":"","video_link":"","chat_link":"","featured_event_id":0,"header_image_alt_text":"","side_image_alt_text":"","header_image_mobile_alt_text":"","carousel_advertise_image_alt_text":"","show_logo_in_event_page":true,"members":[90654],"company":{"id":3,"created":1580138376,"last_edited":1580138376,"name":"Tipit , LLC","url":null,"display_on_site":false,"featured":false,"city":null,"state":null,"country":null,"description":null,"industry":null,"contributions":null,"contact_email":null,"member_level":"None","admin_email":null,"overview":null,"products":null,"commitment":null,"commitment_author":null,"logo":null,"big_logo":null,"color":"#f0f0ee","sponsorships":[616],"project_sponsorships":[]},"sponsorship":{"id":2048,"widget_title":"","lobby_template":null,"expo_hall_template":null,"sponsor_page_template":null,"event_page_template":null,"sponsor_page_use_disqus_widget":false,"sponsor_page_use_live_event_widget":false,"sponsor_page_use_schedule_widget":false,"sponsor_page_use_banner_widget":false,"badge_image":null,"badge_image_alt_text":"","summit_id":49,"order":1,"should_display_on_expo_hall_page":false,"should_display_on_lobby_page":false,"type":{"id":3,"created":1579890943,"last_edited":1579890943,"name":"Gold","label":"not sure??","order":3,"size":"Medium"}},"ads":[],"materials":[],"social_networks":[]}]
+[]

package/src/reducers/summit-reducer.js

@@ -1,7 +1,7 @@
 import { START_LOADING, STOP_LOADING } from "openstack-uicore-foundation/lib/utils/actions";
 import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 import { RESET_STATE, GET_THIRD_PARTY_PROVIDERS, SYNC_DATA } from "../actions/base-actions-definitions";
-import { GET_EXTRA_QUESTIONS } from '../actions/user-actions';
+import { GET_EXTRA_QUESTIONS } from "../actions/user-actions";
 
 import summitData from "data/summit.json";
 

package/src/utils/filePath.js

@@ -90,4 +90,4 @@ exports.SPONSORS_FILE_PATH = SPONSORS_FILE_PATH;
 exports.CMS_FONT_FILE_PATH = CMS_FONT_FILE_PATH;
 exports.PAYMENTS_FILE_PATH = PAYMENTS_FILE_PATH;
 exports.APPLE_PAY_DOMAIN_FILE_PATH = APPLE_PAY_DOMAIN_FILE_PATH;
-exports.APPLE_PAY_DOMAIN_FILE_NAME = APPLE_PAY_DOMAIN_FILE_NAME;
+exports.APPLE_PAY_DOMAIN_FILE_NAME = APPLE_PAY_DOMAIN_FILE_NAME;

package/src/utils/loginUtils.js

@@ -1,20 +1,55 @@
-import { getEnvVariable, AUTHORIZED_DEFAULT_PATH } from './envVariables'
+import {
+  getEnvVariable,
+  AUTHORIZED_DEFAULT_PATH
+} from "./envVariables";
 
-export const getDefaultLocation = (eventRedirect, hasVirtualAccess = false) => {
-    const defaultRedirect = hasVirtualAccess ? '/a/' : '/';
-    return eventRedirect ? `/a/event/${eventRedirect}` : getEnvVariable(AUTHORIZED_DEFAULT_PATH) ? getEnvVariable(AUTHORIZED_DEFAULT_PATH) : defaultRedirect;
+export const getDefaultLocation = (
+  eventRedirect,
+  hasVirtualAccess = false
+) => {
+  const defaultRedirect = hasVirtualAccess ? "/a/" : "/";
+  return eventRedirect ? `/a/event/${eventRedirect}` : getEnvVariable(AUTHORIZED_DEFAULT_PATH) ? getEnvVariable(AUTHORIZED_DEFAULT_PATH) : defaultRedirect;
 }
 
-export const formatThirdPartyProviders = (providersArray) => {
-    const providers = [
-        { button_color: '#082238', provider_label: 'Sign in with FNid', provider_param: '', provider_logo: '../img/logo_fn.svg', provider_logo_size: 35 },
-    ];
+const buttonPropertyMapping = {
+  buttonColor: "button_color",
+  buttonBorderColor: "button_border_color",
+  providerLabel: "provider_label",
+  providerParam: "provider_param",
+  providerLogo: "provider_logo",
+  providerLogoSize: "provider_logo_size"
+};
 
-    const thirdPartyProviders = [
-        { button_color: '#1877F2', provider_label: 'Login with Facebook', provider_param: 'facebook', provider_logo: '../img/third-party-idp/logo_facebook.svg', provider_logo_size: 22 },
-        { button_color: '#0A66C2', provider_label: 'Sign in with LinkedIn', provider_param: 'linkedin', provider_logo: '../img/third-party-idp/logo_linkedin.svg', provider_logo_size: 21 },
-        { button_border_color:'var(--color_input_border_color)', button_color: '#000000', provider_label: 'Sign in with Apple', provider_param: 'apple', provider_logo: '../img/third-party-idp/logo_apple.svg', provider_logo_size: 19 }
-    ];
+const mapIdentityProviderButtonProperties = (button) => {
+  const formattedButton = {};
+  for (const key in button) {
+    const mappedKey = buttonPropertyMapping[key] || key;
+    formattedButton[mappedKey] = key === "providerLogo" ? button[key]?.publicURL : button[key];
+  }
+  return formattedButton;
+};
 
-    return [...providers, ...thirdPartyProviders.filter(p => providersArray && providersArray.includes(p.provider_param))];
-};
+/**
+ * Validates identity provider buttons provided in CMS with those social providers available through IDP API.
+ * Filters out invalid or disabled buttons.
+ * @param {Array} indentityProviderButtons Array of identity provider buttons provided by CMS.
+ * @param {Array} availableSocialProviders Array of available social providers provided by IDP API.
+ * @returns {Array} Filtered array of identity provider buttons.
+ */
+export const validateIdentityProviderButtons = (
+  identityProviderButtons,
+  availableSocialProviders
+) => {
+  if (!identityProviderButtons || !availableSocialProviders) {
+    return [];
+  }
+  const filteredButtons = identityProviderButtons
+    .map(mapIdentityProviderButtonProperties)
+    .filter(button =>
+      // default identity provider has no providerParam set
+      !button[buttonPropertyMapping.providerParam] ||
+      availableSocialProviders.includes(button[buttonPropertyMapping.providerParam]) 
+    );
+
+  return filteredButtons;
+};

package/src/utils/useSiteSettings.js

@@ -28,6 +28,16 @@ const siteSettingsQuery = graphql`
           allowClick
         }
       }
+      identityProviderButtons {
+        buttonColor
+        buttonBorderColor
+        providerLabel
+        providerParam
+        providerLogo {
+          publicURL
+        }
+        providerLogoSize
+      }
     }
   }
 `;