0

When I log in with nuxt auth, I redirect the user to his profile page. But after reload on the profile page I get an error like the screenshot:

enter image description here

I have searched this problem related to @nuxtjs/auth-next ssr problem. Most of the solution is to downgrade the @nuxtjs/axios version. I have already tried this but not fixed.

Here is my profile page code:

<template>
    <div v-show="$auth.user">
        <!-- profile image -->
        <div class="w-full flex">
            <div>
                <div class="bg-gray-200 p-5 w-40 h-44"></div>
            </div>
            <div class="ml-6">
                <h2 class="font-bold text-2xl mb-4">Profile Details</h2>
                <h6 class="font-semibold text-lg">{{$auth.user.name}}</h6>
                <p><span class="font-medium">Email: </span>{{$auth.user.email}}</p>
                <p><span class="font-medium">Phone: </span>{{$auth.user.phone}}</p>
                <p><span class="font-medium">Last Login: </span>{{$auth.user.lastLoginForHuman}}</p>
                <nuxt-link to="/customer/change-password" class="block mt-3 text-primary-500 text-sm hover:underline">Change Password</nuxt-link>
            </div>

        </div>

        <!-- details -->
        <div class="w-full mt-5">
            <div class="grid grid-cols-2 sm:grid-cols-2 gap-4">
                <input-field label="First name"></input-field>
                <input-field label="Last name"></input-field>
                <input-field type="email" label="Email"></input-field>
                <input-field label="Phone"></input-field>
            </div>

            <div class="flex justify-end">
                <button-field label="Update" class="bg-primary-500 text-white py-3 px-10"></button-field>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "Profile",
    data() {
        return {
            form: {
                firstName: this.$auth.user?.firstName,
                lastName: this.$auth.user?.lastName,
                email: this.$auth.user?.email,
                phone: this.$auth.user?.phone,
            },
            photo: null,
        };
    },
};
</script>

"@nuxtjs/auth-next": "^5.0.0-1624817847.21691f1", "@nuxtjs/axios": "^5.13.6", "nuxt": "^2.15.7"

Ahmed Shakil
  • 31
  • 1
  • 4
  • Can you try with `$store.state.auth.loggedIn`? – kissu Aug 31 '21 at 17:37
  • Btw, is `$auth.user` populated when the file is mounted? You can maybe try it with a `computed()` having a `return $auth?.user` for the `v-show` on top of the template. – kissu Aug 31 '21 at 17:38
  • I have write the same code on my previous project. There It was woking. – Ahmed Shakil Aug 31 '21 at 17:46
  • $store.state.auth.loggedIn is also have the same issue – Ahmed Shakil Aug 31 '21 at 17:47
  • This is irrelevant because you probably have a slighter different configuration on this one. And it's probably not the exact same 1:1 otherwise I'd work fine. What about having it with a `$auth?.user`? Also, are you sure you do not have any lifecycle issues? – kissu Aug 31 '21 at 17:49
  • I think there is an issue on nuxt auth ssr loading. Because when I create a middleware and console.log(store.state.$auth.loggedIn) it returns false. – Ahmed Shakil Aug 31 '21 at 17:51
  • Do you have a [repro] somewhere? Or at least a `package.json` + `nuxt.config.js` combo? – kissu Aug 31 '21 at 17:58
  • Here is my package.json: "dependencies": { "@nuxtjs/auth-next": "^5.0.0-1624817847.21691f1", "@nuxtjs/axios": "^5.13.6", "@nuxtjs/dotenv": "^1.4.1", "add": "^2.0.6", "core-js": "^3.15.1", "nuxt": "^2.15.7" }, "devDependencies": { "@nuxtjs/tailwindcss": "^4.2.0", "fibers": "^5.0.0", "postcss": "^8.3.5", "sass": "^1.38.0", "sass-loader": "^10.2.0" } – Ahmed Shakil Sep 01 '21 at 03:14
  • Did you figured out the solution? Actually nuxt auth nex module SSR not working. – AkrAm Khan Jul 15 '22 at 15:04

0 Answers0