Supabase Vue.js

# Autentificación

# Archivos base

# Archivo main.ts

Importamos las librerías de supabase y comprobamos si tenemos una sesión abierta.

import { supabase } from './lib/supabase'
import { userSession } from '@/lib/useAuth'

supabase.auth.onAuthStateChange((event, session) => {
    userSession.value = session
    })

# Archivo App.vue

No cambia nada es el mismo que el de la tienda.

# Archivo views > Products.vue

No cambia nada es el mismo que el de la tienda.

# Archivo views > Cart.vue

No cambia nada es el mismo que el de la tienda.

# Autentificación

# Archivo views > Home.vue

Comprueba si estamos en modo de recuperación/actualización de la contraseña, en este caso mostrará el componente PasswordReset donde introduciremos una nueva contraseña.

import Auth from "@/components/Auth.vue";
import { getParameterByName } from "@/lib/helpers";
import { userSession } from "@/lib/useAuth";
import { almacenAuth } from "@/stores/user";
import PasswordReset from "@/components/PasswordReset.vue";

const showPasswordReset = computed(() => {
  const requestType = getParameterByName("type", location.href);
  return requestType === "recovery";
});

<div
  v-if="showPasswordReset"
  class="w-full h-full flex flex-col justify-center items-center p-4"
>
  <PasswordReset />
</div>

# Componente > PasswordReset "v-if"

Tenemos la constante ref a contraseña, el input y el botón de actualización de la contraseña

const password = ref('')

<input
  type="password"
  class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 rounded shadow"
  placeholder="Tú contraseña"
  v-model="(password)">
</input>

<a @click="user.handleUpdateUser({password: password})" href="#" class="btn btn-accent" tabindex="0">
  Actualizar contraseña
</a>

# Componente > Auth "v-else-if"

Comprobamos si tenemos una sesión iniciada, si no la tenemos muestra el componente de autentificación.

const email = ref('')
const password = ref('')

<input
  type="text"
  class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 rounded shadow"
  placeholder="Tú correo"
  v-model="email"> 
</input>
<input
  type="password"
  class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-2 py-2 rounded shadow"
  placeholder="Tú contraseña"
  v-model="password">
</input>

<a @click="user.handleSignup({ email, password })" href="#" class="btn-black" tabindex="0">
  Regístrate
</a>
<a @click="user.handleLogin({ email, password })" href="#" class="btn-black-outline">
  <span v-if="password.length">Entrar</span>
  <span v-else> Enviar enlace mágico </span>
</a>
<a
  @click.prevent="user.handlePasswordReset"
  href="/"
  class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150"
>
  Forgot your password?
</a>

# Componente > ProductCard "v-else"

Es igual que el tutorial de la tienda

# Botón cerrar sesión

<button class="btn-black w-full mt-12" @click="user.handleLogout">
  Logout
</button>