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

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.

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

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

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

          <button type="submit" @click.prevent="customPasswordGrantLogin">
            Login with Custom Passport Password Scheme
      <button @click="oauthLogin">
        Login with OAuth

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
    async customPasswordGrantLogin () {
      await this.$auth.loginWith('password_grant_custom', {
        data: this.user
    oauthLogin () {

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

When Pressing login with oauth thats where the magic happens


loginWith promise result is undefined

Check if auth @nuxtjs/auth is installed

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

npm i [email protected]

Subscribe to You Live What You Learn

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]