0

Currently I'm working on a login-system in my Nuxt app that has Strapi in the back-end of itself. I used nuxt-auth local schemes for my login-system, and followed this article for making that. unfortunately the version of "Strapi", "Nuxt" and "nuxt-auth" that the article had used is different from my. So I have problem with the login part. Here is the code of article:

nuxt.config.js:

auth: {
 strategies: {
 local: {
 endpoints: {
 login: {
 url: 'auth/local',
 method: 'post',
 propertyName: 'jwt'
 },
 user: {
 url: 'users/me',
 method: 'get',
 propertyName: false
 },
 logout: false
 }
 }
 }
},

But when I used that, it does not set the loggedIn property of nuxt-auth to true after login. So I read the documentation of nuxt-auth and find out that we could use setUser method to set the user after login and the auto-fetch user becomes off in this mode. Here is the code of my project:

nuxt.config.js:

auth: {
        strategies: {
            local: {
                token: {
                    property: false,
                    required: true,
                    type: 'Bearer'
                },
                user: {
                    property: false,
                    autoFetch: false
                },
                endpoints: {
                    login: { url: 'auth/local', method: 'post', propertyName: 'jwt' },
                    logout: false,
                    user: false
                        // { url: 'users/me', method: 'get', property: false, autoFetch: true }
                }
            }
        }
}

login.vue methods:

methods: {
    async login() {
        this.error = null;
        try {
            let responseBack = await this.$auth.loginWith("local", {
            data: {
                identifier: this.email,
                password: this.password,
            },
            });
            console.log(responseBack);
            this.$auth.setUser(responseBack.data.user);
        } catch (e) {
        this.error = e.response.data.message[0].messages[0].message;
        }
    },
},

store/index.js:

export const getters = {
    isAuthenticated(state) {
        return state.auth.loggedIn;
    },

    loggedInUser(state) {
        return state.auth.user;
    },
};

But the problem of my method is that although the login is successful, but the loggedInUser Vuex getters looses its value after refreshing the page, the reason is that auth.user is set to "empty object" after refreshing the page:

enter image description here

Could anyone please help me that how to fix this problem if I want to continue with my own method or how to configure "nuxt.config.js" file correctly if I want to follow the method of article? Is there any special "url" that I must set in the endpoints.user.url of nuxt-auth when my back-end is Strapi?

hamid-davodi
  • 1,602
  • 2
  • 12
  • 26
  • Pretty similar question to another one today. Here is [one comment of mine](https://stackoverflow.com/questions/70321917/nuxt-auth-loggedinfalse-and-usernull/70342809#comment124346317_70321917) that is saying why and some links as of solutions on how to handle this. – kissu Dec 14 '21 at 17:06
  • @kissu thanks for your comment, if I understood your solution correctly, you say that we must use ```setUser()``` to set users after login and then with the help of ```middlewares``` or ```cookies``` or ... we must handle the ```auth.user``` after refresh to keep the user information? if I misunderstand please correct me. But according to [this link](https://auth.nuxtjs.org/schemes/local#fetch-user) we could set ```autoFetch``` to true if we have a **url** for ```endpoints.user```. Does such a url exist in strapi? – hamid-davodi Dec 14 '21 at 18:11
  • For Strapi, it depends on the kind that you do receive. You can check the network tab in your devtools and look for those user info. If you do have something alike, you could use `autoFetch`. I'm not a Strapi expert but they have nice docs. Personally, I've always set it myself after my initial call to the backend (not a huge difference) but it is probably doable yeah! And yeah, if you want to persist something, you need to save some data in your browser, so `localStorage`, `cookies` or alike. And a middleware to make additional checks if needed, on top of the one given by `nuxt-auth` itself. – kissu Dec 14 '21 at 18:18

0 Answers0