@luxfi/core 4.4.1 → 4.4.4

package/components/auth/auth-listener.tsx

@@ -6,16 +6,16 @@ import { useAuth } from '@hanzo/auth/service'
 const AuthListener = () => {
   const auth = useAuth()
 
-  useEffect(() => {
-    if (!!localStorage.getItem('auth-token')) {
-      console.log("Detected auth-token cookie... Logging in...")
-      auth.loginWithCustomToken(localStorage.getItem('auth-token') as string)
-    }
+  const requestAuthToken = () => {
+    const childFrame = document.getElementById('login') as HTMLIFrameElement
+    childFrame?.contentWindow?.postMessage(true, process.env.NEXT_PUBLIC_LOGIN_SITE_URL ?? '')
+  }
 
+  useEffect(() => {
     const handleMessage = (event: any) => {
       if (event.origin === process.env.NEXT_PUBLIC_AUTH_ORIGIN) {
         const token = event.data
-        localStorage.setItem('auth-token', token)
+        auth.loginWithCustomToken(token)
       }
     }
 
@@ -26,7 +26,7 @@ const AuthListener = () => {
     }
   }, [])
 
-  return (<></>)
+  return (<iframe id='login' onLoad={requestAuthToken} src={process.env.NEXT_PUBLIC_LOGIN_SITE_URL}/>)
 }
 
 export default AuthListener

package/components/auth/login-panel.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Link from 'next/link'
 import Autoplay from 'embla-carousel-autoplay'
 
@@ -9,6 +11,7 @@ import { Logo } from '..'
 import LuxLogo from '../icons/lux-logo'
 import { legal } from '../../site-def/footer'
 import domains from './common-auth-domains'
+import { useEffect } from 'react'
 
 const LoginPanel: React.FC<{
   close: () => void
@@ -27,13 +30,28 @@ const LoginPanel: React.FC<{
   const privacyPolicyUrl = legal.find(({title}) => title === 'Privacy Policy')?.href || ''
 
   const onLogin = (token: string) => {
-    for (const { id, url } of domains) {
-      const childFrame = document.getElementById(id) as HTMLIFrameElement
-      childFrame?.contentWindow?.postMessage(token, url)
+    localStorage.setItem('auth-token', token)
+    for (const { url } of domains) {
+      parent?.contentWindow?.postMessage(token, url)
     }
   }
 
-  return (<>
+  useEffect(() => {
+    const handleMessage = (event: any) => {
+      if (domains.includes(event.origin)) {
+        const token = localStorage.getItem('auth-token')
+        parent.contentWindow?.postMessage(token, event.origin)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => {
+      window.removeEventListener('message', handleMessage)
+    }
+  }, [])
+
+  return (
     <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
       <div className='hidden md:flex w-full h-full bg-level-1 flex-row items-end justify-end overflow-y-auto min-h-screen'>
         <div className='h-full w-full max-w-[750px] px-8 pt-0'>
@@ -86,12 +104,7 @@ const LoginPanel: React.FC<{
         </div>
       </div>
     </div>
-    <div className="hidden">
-      {domains.map(({ id, url }) => (
-        <iframe key={id} id={id} src={`${url}/login`} />
-      ))}
-    </div>
-  </>)
+  )
 }
 
 export default LoginPanel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "4.4.1",
+  "version": "4.4.4",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -39,8 +39,8 @@
     "./conf": "./conf/index.ts"
   },
   "dependencies": {
-    "@hanzo/auth": "2.4.1",
-    "@hanzo/commerce": "6.4.1",
+    "@hanzo/auth": "2.4.2",
+    "@hanzo/commerce": "6.4.2",
     "@hanzo/ui": "3.6.3",
     "@next/third-parties": "^14.1.0",
     "embla-carousel-autoplay": "^8.0.1",