Added openInPopup in composable

playground/app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { user } = useUserSession()
+const { user, openInPopup } = useUserSession()
 
 const providers = computed(() =>
   [
@@ -199,8 +199,12 @@ const providers = computed(() =>
     ...p,
     prefetch: false,
     external: true,
+    to: inPopup.value ? '#' : p.to,
+    click: inPopup.value ? () => openInPopup(p.label.toLowerCase(), p.to) : void 0,
   })),
 )
+
+const inPopup = ref(true)
 </script>
 
 <template>
@@ -238,6 +242,11 @@ const providers = computed(() =>
           >
             Logout
           </UButton>
+          <UCheckbox
+            v-model="inPopup"
+            name="open-in-popup"
+            label="Open in popup"
+          />
         </template>
         <template #placeholder>
           <UButton

src/runtime/app/composables/session.ts

@@ -2,6 +2,17 @@ import { appendResponseHeader } from 'h3'
 import { useState, computed, useRequestFetch, useRequestEvent } from '#imports'
 import type { UserSession, UserSessionComposable } from '#auth-utils'
 
+const PROVIDERS = {
+  github: {
+    width: 960,
+    height: 600,
+  },
+  gitlab: {
+    width: 1100,
+    height: 650,
+  },
+}
+
 /**
  * Composable to get back the user session and utils around it.
  * @see https://github.com/atinux/nuxt-auth-utils
@@ -38,12 +49,48 @@ export function useUserSession(): UserSessionComposable {
     }
   }
 
+  const isInPopup = useCookie('temp-nuxt-auth-utils-popup')
+
+  const openInPopup = (provider, route) => {
+    // Set a cookie to tell the popup that we pending auth
+    isInPopup.value = true
+
+    const conf = PROVIDERS[provider]
+    const top
+      = window.top.outerHeight / 2
+      + window.top.screenY
+      - conf.height / 2
+    const left
+      = window.top.outerWidth / 2
+      + window.top.screenX
+      - conf.width / 2
+
+    window.open(
+      route,
+      'nuxt-auth-utils-popup',
+      `width=${conf.width}, height=${conf.height}, top=${top}, left=${left}, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no`,
+    )
+
+    watch(isInPopup, () => {
+      fetch()
+    })
+  }
+
+  if (isInPopup.value)
+    onMounted(() => {
+      // There is a cookie, so we are coming back in the popup
+      // Clear the cookie and close the popup
+      isInPopup.value = null
+      window.close()
+    })
+
   return {
     ready: computed(() => authReadyState.value),
     loggedIn: computed(() => Boolean(sessionState.value.user)),
     user: computed(() => sessionState.value.user || null),
     session: sessionState,
     fetch,
+    openInPopup,
     clear,
   }
 }