DEV Community

Cover image for Authentication in Nuxt 3

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...
Collapse
 
alexbanicaululab profile image
Alex Banica

Thank you, i will try in my next project.

Collapse
 
othman_almahdy_e223458d6c profile image
othman almahdy

That saves my day Thanks Alot

Collapse
 
sashakrav4 profile image
Sasha K

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?

Collapse
 
rafaelmagalhaes profile image
Rafael Magalhaes

You able to show me the code to have a look

Collapse
 
sashakrav4 profile image
Sasha K

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

Collapse
 
rafalolszewski94 profile image
Rafał Olszewski • 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
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sashakrav4 profile image
Sasha K

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

Collapse
 
flaghrbs1004 profile image
HoGyun Lim

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

Collapse
 
armandh profile image
Armand

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

Thanks!

Collapse
 
tomislav_miletic_788ccfef profile image
Tomislav Miletic

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.

Image description

Can somebody help please?

Collapse
 
freetoplay profile image
freetoplay

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?

Collapse
 
ymir profile image
Amir H. Moayeri

Well Done 👌

Collapse
 
flaghrbs1004 profile image
HoGyun Lim

Thanks to you, I completed it well. thank you

Collapse
 
willsilvano profile image
Willian • Edited

Thanks! This is incredibly simple!

Collapse
 
kellskamuzu profile image
Kelvin Chidothi

How about storing the users data without using vuex?

Collapse
 
rafaelmagalhaes profile image
Rafael Magalhaes

You could set up a custom composable

Collapse
 
tomislav_miletic_788ccfef profile image
Tomislav Miletic

This is awesome, thank you 🕺🕺