CODEWITHSUNDEEP
laravelnuxt.jslaravel-sanctumnuxt-auth
Dani
Dani

Reputation: 41

Laravel/Sanctum user fetch problem, with auth-next

I'm trying to create an SPA for a laravel REST API protected by Sanctum

Right now, on my SPA the user can log in without a problem and the API sends back the token; but then the SPA doesn't fetch the user. I mean, it doesn't even try to fetch it; no error, no request, no nothing. Login and logout work flawlessly, but I'm unable to fetch the user.

Here's my config for auth module ( v5 ):

auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'https://XXXXXXXXXXXXX/api',
        token: {
          property: 'access_token',
          required: true,
          type: 'Bearer'
        },
        endpoints: {
          login: { url: '/login', method: 'post' },
          logout: { url: '/logout', method: 'post' },
          user: { url: '/user', method: 'get' }
        },
        user: {
          autoFetch: true
        }
      }
    },

My login function. If I understand correctly, just after the login the laravel/sanctum provider should fetch the user data:

async login() {
            try {
                let response = await this.$auth.loginWith('laravelSanctum', { data: this.form })
                console.log('response -> ', response)
                this.$router.push('/')
            } catch (error) {
                console.log('Error Response login -> ', error.response)
            }
        },

My logout function, just for completion ( it shouldn't have anything to do with the problem ):

async logout() {
            try {
                let response = await this.$auth.logout()
                console.log('responselogout -> ', response)
                this.$router.push('/login')
            } catch (error) {
                console.log('Error Response -> ', error.response)
            }
    },

Out of despair, I even created a function to try to fetch the user manually 😅 :

async fetch() {
            try {
                let responseuser = await this.$auth.fetchUser()
                console.log('responseuser -> ', responseuser)
                let loggedin = await this.$auth.loggedIn
                console.log('loggedin -> ', loggedin)
            } catch (erroruser) {
                console.log('Error Response user -> ', erroruser.response)
            }
    },

On login, everything's fine but there is no request to the user endpoint:

Login request

When I try to fetch it manually, there is no request either:

Undefined response

And then on logout, everything works as it should:

Logout request

If it made the request to the /user endpoint ( either automatically after login, or manually when I use the fetch function ) and the API rejected it, or if there was an empty answer ... I would have something to work with ( I'm in control of the API too ), but with no request I just don't know where to start debugging the problem.

Any tip would be useful. Thanks in advance!

Upvotes: 2

Views: 1759

Answers (1)

Dani
Dani

Reputation: 41

Just passing by to say I could finally solve the problem! Yay! 🥳

There was no request to /user because there was no XSRF-TOKEN cookie. And there was no XSRF-TOKEN because of browser security.

Long story short, this solution worked for me -> https://github.com/nuxt-community/auth-module/issues/1164#issuecomment-839199946

I hope this is helpful for anyone on the same situation :)

Upvotes: 2

Related Questions