Einrichten von Supabase Auth mit Nuxt v3-js-Tutorial-php.cn

Das Implementieren der Authentifizierung ist etwas, das Sie bei den meisten Projekten tun, aber dennoch etwas, an das Sie sich vielleicht nicht erinnern können, wie man es auswendig macht, weil Sie es so oft tatsächlich tun.

Hier finden Sie eine kurze Anleitung zur Implementierung von Supabase Auth mit Nuxt v3. In diesem Beispiel verwenden wir OTP, aber es gilt für jeden Fall.

Sie möchten Ihr Projekt zunächst starten, indem Sie die Website von Supabase besuchen.

Nachdem wir ein Projekt in Supabase erstellt und Ihr Projekt auf Nuxt gestartet haben, möchten wir das Supabase Nuxt-Paket wie folgt installieren:

npx nuxi@neuestes Modul supabase hinzufügen

Wir erstellen dann unsere .env-Datei und fügen die folgenden Umgebungsvariablen hinzu:

SUPABASE_URL=<your_supabase_url>
SUPABASE_KEY=<your_supabase_key>

Nach dem Login kopieren

Sie finden diese im Supabase-Dashboard für Ihr Projekt unter Einstellungen -> API

Setting up Supabase Auth with Nuxt v3

Anschließend können wir mit dem Aufbau unseres Projekts beginnen. Ich habe bisher zwei sehr einfache Dateien erstellt:

auth.ts (Ich habe einen Pinia-Store verwendet, kann aber auch einfach eine normale Datei verwenden)

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,
  };
});

Nach dem Login kopieren

LoginForm.vue

<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>

Nach dem Login kopieren

Beachten Sie, dass ich auch NuxtUI verwende, falls Sie Fehler erhalten.

Da die Funktion signInWithOtp standardmäßig einen magischen Link sendet, müssen Sie die E-Mail-Vorlage im Supabase-Dashboard ändern, um ein Token zu senden:

Setting up Supabase Auth with Nuxt v3
Dies finden Sie unter Authentifizierung -> E-Mail-Vorlagen -> Ändern Sie die Vorlagen „Anmeldung bestätigen“ und „Magischer Link“ so, dass sie {{ .Token }}

verwenden

Und das ist so ziemlich alles, Sie haben eine funktionierende Authentifizierung!
Wenn Sie die Abmeldung hinzufügen möchten, können Sie Ihrer vorherigen Datei auch eine Methode wie diese hinzufügen:

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

  if (error) {
    throw error;
  }

  return true;
};

Nach dem Login kopieren

Wenn Sie jedoch bestimmte Routen schützen möchten, können wir dies auch durch Hinzufügen von Middleware tun.

Erstellen Sie im Stammverzeichnis einen Ordner namens „middleware“ (Name ist Schlüssel) und eine Datei namens auth.ts.

Sie können dann so etwas hinzufügen:

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("/");
  }
});

Nach dem Login kopieren

Dadurch wird grundsätzlich Ihre /app-Route vor dem Server geschützt. Wenn Sie also versuchen, zu /app zu wechseln, ohne angemeldet zu sein, werden Sie zu /auth.

weitergeleitet

Wenn Sie ebenfalls versuchen, /auth aufzurufen, während Sie bereits angemeldet sind, werden Sie zur Startseite / weitergeleitet.

Um dies zu verwenden, können Sie es nun in das

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2345

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2474

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.