How to secure app and be able to use Symfony Auth credentials in Symfony + VueJs SPA

Question

I've implemented an api-platform app with Symfony4 + GraphQl + axios + vuejs; all this is working as a SPA which uses a single controller action to render a template and from there all the router is handled by vue-router. So far so good.

When I'm about to secure the app(regular symfony way) all is working fine, here is the config

security:
    role_hierarchy:
        ROLE_ADMIN:       ROLE_USER
        ROLE_SUPER_ADMIN: [ ROLE_USER, ROLE_ADMIN, ROLE_ALLOWED_TO_SWITCH ]

    encoders:
        Symfony\Component\Security\Core\User\User: plaintext
        App\Entity\User:
            algorithm: bcrypt

    providers:

        in_memory:
            memory:
                users:
                    administrador: { password: [email protected], roles: [ 'ROLE_USER' ] }

    firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false

        tempapi: #this should not be configured 
            pattern: ^/api
            security: false

        memory:
            pattern: ^/
            logout: true
            anonymous: true
            provider: in_memory
            form_login:
                login_path: /login
                check_path: /login

    access_control:
        - { path: ^/login, roles: IS_AUTHENTICATED_ANONYMOUSLY }
        - { path: ^/, roles: ROLE_USER }

I think everything is well configured but when I comment the tempapi firewall and make login I'm not able to access the api, all I get is a redirection to the login page. Notice that I'm accessig the api from a view behind the firewall, so I expected to behave as a regular ajax request(because it is).

When I remove the comment and left the tempapi firewall without security I'm able to access the api but I cannot have access to the logged user credentials, roles, etc.

apollo configuration to use graphql endpoint

const httpLink = new HttpLink({
  uri: '/api/graphql'
})

const cache = new InMemoryCache()

export default new ApolloClient({
  link: httpLink,
  cache,
  connectToDevTools: true
})

axios configuration to access rest endpoint

export const backend = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json'
  }
})

Why is symfony dealing with async requests made behind an authenticated firewall as they were externals?. I don't have problems with CORS

Thanks in advance!