Auth-module: Login after Register fails (laravelSanctum Provider, Laravel Sanctum, Laravel Fortify)

Created on 2 Feb 2021  路  3Comments  路  Source: nuxt-community/auth-module

Version

module: ^5.0.0-1611574754.9020f2a
nuxt: ^2.14.12

Nuxt configuration

mode:

  • [x] universal
  • [ ] spa

Nuxt configuration

Reproduction

I'm using auth-next with Laravel Sanctum and Laravel Fortify.

Login by itself works, but I have issues with login after registration / reset-password.

What is expected?

The following is the expected behaviour. In v.4.9.1 this used to work. Now in v5.x the fetchUser method does not perform the user request and therefore doesn't log in in nuxt-auth, however I am logged in server-side / Laravel.

      this.$axios.get('/sanctum/csrf-cookie').then(() => {
        this.$axios
          .post('/register', this.form)
          .then(() => {
              // Registration successful
              this.$auth.fetchUser().then(() => {
                this.$router.push('/dashboard')
              })
          })
          .catch((errors) => {
            // Registration failed
            console.log(errors)
          })
      })

This also doesn't work:

  • fetching the user manually via axios and then setting the user via setUser
  • this in fact sets the user, but loggedIn remains false and therefore a login is not possible
      this.$axios.get('/sanctum/csrf-cookie').then(() => {
        this.$axios
          .post('/register', this.form)
          .then(() => {
              // Registration successful
              this.$axios
              .get('/api/user')
              .then((response) => {
                this.$auth.setUser(response.data.data)
                this.$router.push('/dashboard')
              })
              .catch((errors) => {
                console.log(errors)
              })
          })
          .catch((errors) => {
            // Registration failed
           console.log(errors)
          })
      })

The following is only a workaround, but not ideal:

  • logging the user out (client and server-side)
  • then logging the user back in (automatic redirect)
      this.$axios.get('/sanctum/csrf-cookie').then(() => {
        this.$axios
          .post('/register', this.form)
          .then(() => {
              // Registration successful
              this.$auth.logout().then(() => {
              this.$auth
                .loginWith('laravelSanctum', {
                  data: this.form,
                })
                .then(() => {
                  // Login successful
                })
                .catch((errors) => {
                  // Login failed
                  console.log(errors)
                })
            })
          })
          .catch((errors) => {
            // Registration failed
           console.log(errors)
          })
      })

Additional information

Checklist

  • [x] I have tested with the latest Nuxt version and the issue still occurs
  • [x] I have tested with the latest module version and the issue still occurs
  • [x] I have searched the issue tracker and this issue hasn't been reported yet
bug

Most helpful comment

Hi guys! I think we just need to set the token flag before fetching the user. Can you try the following code?

this.$axios.get('/sanctum/csrf-cookie').then(() => {
  this.$axios
    .post('/register', this.form)
    .then(() => {
        // Set token flag and fetch user
        this.$auth.setUserToken(true)).then(() => {
          this.$router.push('/dashboard')
        })
    })
    .catch((errors) => {
      // Registration failed
      console.log(errors)
    })
})

Let me know if it worked! :)

EDIT: the setUserToken also fetches the user

All 3 comments

Any update on this problem?

await this.$auth.setUserToken(true)
set this after registration complete

Hi guys! I think we just need to set the token flag before fetching the user. Can you try the following code?

this.$axios.get('/sanctum/csrf-cookie').then(() => {
  this.$axios
    .post('/register', this.form)
    .then(() => {
        // Set token flag and fetch user
        this.$auth.setUserToken(true)).then(() => {
          this.$router.push('/dashboard')
        })
    })
    .catch((errors) => {
      // Registration failed
      console.log(errors)
    })
})

Let me know if it worked! :)

EDIT: the setUserToken also fetches the user

Was this page helpful?
0 / 5 - 0 ratings