nuxt-community / auth-module

Zero-boilerplate authentication support for Nuxt 2
https://auth.nuxtjs.org
MIT License
1.93k stars 924 forks source link

Error Auth laravel passport: Cannot read property 'status' of undefined #1678

Open FuriosoJack opened 2 years ago

FuriosoJack commented 2 years ago

Version

module: @nuxtjs/auth-next@5.0.0-1643791578.532b3d6 nuxt: nuxt@2.15.8

image

Nuxt configuration

import colors from 'vuetify/es5/util/colors'

import hooks from './hooks';
//import {hooks} from "@nuxt/typescript-runtime";

export default {
  // Target: https://go.nuxtjs.dev/config-target
  //target: 'static',
  ssr:false,
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: '%s - ViviendApp',
    title: 'ViviendApp',
    htmlAttrs: {
      lang: 'es'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Administracion de inventarios inmobiliarios' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    { src: '~assets/sass/app.scss', lang: 'scss' }
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',

    //detectar si es mobil
    '@nuxtjs/device',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
  auth: {
    strategies: {
      'laravelPassport': {
        provider: 'laravel/passport',
        endpoints: {
          userInfo: '/api/cliente/user',
          authorization: '/cliente/oauth/authorize',
        },
        responseType:'code',
        url: process.env.BROWSER_BASE_URL,
        clientId: process.env.OAUTH_CLIENT_ID,
        clientSecret: process.env.OAUTH_SECRET
      }
    },
    redirect: {
      home: false,
      callback:"/login" // https://hashinteractive.com/blog/nuxt-authentication-auth0-provider-management-api/
    },
    plugins:[
      '~/plugins/auth.js',
      '~/plugins/axios-accessor.ts'
    ]
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: process.env.API_URL
  },

  publicRuntimeConfig: {
    apiUrl: process.env.API_URL,
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.APP_URL
    },
    auth:{
      client_id: process.env.OAUTH_CLIENT_ID,
      client_secret: process.env.OAUTH_SECRET
    }
  },
  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark:false,
      themes: {
        light: {
          primary: '#f18e29',
          secondary: '#6F6E6E',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FFC107',
        }
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extractCSS: true
  },
  router: {
    base: '/',

  },
  hooks: hooks(this)
}

-->

Reproduction

:warning: without a minimal reproduction we won't be able to look into your issue In Login.vue page

<template>
  <section class="container">
    <div><button @click="oauthLogin">Login with OAuth</button></div>
  </section>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
  auth: false,
  data() {
    return {
      user: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    oauthLogin() {
      this.$auth.loginWith("laravelPassport",{});
    }
  }
})
</script>

In auth remote Server

image

When I authorize, the callback is made to /login

image

Redirect to http://localhost:3000/login?code=def50200167d43501feb9c6bf1e520f17984930422d4812ae37c91a4fd08dedd891c72734f8d9cbf673ab6cf7cb99df4a089919004263587068736e260664228475e3c35517be2e632388829961402c4f0f732172e0782fa838428dfac86101a330918d9b27b94f95252d251cf5365de5d9c892c37fadc34b17896fbe8d8b214265a9fb21ef625e2631b5363fdcaa2f7677a9960cf49be8660309de03b2ce4d19d8b1d579f36f66cd29cf8406d664a3b9c601cfd692fdd56d8d9c4b299423fba6d81f57009bc0545bff35f4cfe0a477ff447baf82c2301e1ef1239c1e6b1d3f6a1ba2a8819d7eed24a4a6dfffe921dedd1691c730c903fc36734d7e08aca0fbae23a133ef152fb17f112969bab53614efae8625d47e29efbcb1fedf4a163a9cfd6e5140884e5513ab46d1d69b6d344a15fdbb32d695450c7a4b66bd9816ad4c841ebbd2b07eb0e8d5fc8c85fa39fe3be3f8415541601a332fa2aa0f46ef904fb&state=AQPvbxW1lK

Network in browser

image

in console

image

Steps to reproduce

1: Create nuxt project 2: Create laravel passport project (Must be one hosting or vpc in the cloud) 3: Clear a client and assign it in the nuxt .env 3: do yun this.$auth.loginWith("laravelPassport",{}); 3: Do the authentication