Page refresh on a resource path leads the app to logout

Question

The app does not reload the JWT token for API calls on page reload. Reloading on the Dashboard path works well but fails on Resource paths.

I'm not sure to understand the way we have to configure the feathers-client to do so.

````

//feathersClient.js
import feathers from 'feathers-client';

const host = 'http://localhost:3030';

export default feathers()
    .configure(feathers.hooks())
    .configure(feathers.rest(host).fetch(window.fetch.bind(window)))
    .configure(feathers.authentication({ jwtStrategy: 'jwt', storage: window.localStorage }));

//authClient.js
import { authClient } from 'aor-feathers-client';
import feathersClient from './ApiClient/feathersClient';

const authClientOptions = {
    storageKey: 'feathers-jwt',
    authenticate: { strategy: 'local' },
};

export default authClient(feathersClient, authClientOptions)

//App.js
import React from 'react';
import { Admin, Resource } from 'admin-on-rest';
import { Delete } from 'admin-on-rest/lib/mui'
import apiClient from './ApiClient'
import authClient from './authClient'
import Dashboard from './components/Dashboard'
import { ProjectList, ProjectCreate, ProjectShow, ProjectEdit } from './components/Projects'
import { PeopleList, PeopleCreate, PeopleShow, PeopleEdit } from './components/Peoples'

const App = () => (
    <Admin
        authClient={authClient}
        restClient={apiClient}
        title="SWP by Akoya"
        dashboard={Dashboard}>
        <Resource name="projects"
            list={ProjectList}
            create={ProjectCreate}
            show={ProjectShow}
            edit={ProjectEdit}
            remove={Delete}/>
    </Admin>
)

export default App

Answer 1

Have a look at the React chat example. It shows how to authenticate with either local authentication or first by trying to use the stored token.

// client.js
import io from 'socket.io-client';
import feathers from 'feathers/client';
import hooks from 'feathers-hooks';
import socketio from 'feathers-socketio/client';
import authentication from 'feathers-authentication-client';

const socket = io('http://localhost:3030');
const client = feathers();

client.configure(hooks());
client.configure(socketio(socket));
client.configure(authentication({
  storage: window.localStorage
}));

export default client;

Then

client.authenticate()
  // Authentication with stored token was successful
  .then(() => showApplication())
  // Authentication failed. Show login page
  .catch(error => showLogin());