First commit

sso-demo/public/js/sso.js

@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const ssoLoginButton = document.getElementById('sso-login-btn');
+
+    if (ssoLoginButton) {
+        ssoLoginButton.addEventListener('click', () => {
+            // Open the SSO provider's login page in a popup
+            const ssoUrl = '/sso_popup.html'; // This is our simulated SSO provider
+            const popupWidth = 500;
+            const popupHeight = 600;
+            const left = (screen.width / 2) - (popupWidth / 2);
+            const top = (screen.height / 2) - (popupHeight / 2);
+
+            const popup = window.open(
+                ssoUrl,
+                'ssoLogin',
+                `width=${popupWidth},height=${popupHeight},top=${top},left=${left}`
+            );
+
+            // Listen for a message from the popup
+            window.addEventListener('message', (event) => {
+                // IMPORTANT: In a real app, verify the origin of the message for security
+                // if (event.origin !== 'https://your-sso-provider.com') {
+                //     return;
+                // }
+
+                // Check if the message contains the expected data structure
+                if (event.data && event.data.type === 'LOGIN_SUCCESS' && event.data.token) {
+                    popup.close();
+
+                    // Reload the page with the token in the query string
+                    // This will be handled by our backend ssoHandler middleware
+                    window.location.search = `?token=${event.data.token}`;
+                }
+            }, { once: true }); // Use 'once' to automatically remove the listener after it's called
+        });
+    }
+});