Merge pull request #228 from aroskanalen/feature/394-fix-multiple-oid…

…c-login-buttons #394: Changed login page to only get oidc urls when a login button ha…
os2display · Feb 29, 2024 · d6c7f7f · d6c7f7f
2 parents f52ab37 + 2cae060
commit d6c7f7f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#228](https://github.com/os2display/display-admin-client/pull/228)
+  - Changed login page to only get oidc urls when a login button has been clicked.
 - [#227](https://github.com/os2display/display-admin-client/pull/227)
   - Changed how theme is loaded following change to API
 - Added fetch all to avoid removing slides when saving playlist and all slides have not been fetched.

diff --git a/src/components/user/login.jsx b/src/components/user/login.jsx
@@ -208,7 +208,7 @@ function Login() {
           },
           {
             type: "oidc",
-            provider: "internal",
+            provider: "external",
             enabled: true,
             label: null,
             icon: null,

diff --git a/src/components/user/oidc-login.jsx b/src/components/user/oidc-login.jsx
@@ -25,30 +25,6 @@ function OIDCLogin({ config }) {
   const [oidcAuthUrl, setOidcAuthUrl] = useState("");
   const [oidcAuthLoadingError, setOidcAuthLoadingError] = useState("");
 
-  useEffect(() => {
-    if (!provider) {
-      return;
-    }
-
-    ConfigLoader.loadConfig().then((siteConfig) => {
-      fetch(
-        `${siteConfig.api}v1/authentication/oidc/urls?providerKey=${provider}`,
-        {
-          mode: "cors",
-          credentials: "include",
-        }
-      )
-        .then((resp) => {
-          resp.json().then((data) => {
-            setOidcAuthUrl(data.authorizationUrl);
-          });
-        })
-        .catch(() => {
-          setOidcAuthLoadingError(t("error-fetching-oidc-urls"));
-        });
-    });
-  }, [provider]);
-
   let labelText = label;
 
   if (labelText === null) {
@@ -76,23 +52,43 @@ function OIDCLogin({ config }) {
     }
   }
 
+  /**
+   * Get oidc urls when chosen oidc provider is clicked. After redirecting to
+   * the url, a session is set in the API. Therefore, only one
+   * "v1/authentication/oidc/urls" session can be active at a time.
+   */
+  const onClick = () => {
+    ConfigLoader.loadConfig().then((siteConfig) => {
+      fetch(
+        `${siteConfig.api}v1/authentication/oidc/urls?providerKey=${provider}`,
+        {
+          mode: "cors",
+          credentials: "include",
+        }
+      )
+        .then((resp) => {
+          resp.json().then((data) => {
+            window.location.href = data.authorizationUrl;
+          });
+        })
+        .catch(() => {
+          setOidcAuthLoadingError(t("error-fetching-oidc-urls"));
+        });
+    });
+  };
+
   return (
     <>
-      {!oidcAuthUrl && (
-        <Spinner animation="grow" className="margin-right-button" />
-      )}
-      {oidcAuthUrl !== "" && (
-        <a
-          href={oidcAuthUrl}
-          className="margin-right-button btn btn-primary btn-lg d-flex justify-content-center align-items-center"
-          style={{ minWidth: "160px" }}
-          aria-label={t("login-with-oidc-aria-label")}
-          aria-describedby="ad-explanation"
-        >
-          {iconRender}
-          {labelText}
-        </a>
-      )}
+      <div
+        onClick={onClick}
+        className="margin-right-button btn btn-primary btn-lg d-flex justify-content-center align-items-center"
+        style={{ minWidth: "160px" }}
+        aria-label={t("login-with-oidc-aria-label")}
+        aria-describedby="ad-explanation"
+      >
+        {iconRender}
+        {labelText}
+      </div>
       {oidcAuthLoadingError !== "" && (
         <Alert variant="danger mt-2">{oidcAuthLoadingError}</Alert>
       )}