websanova/vue-auth not set bearer token vue 3

Question

I used websanova/vue-auth for authentication in my vue-3 app. I follow the documentation the login was successful but when I try to get the user it did not pass the token or bearer token.

vue-auth configuration.

auth.js

import {createAuth}          from '@websanova/vue-auth/src/v3.js';
import driverAuthBearer      from '@websanova/vue-auth/src/drivers/auth/bearer.js';
import driverHttpAxios       from '@websanova/vue-auth/src/drivers/http/axios.1.x.js';
import driverRouterVueRouter from '@websanova/vue-auth/src/drivers/router/vue-router.2.x.js';
import driverOAuth2Google    from '@websanova/vue-auth/src/drivers/oauth2/google.js';
import driverOAuth2Facebook  from '@websanova/vue-auth/src/drivers/oauth2/facebook.js';

driverOAuth2Google.params.client_id = 'google-key';
driverOAuth2Facebook.params.client_id = 'facebook-key';

export default (app) => {
    app.use(createAuth({
        plugins: {
            http: app.axios,
            router: app.router,
        },
        drivers: {
            http: driverHttpAxios,
            auth: driverAuthBearer,
            router: driverRouterVueRouter,
            oauth2: {
                google: driverOAuth2Google,
                facebook: driverOAuth2Facebook,
            }
        },
        options: {
            rolesKey: 'type',
            notFoundRedirect: {name: 'notfound'},
            fetchData: { url: `auth/user`, method: 'GET', enabled: true, authType: 'bearer' },
            refreshData: { url: `auth/user`, method: 'GET', enabled: true, interval: 30, authType: 'bearer' },
            authType: "bearer",
        },
    }));
}

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import auth from './plugins/auth.js';
import axios from './plugins/axios.js';

const app = createApp(App);
app.router = router

app.use(axios)
app.axios.defaults.baseURL = process.env.VUE_APP_API_URL;

app.use(ElementPlus)
app.use(router)

app.use(auth)
app.mount('#app')

login form

await auth.login({
            data: form,
            authType: "bearer",
            redirect: '/dashboard',
            fetchUser: true,
            staySignedIn: true,
            rememberMe: true,
        })
        .then(null, (res) => {
            errors(res.response);
        });

login response

{
    "token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
    "data":{
        "id":3,
        "name":"john Doe",
        "email":"john@doe.com",
        "email_verified_at":null,
        "created_at":"2022-06-25T12:36:40.000000Z",
        "updated_at":"2022-06-25T12:36:40.000000Z"
    }
}

request user

there's no 'Authorization' in headers and also when i reload the page or go to other page using vue-router $auth.check() returned false.

what is wrong with my setup of websanova/vue-auth?

Answer 1

I fixed this problem on the same day. the websanova/vue-auth package will look at the token located at the header response of the API. so in my case, I'm using Laravel the solution is include the token in header response of the API.

notes: header key of token should be authorization and you should add Access-Control-Expose-Headers response header with value of Authorization

code:

// transform user data
$data = new UserResource($user);

return response()
  ->json(compact('token', 'data'))
  ->header('authorization', $token)
  ->header('Access-Control-Expose-Headers', 'Authorization');