Nuxt auth page reload problem

[mostafizurhimself]

Version

module: ^5.0.0-1624817847.21691f1
nuxt: "^2.15.7"

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 this:

Can not read property 'name' of null

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>

[CodyBontecou]

This line <h6 class="font-semibold text-lg">{{$auth.user.name}}</h6> is probably what's causing the issue. Are you sure your user has a name value?

Check your dev tools vuex User value to see if your user state has a name value. If not, make sure your backend is providing the data you expect.

[mostafizurhimself]

Yes the user has the name property. When it redirects from login to profile it show all. But after refresh it throws error.

…

On Wed, Sep 1, 2021, 12:13 AM Cody Bontecou ***@***.***> wrote: This line <h6 class="font-semibold text-lg">{{$auth.user.name}}</h6> is probably what's causing the issue. Are you sure your user has a name value? Check your dev tools vuex User value to see if your user state has a name value. If not, make sure your backend is providing the data you expect. [image: Screen Shot 2021-08-31 at 13 10 58] <https://user-images.githubusercontent.com/20440899/131554601-9685e6ab-843e-49ce-873b-cee68b45605c.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1283 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKBDWJJSHVEEXQ335YIQB2LT7ULVRANCNFSM5DET3VNA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[devzom]

Shouldn't be a problem with axios or nuxt-auth.

for the first maybe use v-if here

<template>
    <div v-if="$auth.user">

and check if after refresh the page there is going a request to the endpoint which fetch user data mostly -> auth/me set by default in nuxt-auth. Check the vue-dev-tools if $auth.user exist

[alimuradov]

If you set the ssr: false in file nuxt.config.js then the problem will be solved.
But this solution is probably not suitable for everyone.

[mjedari]

Yeah, I have the exact problem. Auth middleware does not recognize user is logged in when on ssr mode.

[Tcharlyson]

Same problem here

[mjedari]

Same problem here

I've fixed it by passing referer header in nuxt-auth requests.

[Tcharlyson]

Same problem here

I've fixed it by passing referer header in nuxt-auth requests.

Do you have an example of your implementation ? Thank you

[mjedari]

Same problem here

I've fixed it by passing referer header in nuxt-auth requests.

Do you have an example of your implementation ? Thank you

Sure, here I completely explained it:

#1244 (comment)

[Tcharlyson]

Same problem here

I've fixed it by passing referer header in nuxt-auth requests.

Do you have an example of your implementation ? Thank you

Sure, here I completely explained it:

#1244 (comment)

Unfortunately, this is not working

[irsyaadbp]

i have same problem, but now i fixed it
if you setting the proxy with axios there is the problem, because the proxy not work in SSR mode
so i setting base url too

then in the endpoint setting in nuxt/auth, i remove the /api (proxy) only on user endpoint

and dont forget to setting autofetch to false, because this run in client side, and because we remove the proxy(/api) from user endpoint it will cause error 404 not found

so when the login page we manually fetch the user

you can see my full config for nuxt/auth here https://pastebin.com/9d5PbfBN
and yeah its work!

[bmulholland]

I think all the tips here are already captured in #1197