Nuxt.js middleware not working properly (redirects when it shouldn't)

275 Views Asked by At

my middleware is not working properly, i have a firebase auth set up but when i go to route /manage even though im signed in, it redirects to /login route... can someone help me? So i want the middleware to redirect to route /manage if user is NOT signed in and if it is then i just want to proceed to /manage.

middleware/auth.js

import { auth } from "~/plugins/firebase";

export default defineNuxtRouteMiddleware((to, from) => {
  if (!auth.currentUser) {
    return navigateTo("/login");
  } else {
    return;
  }
});

pages/login.vue

<template>
  <div class="container">
    <p class="title">Prijavi se u Manager</p>
    <span v-if="error !== ''" class="error">{{ error }}</span>
    <span v-if="checking" class="checking">Provjera...</span>
    <span v-if="success" class="success">Uspješna prijava! Preusmjeravam...</span>
    <form @submit="signIn($event)">
      <input type="text" placeholder="Email" v-model="email">
      <input type="password" placeholder="Lozinka" v-model="pass">
      <button type="submit">Prijava</button> 
    </form>
  </div>
</template>

<script setup>
import { auth } from "~/plugins/firebase";
import { signInWithEmailAndPassword } from "firebase/auth";

useSeoMeta({
  title: "Login"
});

const router = useRouter();

const error = ref("");
const email = ref("");
const pass = ref("");
const checking = ref(false);
const success = ref(false);

const signIn = async (e) => {
  e.preventDefault();
  error.value = "";
  checking.value = true;
  try {
    const user = await signInWithEmailAndPassword(auth, email.value, pass.value);
    checking.value = false;
    success.value = true;
    router.push("/manage");
  } catch (err) {
    error.value = err;
    checking.value = false;
    success.value = false;
  }
  email.value = "";
  pass.value = "";
}
</script>

pages/manage.vue

<script setup>
definePageMeta({
  middleware: ['auth']
})
</script>
0

There are 0 best solutions below