Static Hosting: Client side only rendering gives error when signing in with email - pw

[Wafje]

Version

@nuxtjs/supabase: 0.3.0 nuxt: 3.0.0

Reproduction Link

login.vue

<template>
    <div>
      <div>
        <form>
          <div>
            <div>
              <label for="email-address" class="sr-only">Email address</label>
              <input id="email-address" name="email" type="email" autocomplete="email" required="" v-model="formData.email" placeholder="Email address" />
            </div>
            <div>
              <label for="password" class="sr-only">Password</label>
              <input id="password" name="password" type="password" autocomplete="current-password" required="" v-model="formData.password" cplaceholder="Password" />
            </div>
          </div>
  
          <div>
            <button type="button" @click="login" >
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  </template>
  
<script setup>

definePageMeta({
    layout: 'none'
});

const client = useSupabaseAuthClient();
const user = useSupabaseUser();

const formData = reactive({ email: null, password: null });

watchEffect(async () => {
  if (user.value) {
    navigateTo("/");
  }
});

const login = async () => {
  try {
    const { error } = await client.auth.signInWithPassword(formData);
    
    if (error) throw error;
  } catch(error) {
    console.error(error)
  }
}
</script>

Steps to reproduce

1. npm run generate to create Static Site (ssr: false)
2. Run a webserver (vscode live server / upload to S3)
3. sign in using email and pw (existing users ofcourse)

What is Expected?

nagivation to /

What is actually happening?

console:

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
entry.ca775e5e.js:5 Uncaught (in promise) FetchError: 405 Method Not Allowed (/api/_supabase/session)
    at async Object.callback (entry.ca775e5e.js:5:117643)

seems like useSupabaseUser().value is not updating. cookies and jwt are correctly stored though

Research

• I have tried commenting out await setServerSession(event, session) from https://github.com/nuxt-modules/supabase/blob/c5b4a48c8b155580b77858ad6f3ad0c6af5ac2c0/src/runtime/plugins/supabase.client.ts#L30
• That removed the error messages but the user object did not get updated.

[pmcp]

Can you advice us how to resolve this? I would also prefer to use Generate, and deploy to Netlify. But this auth issue is the only thing I'm bumping in to.

[Wafje]

I ended up writing my own plugin and composable based on the information in this blog post: https://dev.to/aaronksaunders/how-to-build-a-nuxt-3-ionic-capacitor-starter-app-supabase-setup-and-authentication-3gd0

[pmcp]

@Wafje , did you complete remove the nuxt supabase module, or are you using your own plugin next to nuxtjs/supabase?

[Wafje]

I removed the nuxjs/supabase module. I reviewed the source code and it seemed to be focussed on using SSR. I am not using SSR in my project so decided to drop the module.

[liamcharmer]

I ended up writing my own plugin and composable based on the information in this blog post: https://dev.to/aaronksaunders/how-to-build-a-nuxt-3-ionic-capacitor-starter-app-supabase-setup-and-authentication-3gd0

Works great, however is there not a solution to the nuxt plugin so it isnt focused on SSR?

[PhE]

I'm also interested in a supabase module that is working with a static build (generate). I don't really understand why the current supabase module need a server side API. Supabase javascript package can operate without a custom backend so why this module don't ?