@floatingpixels/supabase-nuxt 0.1.7 → 0.1.8

package/README.md

@@ -158,7 +158,7 @@ Once the authorization flow is triggered using the `auth` wrapper of the `useSup
 
 ### E-Mail Authentication
 
-When using e-mail authentication, a confirmation e-mail is sent to new users, and an e-mail containing a magic link is sent to existing users. For those links to work with your application, you need to adjust the e-mail templates in your Supabase settings under `Aithentication -> Email Templates`. The generated links must contain a `token_hash` and `type` URL parameter, and point to the confirmation URL of your app, which is `/supabase/confirm` by default. In addition you can set the URL parameter `next` to determine the route users will be forwarded to in your app when authorization is successful. If `next` is omitted, it will route to `/`. An example template looks like this:
+When using e-mail authentication, a confirmation e-mail is sent to new users, and an e-mail containing a magic link is sent to existing users. For those links to work with your application, you need to adjust the e-mail templates in your Supabase settings under `Authentication -> Email Templates`. The generated links must contain a `token_hash` and `type` URL parameter, and point to the confirmation URL of your app, which is `/supabase/confirm` by default. In addition you can set the URL parameter `next` to determine the route users will be forwarded to in your app when authorization is successful. If `next` is omitted, it will route to `/`. An example template looks like this:
 
 ```html
 <h2>Confirm your signup</h2>
@@ -171,7 +171,9 @@ When using e-mail authentication, a confirmation e-mail is sent to new users, an
 </p>
 ```
 
-The confirmation route on your server is provided by this module, so you don't need to implement it yourself. It's available at `/supabase/confirm`. It will automatically confirm the user and redirect to the `next` route. If you want to customize the confirmation route, you can do so by creating a server route to handle the request, and point to it in your Supabase e-mail template. Your custom route will receive the `token_hash` and `type` URL parameters, and the `next` URL parameter if provided. You can use the `useSupabaseClient` composable to confirm the user and redirect to the `next` route:
+The confirmation route on your server is provided by this module, so you don't need to implement it yourself. It's available at `/supabase/confirm`. It will automatically confirm the user and redirect to the `next` route.
+
+If you want to customize the confirmation route, you can do so by creating a server route to handle the request, and point to it in your Supabase e-mail template. Your custom route will receive the `token_hash` and `type` URL parameters, and the `next` URL parameter if provided. You can use the `useSupabaseClient` composable to confirm the user and redirect to the `next` route:
 
 > ⚠️ You can use the provided confirm route at `/supabase/confirm`, the implementation of a custom route is optional!
 
@@ -247,6 +249,29 @@ export default defineEventHandler(async event => {
 
 If `redirect` is set to `true` in the module options, users will be automatically routed to the login page when they are not authenticated. If you want to allow access to "public" pages, you just need to add them in the `exclude` `redirect` option, and they will not redirect unauthenticated users.
 
+### Error Handling
+
+When an authentication error occurs, an exception is thrown. You can create an error page in the root of your app, to show an appropriate error message, clear the error and send the user to an appropriate route to continue. Here is an example for `error.vue`:
+
+```vue
+<script setup lang="ts">
+import type { H3Error } from 'h3'
+const { error } = defineProps<{
+  error: H3Error
+}>()
+
+const handleError = () => clearError({ redirect: '/' })
+</script>
+
+<template>
+  <div>
+    <h2>{{ error.statusCode }}</h2>
+    <p>{{ error.message }}</p>
+    <button @click="handleError">Clear errors</button>
+  </div>
+</template>
+```
+
 ## Composables
 
 ### useSupabaseClient

package/dist/module.d.mts

@@ -1,5 +1,20 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { SupabaseClientOptions } from '@supabase/supabase-js';
+import { CookieOptions } from 'nuxt/app';
 
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig {
+    supabase: {
+      url: string
+      key: string
+      redirect: boolean
+      redirectOptions: RedirectOptions
+      cookieName: string
+      cookieOptions: CookieOptions
+      clientOptions: SupabaseClientOptions<string>
+    }
+  }
+}
 interface ModuleOptions {
   /**
    * Supabase API URL

package/dist/module.d.ts

@@ -1,5 +1,20 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { SupabaseClientOptions } from '@supabase/supabase-js';
+import { CookieOptions } from 'nuxt/app';
 
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig {
+    supabase: {
+      url: string
+      key: string
+      redirect: boolean
+      redirectOptions: RedirectOptions
+      cookieName: string
+      cookieOptions: CookieOptions
+      clientOptions: SupabaseClientOptions<string>
+    }
+  }
+}
 interface ModuleOptions {
   /**
    * Supabase API URL

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">3.0.0"
   },
-  "version": "0.1.7"
+  "version": "0.1.8"
 }

package/dist/module.mjs

@@ -33,9 +33,13 @@ const module = defineNuxtModule({
       }
     }
   },
+  // hooks: {
+  //   'pages:routerOptions': options => {
+  //     console.info(`Router options: ${options}`)
+  //   },
+  // },
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    console.log("Module setup function");
     if (!options.url) {
       console.warn("Missing `SUPABASE_URL` in `.env`");
     }
@@ -55,6 +59,7 @@ const module = defineNuxtModule({
     });
     addPlugin(resolve("./runtime/plugins/supabase.server"));
     addPlugin(resolve("./runtime/plugins/supabase.client"));
+    addPlugin(resolve("./runtime/plugins/middleware-auth"));
     nuxt.hook("imports:dirs", (dirs) => {
       dirs.push(resolve("./runtime/composables"));
     });
@@ -67,7 +72,7 @@ const module = defineNuxtModule({
       handler: resolve("./runtime/server/auth/callback")
     });
     if (options.redirect) {
-      addPlugin(resolve("./runtime/plugins/auth-redirect"));
+      addPlugin(resolve("./runtime/plugins/middleware-auth-redirect"));
     }
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.alias = nitroConfig.alias || {};

package/dist/runtime/plugins/{auth-redirect.mjs → middleware-auth-redirect.mjs}

@@ -1,23 +1,14 @@
 import { useSupabaseUser } from "../composables/useSupabaseUser.mjs";
-import {
-  defineNuxtPlugin,
-  addRouteMiddleware,
-  defineNuxtRouteMiddleware,
-  useRuntimeConfig,
-  navigateTo,
-  abortNavigation
-} from "#imports";
+import { defineNuxtPlugin, addRouteMiddleware, defineNuxtRouteMiddleware, useRuntimeConfig, navigateTo } from "#imports";
 export default defineNuxtPlugin({
-  name: "auth-redirect",
+  name: "middleware-auth-redirect",
   setup() {
     addRouteMiddleware(
-      "global-auth",
+      "02-global-auth-redirect",
       defineNuxtRouteMiddleware(async (to) => {
-        if (to.path === "/supabase/confirm")
-          abortNavigation();
         const config = useRuntimeConfig().public.supabase;
         const { login, exclude } = config.redirectOptions;
-        const isExcluded = [...exclude, login, "/supabase/confirm"]?.some((path) => {
+        const isExcluded = [...exclude || [], login ? login : "/login"]?.some((path) => {
           const regex = new RegExp(`^${path.replace(/\*/g, ".*")}$`);
           return regex.test(to.path);
         });
@@ -25,8 +16,7 @@ export default defineNuxtPlugin({
           return;
         const user = await useSupabaseUser();
         if (!user) {
-          if (to.path !== "/login")
-            return navigateTo("/login");
+          return navigateTo("/login");
         }
       }),
       { global: true }

package/dist/runtime/plugins/middleware-auth.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/middleware-auth.mjs

@@ -0,0 +1,14 @@
+import { defineNuxtPlugin, addRouteMiddleware, defineNuxtRouteMiddleware, navigateTo } from "#imports";
+export default defineNuxtPlugin({
+  name: "middleware-auth",
+  setup() {
+    addRouteMiddleware(
+      "01-global-auth",
+      defineNuxtRouteMiddleware(async (to) => {
+        if (to.path.startsWith("/supabase/"))
+          navigateTo("/");
+      }),
+      { global: true }
+    );
+  }
+});

package/dist/runtime/server/services/supabaseServerClient.mjs

@@ -4,7 +4,7 @@ import { useRuntimeConfig } from "#imports";
 export const supabaseServerClient = async (event) => {
   const {
     supabase: { url, key, cookieOptions }
-  } = useRuntimeConfig(event).public;
+  } = useRuntimeConfig().public;
   let supabaseClient = event.context._supabaseClient;
   if (!supabaseClient) {
     supabaseClient = createServerClient(url, key, {
@@ -13,7 +13,7 @@ export const supabaseServerClient = async (event) => {
           return getCookie(event, name);
         },
         set(name, value) {
-          setCookie(event, name, value);
+          setCookie(event, name, value, cookieOptions);
         },
         remove(key2, options) {
           setCookie(event, key2, "", { ...options, expires: 0 });

package/dist/runtime/server/services/supabaseServiceRole.mjs

@@ -7,7 +7,7 @@ export const supabaseServiceRole = async (event) => {
     public: {
       supabase: { url, cookieOptions }
     }
-  } = useRuntimeConfig(event);
+  } = useRuntimeConfig();
   if (!serviceKey) {
     throw new Error("Missing `SUPABASE_SERVICE_KEY` in `.env`");
   }

package/dist/runtime/types/index.d.ts

@@ -1,3 +1,18 @@
+import { SupabaseClientOptions } from '@supabase/supabase-js'
+import { CookieOptions } from 'nuxt/app'
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig {
+    supabase: {
+      url: string
+      key: string
+      redirect: boolean
+      redirectOptions: RedirectOptions
+      cookieName: string
+      cookieOptions: CookieOptions
+      clientOptions: SupabaseClientOptions<string>
+    }
+  }
+}
 export interface ModuleOptions {
   /**
    * Supabase API URL

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floatingpixels/supabase-nuxt",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Supabase module for Nuxt",
   "repository": "floatingpixels/supabase-nuxt",
   "license": "MIT",