Nuxt Auth + socialite manual login

user_4422180 0
Viewed 817

I am trying to use the Nuxt Auth module and socialite for social logins. I have an API in Laravel 8 and a client in NuxtJS.

I am wondering if someone could tell me:

  • If my logic here is ok?
  • How to manually log user with nuxt auth (manually set token and user)?

So currently here is my flow for social logins:

  1. Click on login with google makes an API call to my backend where I get redirect URL from socialite to google.
  2. My frontend redirects me to the google login page, then back to my frontend app after I picked the account.
  3. I send the google code to the backend to callback endpoint for socialite which then grabs me the google user. In same place after I deal with users in my app I am returning the token which I create by doing return $this->okResponse(['token' => $nativeUser->createToken('social-login')->accessToken]);
  4. At this point I am back in my front end with the token which then I am trying to set this.$auth.setUserToken(response.data.token) which apparently does not equal logging the user in. So it looks like this:
mounted() {
    this.$axios.get(`login/social/google/callback`, {params: {code: this.$route.query.code}}).then(response => {
      console.log(response)

      // this.$auth.strategy.token.set(response.data.token)
      this.$auth.setUserToken(response.data.token)

      if (this.$auth.loggedIn) {
        console.log('I am logged in!')
      } else {
        console.log('I am NOT logged in!', this.$auth)
      }
    })
  }

I am not logged in. Do I have to manually set loggedIn, 'User' and token? Or this is just madness? The only other thing I see here as a solution is my own custom strategy but this seems like total overkill.

laravel-socialite nuxt.js laravel authorization oauth
1 Answers

Not sure if this is the best way but I ended up doing something like this.

  mounted() {
    this.$axios.get(`login/social/google/callback`, {params: {code: this.$route.query.code}}).then(response => {
      this.$auth.setUserToken(response.data.token)
      this.$auth.setUser(response.data.user)

      if (this.$auth.loggedIn) {
        console.log('I am logged in!')
      } else {
        console.log('I am NOT logged in!', this.$auth)
      }
    })
  }

This seems to be working ok.

user_44221800
Related