Help with Auth/Protected Routes/Persist Auth

[Jopgood]

Hey there!

I am aware there are similar discussions on this topic but I feel that I may need a slightly clearer explanation on how best to setup a Nuxt web app using this module.

I have set up a Nuxt app and have a pinia store that logs the user into the website using useDirectusAuth() login() but I am finding that my middleware is not quite working as intended and is assuming the user is not logged in upon refresh.

my store:

import { defineStore } from "pinia";
import type { Login, User } from "~/types";

export const useLoginStore = defineStore("login", {
  state: () => ({
    loggedIn: false,
    user: {} as User,
    token: null,
  }),

  getters: {
    isLoggedIn: (state) => state.loggedIn,
    userData: (state) => state.user,
    tokenData: (state) => state.token,
  },

  actions: {
    async login({ email, password, redirect }: Login) {
      const router = useRouter();
      const directusAuth = useDirectusAuth();
      try {
        // Attempt the login
        const loginRes = await directusAuth.login(email, password, {});
        console.log(loginRes);

        // If login was successful, fetch the user's data
        const userRes = await directusAuth.readMe();
        console.log(userRes);

        // Update the auth store with said user data
        this.loggedIn = true;
        this.user = userRes;
        this.token = loginRes?.access_token;

        await directusAuth.setTokens(loginRes);
        await directusAuth.setUser(userRes);

        // If there's a redirect necessary, send the user there
        if (redirect) {
          router.push(redirect);
        }
      } catch (error) {
        console.log(error);
        throw new Error("Wrong email address or password");
      }
    },
    async logout() {
      const router = useRouter();
      const directusAuth = useDirectusAuth();
      try {
        // Attempt a logout
        await directusAuth.logout();

        // If logout is successful, reset the auth store
        this.$reset();

        // Send the user back to the login page
        router.push("/login");
      } catch (error) {
        console.log(error);
        throw new Error("Issue logging out");
      }
    },
    async getUser() {
      const directusAuth = useDirectusAuth();
      try {
        // Attempt to fetch the user's data
        const user = await directusAuth.readMe();

        // Update the auth store with the said user's data
        this.loggedIn = true;
        this.user = user;
        return user;
      } catch (error) {
        console.log(error);
        throw new Error("Failed to get the current user");
      }
    },
    async $reset() {
      this.loggedIn = false;
      this.user = {} as User;
      this.token = null;
    },
  },
});

and my middleware:

export default defineNuxtRouteMiddleware(async (to, _from) => {
  const { readMe, setUser } = useDirectusAuth();
  const { user } = useDirectusUsers();
  console.log(user);

  if (!user.value) {
    const user = await readMe();
    setUser(user.value);
  }
  if (!user.value) {
    return navigateTo("/login");
  }
});

I can see the directus_refresh_cookie is in the browser cookies but the user is not staying logged in when refreshing and is consistently being returned back to /login?

I am quite new to Nuxt and this module so go easy on me, still learning!

thank you so much!

[casualmatt]

Hi @Jopgood,

You don't need to implement the store yourself for the session; the module does it for you with Nuxt internal session + cookies composable.
If you want more flexibility, I would strongly advise using the new v6 module, which is currently in beta.

next.nuxt-directus.site

We are currently working on the documentation; you will see updates on that very soon.