CODEWITHSUNDEEP
vue.jsnuxt.js
Jack022
Jack022

Reputation: 1257

Nuxt SSR - i can't check if a user is authenticated

I'm trying to work on a Nuxt SSR frontend that uses a Django backend with Session Authentication. I would like to have some SSR pages as well as client rendered pages in my frontend, so i'm using Universal mode.

The problem is that i did not find a working approach to check if a user is authenticated before loading a page, so i can't restrict pages to anonymous users. In order to check if a user is authenticated, Django will check if the request's headers contain a cookie, and according to that return if the user is authenticated or not.

Here is what i tried:

1) Middleware

export default async function ({context, redirect}) {
  axios.defaults.withCredentials = true;

  return axios({
    method: 'get',
    url: 'http://127.0.0.1:8000/checkAuth',
    withCredentials: true,
  }).then(function (response) {
    //Redirect if user is authenticated
  }).catch(function (error) {
    console.log(error)
  });
}

Here i'm sending a request to my backend to check if the user is authenticated. The problem is that the middleware is executed from server side, which means there will never be any cookie in the request, even if the user is authenticated. This means that every time i refresh the page, according to the middleware the user is always anonymous, even when the user is authenticated.

2) Plugin

export default function (context, inject) {
  if (process.client){
    console.log('client')
    return axios({
      method: 'get',
      url: 'http://127.0.0.1:8000/checkAuth',
      withCredentials: true,
    }).then(function (response) {
      //IF AUTHENTICATED, REDIRECT
      context.redirect('/')
    }).catch(function (error) {
      console.log(error)
    });
  } else {
    console.log('server')
  }
}

Here i'm trying the same but with a plugin, and i'm "forcing" the plugin to check if the user is authenticated on the backend only when the plugin executes from client side. This works, cookies are sent in the headers and Django receives the cookie, but the problem with this solution is that Nuxt doesn't allow redirecting to other pages from a plugin (https://github.com/nuxt/nuxt.js/issues/4491).

3) Using beforeMount() in Vue

I tried to do that using beforeMount() from my Vue pages, but the problem is that since it will execute AFTER idration, the page will be loaded and after 1/2 seconds the redirect happens, which is kind of ugly.

Is it possible that there isn't a way to do this? Any kind of advice is appreciated

EDIT: the problem is not that i don't know how to code this, the problem is that when Nuxt sends a request to my backend from the server side middleware, the request will not contain any cookie, and because of this my Django backend cannot check the session cookie, which means that the backend cannot check whether or not the user is authenticated. The same code works when the middleware is executed from client side (if i navigate directly to the page instead of refreshing), because the request will contain the cookies.

I'm trying to understand if this is normal or not, but this could be an issue with Nuxt.

Upvotes: 5

Views: 2558

Answers (2)

Fennec
Fennec

Reputation: 1882

I know this a year old question and it was probably about nuxt 2, now nuxt 3 is out and running and I found my self with the same problem and here is how I solved it, just in case someone stumble here just like I did.

With Nuxt 3 server side you can use useFetch with the options headers: useRequestHeaders(['cookie'])

const { data, error, pending, refresh } =  await useFetch(api.auth,  
  {
     credentials: "include",
     headers: useRequestHeaders(['cookie'])
  }
);

There are a few issues you need to be aware of:

_ The cache, if you perform the same request with the same parameters it will return the same cached response (it won't even call the end point API). Try to use the key option with different values or the returned refresh method and check the doc "Data fetching" for more info.

_ The cookies, any cookie generate server side won't be shared with the client side, this means if the API generate a new token or session cookie on server side the browser won't receive those cookies and may generate new ones, this may get you in some 400 - bad request if you use session with CSRF, check this issue for more info.

Upvotes: 4

kissu
kissu

Reputation: 46696

I do have a working middleware with this

export default ({ redirect, store }) => {
  if (store?.$auth?.$state?.loggedIn) {
    redirect('https://secure.url')
  } else {
    redirect('https://login.please')
  }
})

Upvotes: 1

Related Questions