@floatingpixels/supabase-nuxt 0.1.6 → 0.1.8

package/README.md

@@ -154,9 +154,123 @@ const signInWithOtp = async () => {
 
 > ⚠️ Ensure to activate and configure the authentication providers you want to use in the Supabase Dashboard under `Authentication -> Providers`.
 
-Once the authorization flow is triggered using the `auth` wrapper of the `useSupabaseClient` composable, the session management is handled automatically.
+Once the authorization flow is triggered using the `auth` wrapper of the `useSupabaseClient` composable, the session management is handled automatically. For the authentication flow PKCE is used, which requires an exchange between your server and the Supabase authentication server for some authentication methods. Please make sure you update your Supabase settings accordingly.
 
-If `redirect` is set to `true` in the module options, users will be automatically routed to this page when they are not authenticated. Each time a user is trying to access a page, they will automatically be redirected to the log-in page. If you want to allow access to "public" pages, you just need to add them in the `exclude` `redirect` option.
+### 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 `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>
+
+<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"
+    >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:
+
+> ⚠️ You can use the provided confirm route at `/supabase/confirm`, the implementation of a custom route is optional!
+
+```ts [server/api/confirm.ts]
+import { EmailOtpType } from '@supabase/supabase-js'
+import { supabaseServerClient } from '#supabase/server'
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const token_hash = query.token_hash as string
+  const type = query.type as EmailOtpType | null
+  const next = (query.next as string) ?? '/'
+
+  if (!token_hash || !type) {
+    throw createError({ statusMessage: 'Invalid token' })
+  }
+
+  const supabase = await supabaseServerClient(event)
+  const { error } = await supabase.auth.verifyOtp({ type, token_hash })
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  await sendRedirect(event, next, 302)
+})
+```
+
+### 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:
+
+```ts [pages/login.vue]
+const signInWithOAuth = async () => {
+  const { error } = await supabase.auth.signInWithOAuth({
+    provider: 'github',
+    options: {
+      redirectTo: 'http://<your-site-url>/supabase/callback',
+    },
+  })
+  if (error) console.log(error)
+}
+```
+
+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!
+
+```ts [server/api/callback.ts]
+import { supabaseServerClient } from '#supabase/server'
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const code = query.code as string
+  const next = (query.next as string) ?? '/'
+
+  if (!code) {
+    throw createError({ statusMessage: 'No code provided' })
+  }
+
+  const supabase = await supabaseServerClient(event)
+  const { error } = await supabase.auth.exchangeCodeForSession(code)
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  await sendRedirect(event, next, 302)
+})
+```
+
+### Redirection for non-authorized users
+
+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
 
@@ -164,7 +278,7 @@ If `redirect` is set to `true` in the module options, users will be automaticall
 
 This composable can be used to make requests to the Supabase API. It's autoimported and ready to use in your components. It's using [supabase-js](https://github.com/supabase/supabase-js/) under the hood, it gives access to the [Supabase client](https://supabase.com/docs/reference/javascript/initializing) and all of its features.
 
-## Database Request
+#### Database Request
 
 Please check [Supabase](https://supabase.com/docs/reference/javascript/select) documentation on how to fully use the Supabase client.
 
@@ -182,7 +296,7 @@ const { data: restaurant } = await useAsyncData('restaurant', async () => {
 </script>
 ```
 
-## Realtime
+#### Realtime
 
 Based on [Supabase Realtime](https://github.com/supabase/realtime), listen to changes in your PostgreSQL Database and broadcasts them over WebSockets.
 
@@ -221,7 +335,7 @@ onUnmounted(() => {
 </script>
 ```
 
-## Typescript
+#### Type Support
 
 You can pass Database typings to the client. Check Supabase [documentation](https://supabase.com/docs/reference/javascript/release-notes#typescript-support) for further information.
 
@@ -232,7 +346,7 @@ const client = useSupabaseClient<Database>()
 </script>
 ```
 
-## Authentication
+#### Authentication Client
 
 The useSupabaseClient composable is providing all methods to manage authorization under `useSupabaseClient().auth`. For more details please see the [supabase-js auth documentation](https://supabase.com/docs/reference/javascript/auth-api). Here is an example for signing in and out:
 

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.6"
+  "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,15 +59,20 @@ 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"));
     });
     addServerHandler({
       route: "/supabase/confirm",
-      handler: resolve("./runtime/server/api/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 || {};

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.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/auth/callback.d.ts

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

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

@@ -0,0 +1,17 @@
+import { defineEventHandler } from "#imports";
+import { createError, getQuery, sendRedirect } from "h3";
+import { supabaseServerClient } from "#supabase/server";
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event);
+  const code = query.code;
+  const next = query.next ?? "/";
+  if (!code) {
+    throw createError({ statusMessage: "No code provided" });
+  }
+  const supabase = await supabaseServerClient(event);
+  const { error } = await supabase.auth.exchangeCodeForSession(code);
+  if (error) {
+    throw createError({ statusMessage: error.message });
+  }
+  await sendRedirect(event, next, 302);
+});

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

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

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.6",
+  "version": "0.1.8",
   "description": "Supabase module for Nuxt",
   "repository": "floatingpixels/supabase-nuxt",
   "license": "MIT",