@floatingpixels/supabase-nuxt 0.1.7 → 0.1.9

package/README.md

@@ -158,20 +158,22 @@ 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/auth/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>
 
 <p>Follow this link to confirm your user:</p>
 <p>
-  <a href="{{ .SiteURL }}/supabase/confirm?token_hash={{ .TokenHash }}&type=email&next=/path-to-your-page"
+  <a href="{{ .SiteURL }}/supabase/auth/confirm?token_hash={{ .TokenHash }}&type=email&next=/path-to-your-page"
     >Confirm your email</a
   >
 </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/auth/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!
 
@@ -202,14 +204,14 @@ export default defineEventHandler(async event => {
 
 ### OAuth Authentication
 
-When using OAuth authentication, you need to configure the OAuth provider in your Supabase settings under `Authentication -> Providers`. You can then use the `signInWithOAuth` method of the `auth` wrapper of the `useSupabaseClient` composable to initiate the authorization flow. This module provides a default callback under `/supabase/callback` that you can provide to the authentication function:
+When using OAuth authentication, you need to configure the OAuth provider in your Supabase settings under `Authentication -> Providers`. You can then use the `signInWithOAuth` method of the `auth` wrapper of the `useSupabaseClient` composable to initiate the authorization flow. This module provides a default callback under `/supabase/auth/callback` that you can provide to the authentication function:
 
 ```ts [pages/login.vue]
 const signInWithOAuth = async () => {
   const { error } = await supabase.auth.signInWithOAuth({
     provider: 'github',
     options: {
-      redirectTo: 'http://<your-site-url>/supabase/callback',
+      redirectTo: 'http://<your-site-url>/supabase/auth/callback',
     },
   })
   if (error) console.log(error)
@@ -218,7 +220,7 @@ const signInWithOAuth = async () => {
 
 You can customize the callback by creating your own server route, and point to it when calling `signInWithOAuth`. The callback route will receive a code, that needs to be exchanged for a session. Here is an example:
 
-> ⚠️ You can use the provided callback route at `/supabase/callback`, the implementation of a custom callback is optional!
+> ⚠️ You can use the provided callback route at `/supabase/auth/callback`, the implementation of a custom callback is optional!
 
 ```ts [server/api/callback.ts]
 import { supabaseServerClient } from '#supabase/server'
@@ -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.9"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, addServerHandler, addTemplate, extendViteConfig } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerHandler, addPlugin, addTemplate, extendViteConfig } from '@nuxt/kit';
 import { defu } from 'defu';
 
 const module = defineNuxtModule({
@@ -35,7 +35,6 @@ const module = defineNuxtModule({
   },
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    console.log("Module setup function");
     if (!options.url) {
       console.warn("Missing `SUPABASE_URL` in `.env`");
     }
@@ -53,21 +52,23 @@ const module = defineNuxtModule({
     nuxt.options.runtimeConfig.supabase = defu(nuxt.options.runtimeConfig.supabase, {
       serviceKey: options.serviceKey
     });
+    addServerHandler({
+      route: "/supabase/auth/confirm",
+      handler: resolve("./runtime/server/auth/confirm"),
+      method: "get"
+    });
+    addServerHandler({
+      route: "/supabase/auth/callback",
+      handler: resolve("./runtime/server/auth/callback"),
+      method: "get"
+    });
     addPlugin(resolve("./runtime/plugins/supabase.server"));
     addPlugin(resolve("./runtime/plugins/supabase.client"));
     nuxt.hook("imports:dirs", (dirs) => {
       dirs.push(resolve("./runtime/composables"));
     });
-    addServerHandler({
-      route: "/supabase/confirm",
-      handler: resolve("./runtime/server/auth/confirm")
-    });
-    addServerHandler({
-      route: "/supabase/callback",
-      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 || {};
@@ -90,18 +91,17 @@ const module = defineNuxtModule({
       options2.references.push({ path: resolve(nuxt.options.buildDir, "types/supabase.d.ts") });
     });
     extendViteConfig((config) => {
-      config.optimizeDeps = config.optimizeDeps || {};
-      config.optimizeDeps.include = config.optimizeDeps.include || [];
-      config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
-      config.optimizeDeps.include.push(
-        "@supabase/functions-js",
-        "@supabase/gotrue-js",
-        "@supabase/postgrest-js",
-        "@supabase/realtime-js",
-        "@supabase/storage-js",
-        "@supabase/supabase-js",
-        "@supabase/ssr"
-      );
+      config.optimizeDeps = defu(typeof config.optimizeDeps === "object" ? config.optimizeDeps : {}, {
+        include: [
+          "@supabase/functions-js",
+          "@supabase/gotrue-js",
+          "@supabase/postgrest-js",
+          "@supabase/realtime-js",
+          "@supabase/storage-js",
+          "@supabase/supabase-js",
+          "@supabase/ssr"
+        ]
+      });
     });
   }
 });

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/supabase.client.d.ts

@@ -1,2 +1,10 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").Plugin<{
+    supabase: {
+        client: import("@supabase/supabase-js").SupabaseClient<any, "public", any>;
+    };
+}> & import("nuxt/app").ObjectPlugin<{
+    supabase: {
+        client: import("@supabase/supabase-js").SupabaseClient<any, "public", any>;
+    };
+}>;
 export default _default;

package/dist/runtime/plugins/supabase.client.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin, useRuntimeConfig, useCookie } from "#imports";
+import { defineNuxtPlugin, useRuntimeConfig, useCookie } from "nuxt/app";
 import { createBrowserClient } from "@supabase/ssr";
 export default defineNuxtPlugin({
   name: "supabase",
@@ -12,7 +12,7 @@ export default defineNuxtPlugin({
           return useCookie(name).value;
         },
         set(name, value) {
-          useCookie(name, cookieOptions).value = value;
+          useCookie(name, { ...cookieOptions, readonly: false }).value = value;
         },
         remove(key2, options) {
           useCookie(key2, { ...options, expires: 0 }).value = "";
@@ -28,8 +28,5 @@ export default defineNuxtPlugin({
         }
       }
     };
-  },
-  env: {
-    islands: false
   }
 });

package/dist/runtime/plugins/supabase.server.d.ts

@@ -1,2 +1,10 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").Plugin<{
+    supabase: {
+        client: import("@supabase/supabase-js").SupabaseClient<any, "public", any>;
+    };
+}> & import("nuxt/app").ObjectPlugin<{
+    supabase: {
+        client: import("@supabase/supabase-js").SupabaseClient<any, "public", any>;
+    };
+}>;
 export default _default;

package/dist/runtime/plugins/supabase.server.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin, useRuntimeConfig, useRequestEvent } from "#imports";
+import { defineNuxtPlugin, useRuntimeConfig, useRequestEvent } from "nuxt/app";
 import { createServerClient } from "@supabase/ssr";
 import { getCookie, setCookie } from "h3";
 export default defineNuxtPlugin({

package/dist/runtime/server/auth/callback.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<void>>;
 export default _default;

package/dist/runtime/server/auth/callback.mjs

@@ -1,5 +1,4 @@
-import { defineEventHandler } from "#imports";
-import { createError, getQuery, sendRedirect } from "h3";
+import { defineEventHandler, createError, getQuery, sendRedirect } from "h3";
 import { supabaseServerClient } from "#supabase/server";
 export default defineEventHandler(async (event) => {
   const query = getQuery(event);

package/dist/runtime/server/auth/confirm.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<void>>;
 export default _default;

package/dist/runtime/server/auth/confirm.mjs

@@ -1,5 +1,4 @@
-import { defineEventHandler } from "#imports";
-import { createError, getQuery, sendRedirect } from "h3";
+import { createError, getQuery, sendRedirect, defineEventHandler } from "h3";
 import { supabaseServerClient } from "#supabase/server";
 export default defineEventHandler(async (event) => {
   const query = getQuery(event);
@@ -14,5 +13,6 @@ export default defineEventHandler(async (event) => {
   if (error) {
     throw createError({ statusMessage: error.message });
   }
+  console.log("EMail OTP verified");
   await sendRedirect(event, next, 302);
 });

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.9",
   "description": "Supabase module for Nuxt",
   "repository": "floatingpixels/supabase-nuxt",
   "license": "MIT",
@@ -50,21 +50,23 @@
     "defu": "^6.1.4"
   },
   "devDependencies": {
-    "@nuxt/devtools": "latest",
+    "@nuxt/devtools": "^1.0.8",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.9.3",
-    "@nuxt/test-utils": "^3.10.0",
-    "@types/node": "^20.11.5",
-    "@vue/test-utils": "^2.4.3",
+    "@nuxt/test-utils": "^3.11.0",
+    "@types/node": "^20.11.10",
+    "@vue/test-utils": "^2.4.4",
     "changelogen": "^0.5.5",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "happy-dom": "^13.3.1",
+    "happy-dom": "^13.3.4",
     "nuxt": "^3.9.3",
     "playwright-core": "^1.41.1",
     "prettier": "^3.2.4",
     "release-it": "^17.0.3",
-    "vitest": "^1.2.1"
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.2",
+    "vue-tsc": "^1.8.27"
   }
 }