Access token not passed in subsequent requests (websanova/vue-auth for Laravel & Vue SPA)

Question

I've been banging my head against the wall for hours now and I'm hoping someone can help me finalize the setup of the websanova/vue-auth library so my Vue SPA can authenticate against my api endpoints.

The point I'm at is that I'm performing a login (this.$auth.login()) in Vue and it's authenticating successfully, but when it attempts to pull the user's info immediately afterwards, that api call fails with a 401 error code. That makes sense because from what I can tell by inspecting the http calls, it doesn't pass a Bearer authentication header in the second request. But my understanding is that if I'm using the bearer driver for vue-auth, passing along the Bearer header is literally it's primary function.

Some environment info:

Laravel 8.13.0
Vue 2.6.12
@websanova/vue-auth@4.1.2 (configured to use axios, not Vue Resource)
Laravel Passport 10.1 (and my api endpoints are guarded by it)

Here's the current state of things:

I know Laravel Passport & the api endpoint authentication is working ok because if I grab the access token that the login call returns and use it to make a manual request to the endpoint that's used to pull the user's info via Postman , it works.
I don't believe CORS is an issue because the front-end and back-end are on the same domain.
I know that vue-auth is installed and at least partially functioning since it does attempt the login. And if I disable the fetchUser parameter, it does appear to attempt to redirect after the successful login.
I've gone over my vue-auth setup over and over based on the Vue 2 examples in the project documentation here and the configs in the 2.x sample app as well as some of the tutorials I followed to get this far like this, and this, and this but I've run out of ideas.

My current theories are:

Maybe I'm not calling or initializing the bearer driver properly so it can do the various calls but isn't attempting to add the bearer token on any http calls(?)
Maybe the login is returning the access token but it's not being stored/captured so when it makes the subsequent call, it can't find it and leaves the header out as a result(?) (I don't see the access token in the cookies, local storage or session storage in my browser)
I'm running on a self-signed SSL cert, not sure if the browser might dislike that(?)
I don't currently have anything in place for handling token refreshes yet. Not sure if that is an issue at this point?
The instructions indicated to use "Vue.router" for the router attribute in the plugins section of the vue-auth options but when I try that, it says it's undefined so that could be a source of trouble. (But I referenced the main VueRouter and it doesn't seem to be throwing any errors)

Here's my vue & vue-auth configuration:

import App from './App.vue';
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);

import VueRouter from 'vue-router';

// From https://websanova.com/docs/vue-auth/guides/startup
// Also tried the other 2.x variation on that page.
// Also tried the ones here with no difference: https://github.com/websanova/vue-auth/blob/master/demos/2.x/src/config/plugins.js
import auth                  from '@websanova/vue-auth/dist/v2/vue-auth.esm.js';
import driverAuthBearer      from '@websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
import driverHttpAxios       from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
import driverRouterVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm.js';

window.Vue = require('vue');

import {routes} from './routes';
import Vuelidate from 'vuelidate'

Vue.use(VueRouter);
Vue.use(Vuelidate);

const router = new VueRouter({
    mode: 'history',
    base: '/app/',
    routes: routes
});

// From https://github.com/websanova/vue-auth/blob/master/demos/2.x/src/config/plugins.js

Vue.use(auth, {
    plugins: {
        http: Vue.axios, // Axios
        router: router,
    },
    drivers: {
        auth: driverAuthBearer,
        http: driverHttpAxios,
        router: driverRouterVueRouter,
        oauth2: {

        }
    },
    options: {
        registerData: {url: '/api/register', method: 'POST', redirect: '/login'},
        loginData: {url: '/api/login', method: 'POST', redirect: '', fetchUser: true},
        logoutData: {url: '/api/logout', method: 'POST', redirect: '/', makeRequest: true},
        fetchData: {url: '/api/users/me', method: 'GET', enabled: true},
        refreshData: {url: '/api/refresh', method: 'GET', enabled: true, interval: 30},
        rolesKey: 'type',
        notFoundRedirect: {name: 'user-account'},
    },
});

And here's my login method in my login page:

login() {
            // get the redirect object
            var redirect = this.$auth.redirect()
            var app = this

            this.$auth
                .login({
                    data: {
                        email: app.email,
                        password: app.password
                    },
                    redirect: {name: 'home'},
                    rememberMe: true,
                    staySignedIn: true,
                    fetchUser: true
                });
}

If anyone can spot anything that I might've missed, it would be much appreciated!

Access token not passed in subsequent requests (websanova/vue-auth for Laravel & Vue SPA)

0 Answers