Feathers client (@feathers/client) is unable to authenticate a username/password in an ReactJs app

Question

According to the Featherjs Client Authentication docs, I have setup and initialised the module in my React App. After that on my Login button click, I call the recommended app.authenticate(data) method with the correct data format. This results in an error immediately Uncaught TypeError: Cannot read property 'create' of undefined in the feathers.js file from the client package.

It will be very helpful if you could point me to the right direction.

For this app:

1. I am currently working on development servers.
2. The ReactJs app is on localhost:3000
3. The FeathersJs app in on localhost:3030.
4. The React app is bootstrapped with CRA and the Feathers server is generated by the CLI.
5. In the React app I am using the @feathersjs/client package from npm.

I have already tried to request the server via curl in the terminal and that responds with the correct credentials. Following that, I made an AJAX request via the React app and that also worked. If I use AJAX request to do the authentication, I successfully get the token and the id of the user.

In reality I can further carry on. But the problem occurs to re-authenticate the user with the same token and to logout the user. I do understand that there are workarounds. But I would like to use the FeathersJs Client side as it provides ready to use reAuthenticate and logout methods.

Initialising Feathers Client

import feathers from '@feathersjs/client';

const client = feathers();

client.configure(feathers.authentication({
  storage: window.localStorage
}));

export default client;

login function in App.js called

login = () => {
      const self = this;
      client.authenticate({
        strategy: 'local',
        email: '[email protected]',
        password: 'supersecret'
      })
      .then(data => {
        console.log(data);
        self.setState({
          isAuthenticated: true
        });
        return data;
      })
      .catch(err => {
        console.log(err);
        self.setState({
          isAuthenticated: false
        });
      });
    };

When the function is called the following error is thrown:

In the dev console

Uncaught TypeError: Cannot read property 'create' of undefined
    at AuthenticationClient.authenticate (feathers.js:2838)
    at Object.App.login (App.js:50)
    at onClick (Login.js:8)

In the browser running the ReactJs application, the following error is shown:

TypeError: Cannot read property 'create' of undefined
AuthenticationClient.authenticate
node_modules/@feathersjs/client/dist/feathers.js:2838

> 2838 | var promise = this.service.create(authentication).then(function (authResult) {

What am I doing wrong and how can I make use of the FeathersJs client?

Answer 1

You forgot to initialize a REST or Socket.io client connection as also shown in the React Native API. It should be

import io from 'socket.io-client';
import feathers from '@feathersjs/feathers';
import socketio from '@feathersjs/socketio-client';

const socket = io('http://api.my-feathers-server.com', {
  transports: ['websocket'],
  forceNew: true
});
const client = feathers();

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

export default client;