AnswerBun.com

Set Session ID Cookie in Nuxt Auth

Stack Overflow Asked by Dominooch on December 4, 2020

I have the following set up in my nuxt.config.js file:

auth: {
redirect: {
  login: '/accounts/login',
  logout: '/',
  callback: '/accounts/login',
  home: '/'
},
strategies: {
  local: {
    endpoints: {
      login: { url: 'http://localhost:8000/api/login2/', method: 'post' },
      user: {url: 'http://localhost:8000/api/user/', method: 'get', propertyName: 'user' },
      tokenRequired: false,
      tokenType: false
    }
  }
},
localStorage: false,
cookie: true
},

I am using django sessions for my authentication backend, which means that upon a successful login, i will have received a session-id in my response cookie. When i authenticate with nuxt however, i see the cookie in the response, but the cookie is not saved to be used in further requests. Any idea what else i need to be doing?

One Answer

This is how I handled this, which came from a forum post that I cannot find since. First get rid of nuxt/auth and roll your own with vuex store. You will want two middleware, one to apply to pages you want auth on, and another for the opposite.

This assumes you have a profile route and a login route that returns a user json on successful login.

I'm also writing the user to a cookie called authUser, but that was just for debugging and can be removed if you don't need it.

store/index

import state from "./state";
import * as actions from "./actions";
import * as mutations from "./mutations";
import * as getters from "./getters";

export default {
  state,
  getters,
  mutations,
  actions,
  modules: {},
};

store/state

export default () => ({
  user: null,
  isAuthenticated: false,
});

store/actions

export async function nuxtServerInit({ commit }, { _req, res }) {
  await this.$axios
    .$get("/api/users/profile")
    .then((response) => {
      commit("setUser", response);
      commit("setAuthenticated", true);
    })
    .catch((error) => {
      commit("setErrors", [error]); // not covered in this demo
      commit("setUser", null);
      commit("setAuthenticated", false);
      res.setHeader("Set-Cookie", [
        `session=false; expires=Thu, 01 Jan 1970 00:00:00 GMT`,
        `authUser=false; expires=Thu, 01 Jan 1970 00:00:00 GMT`,
      ]);
    });
}

store/mutations

export const setUser = (state, payload) => (state.user = payload);
export const setAuthenticated = (state, payload) =>
  (state.isAuthenticated = payload);

store/getters

export const getUser = (state) => state.user;
export const isAuthenticated = (state) => state.isAuthenticated;

middleware/redirectIfNoUser

export default function ({ app, redirect, _route, _req }) {
  if (!app.store.state.user || !app.store.state.isAuthenticated) {
    return redirect("/auth/login");
  }
}

middleware/redirectIfUser

export default function ({ app, redirect, _req }) {
  if (app.store.state.user) {
    if (app.store.state.user.roles.includes("customer")) {
      return redirect({
        name: "panel",
        params: { username: app.store.state.user.username },
      });
    } else if (app.store.state.user.roles.includes("admin")) {
      return redirect("/admin/dashboard");
    } else {
      return redirect({
        name: "panel",
      });
    }
  } else {
    return redirect("/");
  }
}

pages/login- login method

async userLogin() {
  if (this.form.username !== "" && this.form.password !== "") {
    await this.$axios
      .post("/api/auth/login", this.form)
      .then((response) => {
        this.$store.commit("setUser", response.data);
        this.$store.commit("setAuthenticated", true);
        this.$cookies.set("authUser", JSON.stringify(response.data), {
          maxAge: 60 * 60 * 24 * 7,
        });
        if (this.$route.query.redirect) {
          this.$router.push(this.$route.query.redirect);
        }
        this.$router.push("/panel");
      })
      .catch((e) => {
        this.$toast
          .error("Error logging in", { icon: "error" })
          .goAway(800);

Answered by timelf123 on December 4, 2020

Add your own answers!

Related Questions

form validation with data ranges

2  Asked on August 7, 2020 by eniol

   

How to format this output?

2  Asked on August 6, 2020 by shantanu-jain

     

uploading csv file django using a form

2  Asked on August 5, 2020 by sheraram_prajapat

       

Set focus to another Control

3  Asked on August 4, 2020 by binu

 

Animate gradient bar chart – matplotlib

1  Asked on August 4, 2020 by jonboy

       

c# error – Can not convert Array to byte array

1  Asked on August 2, 2020 by rakesh

         

Correcting Business name misspellings

1  Asked on August 2, 2020 by jonathan-rauscher

     

How to cut a string to the first “/” from right to left c# .net

1  Asked on August 1, 2020 by ignacio-gomez

   

Inserting random data from a list

2  Asked on August 1, 2020 by smiley

     

Invalid token SELECT

2  Asked on July 31, 2020 by virendra-varma

     

Django – No column found for custom field?

0  Asked on July 29, 2020 by jare42

       

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir