Denoder / nuxt-module-alternatives

Alternative modules to use while waiting for Nuxt 3 Compatibility
MIT License
144 stars 14 forks source link

Auth module, Cannot read properties of undefined (reading 'set') at Auth.setUserToken (auth.mjs?v=210bd37f:142:1) #133

Closed TristanDuck closed 1 year ago

TristanDuck commented 1 year ago

Environment

Nuxt Config

  export default defineNuxtConfig({
    /*
    ** New RuntimeConfig ENV
    ** Import in script setup before use: const config = useRuntimeConfig();
    ** Use in vue pages: config.baseURL
    ** Use in template: config.baseURL
    */
    runtimeConfig: {
      public: {
        baseURL: process.env.BASE_URL,
      }
    },
    css: ['~/assets/css/main.css', 'vuetify/styles', '@mdi/font/css/materialdesignicons.min.css'],
    vite: {
      ssr: {
        noExternal: ['vuetify'],
      },
    },
    imports: {
      dirs: ['stores'],
    },
    modules: [
      '@vueuse/nuxt',
      '@nuxtjs-alt/auth',
      '@nuxtjs-alt/http',
      '@nuxtjs-alt/proxy',
      '@nuxtjs/color-mode',
      async (options, nuxt) => {
        // @ts-ignore: beta
        nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(vuetify()))
      },
      [
        '@pinia/nuxt',
        {
          autoImports: [
            // automatically imports `defineStore`
            'defineStore', // import { defineStore } from 'pinia'
            // automatically imports `defineStore` as `definePiniaStore`
            ['defineStore', 'definePiniaStore', 'acceptHMRUpdate'], // import { defineStore as definePiniaStore } from 'pinia'
          ],
        },
      ],
    ],
    proxy: {
      enableProxy: true,
      proxies: {
        '/api/': {
          target: process.env.BASE_URL
        }
      }
    },
    http: {
      baseURL: process.env.BASE_URL,
      credentials: 'include'
    },
    auth: {
      globalMiddleware: true,
      strategies: {
        laravelSanctum: {
          provider: 'laravel/sanctum',
          // url: process.env.BASE_URL,
          token: {
            property: 'token',
            required: false,
            type: 'Bearer',
            global: true
          },
          cookie: {
            server: true,
            name: 'XSRF-TOKEN',
          },
          endpoints: {
            csrf: { url: process.env.BASE_URL + '/sanctum/csrf-cookie' },
            login: { url: process.env.BASE_URL + '/api/login', method: 'post', propertyName: 'token' },
            logout: { url: process.env.BASE_URL + '/api/logout', method: 'post' },
            user: { url: process.env.BASE_URL + '/api/user', method: 'get', propertyName: 'user' }
          },
          user: {
            property: {
                client: false,
                server: false
            },
            autoFetch: false
          }
        },
      },
      redirect: {
        login: '/login',
        logout: '/login',
        home: '/',
        callback: '/'
      },
    },
    build: {
      transpile: ['vuetify'],
    },
  })

Reproduction

  const user = await $auth.loginWith('laravelSanctum', {
    body: {
      operator: email.value,
      password: password.value
    }
  })

  await $auth.setUser(user.user)
  await $auth.setUserToken(user.token)

Describe the bug

On auth login, trying to manually set the user token results in an undefined error for the token.set() function shown below.

image

Additional context

No response

Logs

No response

Denoder commented 1 year ago

Please format your config correctly

TristanDuck commented 1 year ago

Editied

Denoder commented 1 year ago

the laravel/sanctum provider uses the cookie scheme, there's no token to set as this would be handled by laravel via the XSRF token header. You're probably looking to use the local or oauth2 scheme if you're going to be setting tokens.

TristanDuck commented 1 year ago

Yeah, but tokens can also be used for third party authentication to sanctum (not on the same domain). But for my use case I can probably go without it. Thanks.