Init

apps/web/plugins/auth.ts

@@ -0,0 +1,12 @@
+import { fetchCurrentUser, useUser } from '~/composables/useAuth'
+
+export default defineNuxtPlugin(async () => {
+  const user = useUser()
+
+  // Skip if already initialized on server
+  if (user.value !== undefined) {
+    return
+  }
+
+  user.value = await fetchCurrentUser()
+})

apps/web/plugins/echo.client.ts

@@ -0,0 +1,53 @@
+import Echo from 'laravel-echo'
+import Pusher from 'pusher-js'
+
+declare global {
+  interface Window {
+    Pusher: typeof Pusher
+  }
+}
+
+window.Pusher = Pusher
+
+export default defineNuxtPlugin(() => {
+  const runtimeConfig = useRuntimeConfig()
+  const echo = new Echo({
+    broadcaster: runtimeConfig.public.echo.broadcaster,
+    key: runtimeConfig.public.echo.key,
+    cluster: 'mt1',
+    wsHost: runtimeConfig.public.echo.wsHost,
+    wsPort: runtimeConfig.public.echo.wsPort,
+    wssPort: runtimeConfig.public.echo.wsPort,
+    forceTLS: false,
+    encrypted: runtimeConfig.public.echo.encrypted,
+    disableStats: runtimeConfig.public.echo.disableStats,
+    enabledTransports: ['ws', 'wss'],
+    authorizer: (channel: { name: any }) => {
+      return {
+        authorize: async (socketId: string, callback: (error: any, respnse?: any) => void) => {
+          try {
+            const response = await $larafetch(`/broadcasting/auth`, {
+              method: 'POST',
+              body: {
+                socket_id: socketId,
+                channel_name: channel.name,
+              },
+            })
+
+            callback(null, response)
+          }
+          catch (error) {
+            callback(error)
+          }
+        },
+      }
+    },
+  })
+
+  // Make Echo instance available through the Nuxt app
+  return {
+    provide: {
+      echo,
+    },
+  }
+})

apps/web/plugins/error-handler.ts

@@ -0,0 +1,19 @@
+import { FetchError } from 'ofetch'
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  nuxtApp.hook('vue:error', (error) => {
+    if (!(error instanceof FetchError)) {
+      throw error
+    }
+
+    const status = error.response?.status ?? -1
+
+    if ([401, 419].includes(status)) {
+      navigateTo('/login')
+    }
+
+    if ([409].includes(status)) {
+      navigateTo('/verify-email')
+    }
+  })
+})