Adds sw for auth handling in iframe

apps/app/public/sw.js

@@ -0,0 +1,21 @@
+self.addEventListener('install', (event) => {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('message', (event) => {
+    if (event.data.action === 'setSession') {
+        setSession(event.data.session);
+    }
+});
+
+function setSession(session) {
+    self.clients.matchAll().then((clients) => {
+        clients.forEach((client) => {
+            client.postMessage({ type: 'setSession', data: { session } });
+        });
+    });
+}

apps/app/src/stores/Account.ts

@@ -46,6 +46,7 @@ export const useAccountStore = defineStore('account', {
         isMobileIFrame: window.top !== window.self && isMobileDevice,
         isMobileEthereumBrowser: window.ethereum && isMobileDevice,
         isNavbarOffcanvasShown: false,
+        sw: null as ServiceWorkerRegistration | null,
     }),
     actions: {
         setGlobals(config: { activeWalletId: string }) {
@@ -104,6 +105,11 @@ export const useAccountStore = defineStore('account', {
                     const fn = authEventMap[event];
                     if (fn) fn(session);
                 });
+
+                // Listen for popup auth events
+                this.sw = await navigator.serviceWorker.register('/sw.js');
+                await navigator.serviceWorker.ready;
+                navigator.serviceWorker.addEventListener('message', this.onServiceWorkerMessage);
             }
 
             // If no slug is provided we're not on a campaign page so we return early
@@ -116,6 +122,13 @@ export const useAccountStore = defineStore('account', {
             this.setConfig(config.poolId, { ...config, origin });
             this.setTheme(config);
         },
+        async onServiceWorkerMessage(event: MessageEvent) {
+            switch (event.data.type) {
+                case 'setSession':
+                    await this.setSession(event.data.data.session);
+                    break;
+            }
+        },
         async onSignedIn(session: Session | null) {
             if (session) {
                 await this.setSession(session);

apps/app/src/types/interfaces/account.d.ts

@@ -81,6 +81,7 @@ type TAccountState = {
     participants: TParticipant[];
     leaderboard: { rank: number; score: number; questEntryCount: number; account: TAccount }[];
     isNavbarOffcanvasShown: boolean;
+    sw: ServiceWorkerRegistration | null;
 };
 
 type TWidgetTheme = {

apps/app/src/views/SigninRedirect.vue

@@ -21,6 +21,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { supabase } from '../stores/Account';
 
 export default defineComponent({
     name: 'ViewSigninRedirect',
@@ -38,11 +39,21 @@ export default defineComponent({
         },
     },
     // User is only redirected here using auth on an _blank page or popup
-    mounted() {
+    async mounted() {
         // Check query params for error
         if (this.$route.query.error) {
             this.error = this.$route.query.error_description;
         }
+
+        // Start listening for signed_in event
+        else {
+            const { data, error } = await supabase.auth.getSession();
+            if (error) throw new Error(error.message);
+            navigator.serviceWorker.controller?.postMessage({
+                action: 'setSession',
+                session: data.session,
+            });
+        }
     },
     methods: {
         onClickClose() {