DEV Community

Authentication in Nuxt 3

Rafael Magalhaes on January 24, 2023

How to add authentication in nuxt 3 I've seen a few tutorials on this subject but most of them cover authentication with Supabase, Ampli...

Read full post

Alex Banica • Oct 29 '23

Thank you, i will try in my next project.

othman almahdy • Jun 21

That saves my day Thanks Alot

Sasha K • Dec 26 '23

In a production mode(SSR: true):
After successful authorization I go to "About page", then reload the page in a browser and I stay authorized, but it shows me "Login page" on a short time, than push me to "Home page". I guess middleware doesn't have access to storage on the reloading time. Is there a way to change this behavior?

Rafael Magalhaes • Jan 6

You able to show me the code to have a look

Sasha K • Jan 8

Basicly, it is a copy of Your code:

github.com/SashaKrav4/storetest.git

npm run dev - works fine, but if I do:
'npm run generate' and 'npx serve .output/public -l 5173'
then I see the issue

Rafał Olszewski • Jan 15 • Edited

Had the same issue.

That is because middleware/auth.ts is running per page, so if you go to different page which doesn't have this middleware - it won't set authenticated.value = true - thus you'll appear as non authenticated user.

Simple solution is to add middleware/authentication.global.ts with contents

import { useAuthStore } from "~/store/auth";

export default defineNuxtRouteMiddleware((to, from) => {
  const { authenticated } = storeToRefs(useAuthStore()); // make authenticated state reactive
  const token = useCookie("token"); // get token from cookies

  if (token.value) {
    // check if value exists
    authenticated.value = true; // update the state to authenticated
  }
});

And technically, you could remove this piece of code from middleware/auth.ts - but haven't tested this yet.

 if (token.value) {
    // check if value exists
    authenticated.value = true; // update the state to authenticated
  }

Sasha K • Jan 15

I have global middleware. It doesn't work in a production mode with SSR true. If I set SSR: false, it works

HoGyun Lim • Jan 5

I also have this phenomenon. I successfully logged in through the API and received it normally, but the login screen appears again.

Armand • Jan 6

I'm facing the same issue, have you found a way around this?

Thanks!

Tomislav Miletic • Oct 6

Thank you, but i am missing something, i am following the tutorial. First i get this when i try to login
auth.ts:16 [nuxt] [useFetch] Component is already mounted, please use $fetch instead. See nuxt.com/docs/getting-started/data...

Then i change to $fetch but then when i try to login i get a bunch or errors.

Can somebody help please?

freetoplay • Sep 9 '23

I have a question for Nuxt 3. I am using a similar setup to yours, but when I use v-ifto check if user is auth, I run into rehydration issues because the client and server sees different data. The server see the login user, but the client does not. The big difference I see here and my setup is that you set the cookie in the store vs getting it set from the API. Do you know if there is a way to solve this without using ClientOnly?