Nuxt Laravel Password OAuth

I needed to use Oauth using laravel password using nuxt, as I learned, in my opinion the most complicated thing about Nuxt is the Auth. It's just not enough detailed information on the documentation for a new user to jump into this also there's not much people using this Oauth laravel passport approach but there's a lot of JWT auth approach everywhere.

My case is I need 1 domain for login and domain, so I can use in other domain. My structure will be like this

• Login Domain ( Laravel Passport )
• - Domain 1 ( Nuxt )
• - Domain 2 (Laravel )
• - Mobile ( Android )

I'm new to Nuxt, tried it and loved it. Have a bit of experience of vue but I think I took a jump on learning Vue and went straight to Nuxt. I know from experience you need basic understanding of Nuxt before jumping straight to Oauth. That's why I bought this course from udemy

https://www.udemy.com/course/nuxtjs-vuejs-on-steroids/

even though in youtube there's a lot of this but i needed something more focused.

The way I did it, first install the laravel passport this is straight forward just follow the documentation make sure you use php artisan passport:client to get key for oauth.

https://laravel.com/docs/7.x/passport

Then in Nuxt when you search Nuxt Oauth Laravel Passport it just show this simple documentation

https://auth.nuxtjs.org/providers/laravel-passport.html

First install @nuxtjs/auth, then in nuxt config

auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/auth/callback',
      user: '/'
    },
    strategies: {
      'laravel.passport': {
        url: process.env.LARAVEL_ENDPOINT,
        client_id: process.env.PASSPORT_CLIENT_ID,
        client_secret: process.env.PASSPORT_CLIENT_SECRET,
        userinfo_endpoint: process.env.LARAVEL_ENDPOINT + '/api/oauth/me',
      }
    }
  }

Then grab the login.vue from the documentation

<template>
  <section class="container">
    <div>
      <form>
        <div>
          <label for="username">Username</label>
          <input v-model="user.username" name="username">
        </div>
        <div>
          <label for="password">Password</label>
          <input v-model="user.password" type="password" name="password">
        </div>
        <div>
          <button type="submit" @click.prevent="passwordGrantLogin">
            Login with Password Grant
          </button>
        </div>

        <div>
          <button type="submit" @click.prevent="customPasswordGrantLogin">
            Login with Custom Passport Password Scheme
          </button>
        </div>
      </form>
    </div>
    <hr>
    <div>
      <button @click="oauthLogin">
        Login with OAuth
      </button>
    </div>
  </section>
</template>

<script>
export default {
  auth: false,
  data () {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async passwordGrantLogin () {
      await this.$auth.loginWith('password_grant', {
        data: {
          grant_type: 'password',
          client_id: process.env.PASSPORT_PASSWORD_GRANT_ID,
          client_secret: process.env.PASSPORT_PASSWORD_GRANT_SECRET,
          scope: '*',
          username: this.user.username,
          password: this.user.password
        }
      })
      this.$router.replace('/')
    },
    async customPasswordGrantLogin () {
      await this.$auth.loginWith('password_grant_custom', {
        data: this.user
      })
      this.$router.replace('/')
    },
    oauthLogin () {
      this.$auth.loginWith('laravel.passport')
    }
  }
}
</script>

<style scoped>
div {
  margin: 10px 0;
}
</style>

When Pressing login with oauth thats where the magic happens

Troubleshooting

loginWith promise result is undefined

Check if auth @nuxtjs/auth is installed

loginWith Uncaught (in promise) TypeError: Object(...) is not a function

npm i nanoid@2.1.11