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?

`there's no 'Authorization' in headers` well ... which line of your code puts it there? — Bravo, Jun 26 '22 at 07:30
@Bravo when I set `fetchUser: true` it will automatically fetch the user endpoint. But there's no bearer token in a request. see my vue-auth configuration and login form — Kenneth, Jun 26 '22 at 07:33
where are you saving the token to use it in requests? have you read [this doc](https://websanova.com/docs/vue-auth/guides/tokens) - can't see where you set taht up — Bravo, Jun 26 '22 at 07:33
nope, I didn't save the token, there's no documentation for that. I'm not sure if it's on my API response format. or vue-auth configuration — Kenneth, Jun 26 '22 at 07:36
oh ... that's embarrassing that I posted a link that starts with the sentence ... *The main concept to understand with tokens is in how they are stored* — Bravo, Jun 26 '22 at 07:38

score 1 · Accepted Answer · answered Jun 29 '22 at 14:52

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');

websanova/vue-auth not set bearer token vue 3

1 Answers1