chore: improve listener, docs & types

README.md

@@ -62,7 +62,7 @@ Nuxt Auth Utils automatically adds some plugins to fetch the current user sessio
 
 ```vue
 <script setup>
-const { loggedIn, user, session, fetch, clear } = useUserSession()
+const { loggedIn, user, session, fetch, clear, openInPopup } = useUserSession()
 </script>
 
 <template>
@@ -74,6 +74,8 @@ const { loggedIn, user, session, fetch, clear } = useUserSession()
   <div v-else>
     <h1>Not logged in</h1>
     <a href="/auth/github">Login with GitHub</a>
+    <!-- or open the OAuth route in a popup -->
+    <button @click="openInPopup('/auth/github')">Login with GitHub</button>
   </div>
 </template>
 ```
@@ -106,6 +108,10 @@ interface UserSessionComposable {
    * Clear the user session and remove the session cookie.
    */
   clear: () => Promise<void>
+  /**
+   * Open the OAuth route in a popup that auto-closes when successful.
+   */
+  openInPopup: (route: string, size?: { width?: number, height?: number }) => void
 }
 ```
 

playground/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { user, openInPopup } = useUserSession()
 
+const inPopup = ref(false)
 const providers = computed(() =>
   [
     {
@@ -209,8 +210,6 @@ const providers = computed(() =>
     click: inPopup.value ? () => openInPopup(p.to) : void 0,
   })),
 )
-
-const inPopup = ref(false)
 </script>
 
 <template>
@@ -248,11 +247,6 @@ const inPopup = ref(false)
           >
             Logout
           </UButton>
-          <UCheckbox
-            v-model="inPopup"
-            name="open-in-popup"
-            label="Open in popup"
-          />
         </template>
         <template #placeholder>
           <UButton
@@ -268,6 +262,14 @@ const inPopup = ref(false)
   </UHeader>
   <UMain>
     <UContainer>
+      <div class="text-xs mt-4">
+        Popup mode <UToggle
+          v-model="inPopup"
+          size="xs"
+          name="open-in-popup"
+          label="Open in popup"
+        />
+      </div>
       <NuxtPage />
     </UContainer>
   </UMain>

src/runtime/app/composables/session.ts

@@ -38,30 +38,32 @@ export function useUserSession(): UserSessionComposable {
     }
   }
 
-  const openInPopup = (route, size = { width: 960, height: 600 }) => {
+  const popupListener = (e: StorageEvent) => {
+    if (e.key === 'temp-nuxt-auth-utils-popup') {
+      fetch()
+      window.removeEventListener('storage', popupListener)
+    }
+  }
+  const openInPopup = (route: string, size: { width?: number, height?: number } = {}) => {
     // Set a local storage item to tell the popup that we pending auth
     localStorage.setItem('temp-nuxt-auth-utils-popup', 'true')
 
-    const top
-      = window.top.outerHeight / 2
-      + window.top.screenY
-      - size.height / 2
-    const left
-      = window.top.outerWidth / 2
-      + window.top.screenX
-      - size.width / 2
+    const width = size.width ?? 960
+    const height = size.height ?? 600
+    const top = (window.top?.outerHeight ?? 0) / 2
+      + (window.top?.screenY ?? 0)
+      - height / 2
+    const left = (window.top?.outerWidth ?? 0) / 2
+      + (window.top?.screenX ?? 0)
+      - width / 2
 
     window.open(
       route,
       'nuxt-auth-utils-popup',
-      `width=${size.width}, height=${size.height}, top=${top}, left=${left}, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no`,
+      `width=${width}, height=${height}, top=${top}, left=${left}, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no`,
     )
 
-    window.addEventListener('storage', (e: StorageEvent) => {
-      if (e.key === 'temp-nuxt-auth-utils-popup') {
-        fetch()
-      }
-    }, { once: true })
+    window.addEventListener('storage', popupListener)
   }
 
   return {

src/runtime/types/session.ts

@@ -50,4 +50,8 @@ export interface UserSessionComposable {
    * Clear the user session and remove the session cookie.
    */
   clear: () => Promise<void>
+  /**
+   * Open the OAuth route in a popup that auto-closes when successful.
+   */
+  openInPopup: (route: string, size?: { width?: number, height?: number }) => void
 }