使用 Nuxt v3 设置 Supabase Auth

supabase_url=<your_supabase_url>
supabase_key=<your_supabase_key>

import { definestore } from "pinia";

export const useauthstore = definestore("auth", () => {
  const supabase = usesupabaseclient();

  const sendotp = async (email: string) => {
    const { error } = await supabase.auth.signinwithotp({
      email,
    });

    if (error) {
      throw error;
    }

    return true;
  };

  const verifyotp = async (email: string, otp: string) => {
    const { error } = await supabase.auth.verifyotp({
      type: "email",
      token: otp,
      email,
    });

    if (error) {
      throw error;
    }

    return true;
  };

  return {
    sendotp,
    verifyotp,
  };
});

<template>
  <div class="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
    <h2 class="text-3xl font-bold mb-6 text-center text-gray-800">welcome</h2>
    <form @submit.prevent="handlesubmit" class="space-y-6">
      <div v-if="mode === 'email'">
        <label for="email" class="block mb-2 font-medium text-gray-700"
          >email</label
        >
        <input
          type="email"
          id="email"
          v-model="email"
          required
          placeholder="enter your email"
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200"
        />
      </div>

      <div v-else-if="mode === 'code'">
        <p class="mb-2 font-medium text-gray-700">
          enter the 6-digit code sent to {{ email }}
        </p>
        <input
          type="text"
          v-model="otpcode"
          required
          placeholder="enter 6-digit code"
          maxlength="6"
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200"
        />
      </div>

      <ubutton
        icon="i-heroicons-paper-airplane"
        size="lg"
        color="primary"
        variant="solid"
        :label="buttonlabel"
        :trailing="true"
        block
      />
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useauthstore } from "~/stores/auth";

const authstore = useauthstore();

const email = ref("");
const otpcode = ref("");
const mode = ref("email");

const buttonlabel = computed(() => {
  return mode.value === "email" ? "send one-time password" : "verify code";
});

const handlesubmit = async () => {
  if (mode.value === "email") {
    try {
      await authstore.sendotp(email.value);
      mode.value = "code";
    } catch (error) {
      console.log("error sending otp: ", error);
    }
  } else {
    try {
      await authstore.verifyotp(email.value, otpcode.value);
    } catch (error) {
      console.log("error verifying otp: ", error);
    }
  }
};
</script>

<style scoped></style>

const signout = async () => {
  const { error } = await supabase.auth.signout();

  if (error) {
    throw error;
  }

  return true;
};

export default definenuxtroutemiddleware((to) => {
  const user = usesupabaseuser();

  const protectedroutes = ["/app"];

  if (!user.value && protectedroutes.includes(to.path)) {
    return navigateto("/auth");
  }

  if (user.value && to.path === "/auth") {
    return navigateto("/");
  }
});

<script setup lang="ts">
definePageMeta({
  middleware: "auth", // this is the name of the file, minus the extension
});
</script>