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!