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!

Antony • Nov 9

Storing tokens in regular cookies is not recommended because they are sent with every request to the server, which increases security risks. Using a Set-Cookie header in an API response to store tokens is safer, as it allows setting HttpOnly and Secure flags. This way, the token is less exposed to JavaScript, which reduces the risk of XSS attacks, and can only be transmitted over HTTPS.

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?