How to use @feathersjs/authentication-client - 10 common examples

import feathers from '@feathersjs/feathers';
import feathersAuthClient from '@feathersjs/authentication-client';

const app = feathers();
app.configure(feathersAuthClient());
app.authenticate({strategy : 'abcdef'}).then(() => {});
app.logout().then(() => {});

// check if the non-augmented @feathersjs/feathers typings still work
app.on('asd', () => {});
app.service('asd').get(0).then(() => {});

left: '50%'
  }
});

const app = feathers();
const socket = io(
  `${process.env.REACT_APP_API_PROTOCOL || window.location.protocol}//${process
    .env.REACT_APP_API_HOSTNAME || window.location.hostname}:${process.env
    .REACT_APP_API_PORT || 3234}`
);

// Setup the transport (Rest, Socket, etc.) here
app.configure(socketio(socket));

// Available options are listed in the "Options" section
app.configure(auth({ storage: localStorage }));

let connection;

class Root extends React.PureComponent {
  state = {
    snackMessage: { open: false, text: '' },
    connected: false,
    hass_url:
      localStorage.getItem('hass_url') ||
      `${window.location.protocol}//hassio:8123`
  };

  componentDidMount = () => this.login();

  setHassUrl = hass_url => this.setState({ hass_url });

feathers.configure(socketio(socket))

if (typeof window !== 'undefined') {

  feathers.configure(authentication({
    header: 'Authorization', // the default authorization header for REST
    path: '/api/authentication', // the server-side authentication service path
    jwtStrategy: 'jwt', // the name of the JWT authentication strategy
    entity: 'user', // the entity you are authenticating (ie. a users)
    service: 'users', // the service to look up the entity
    cookie: 'feathers-jwt', // the name of the cookie to parse the JWT from when cookies are enabled server side
    storageKey: 'feathers-jwt', // the key to store the accessToken in localstorage or AsyncStorage on React Native
    storage: window.localStorage // Passing a WebStorage-compatible object to enable automatic storage on the client.
  }))
} else {
  feathers.configure(authentication({
    header: 'Authorization', // the default authorization header for REST
    path: '/api/authentication', // the server-side authentication service path
    jwtStrategy: 'jwt', // the name of the JWT authentication strategy
    entity: 'user', // the entity you are authenticating (ie. a users)
    service: 'users', // the service to look up the entity
    cookie: 'feathers-jwt', // the name of the cookie to parse the JWT from when cookies are enabled server side
    storageKey: 'feathers-jwt', // the key to store the accessToken in localstorage or AsyncStorage on React Native
  }))
}

Vue.prototype.$feathers = feathers

export default feathers

import Vue from 'vue'
import createApplication from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'
import authentication from '@feathersjs/authentication-client'
import io from 'socket.io-client'

const socket = io(process.env.API_BASE_URL, {
  transports: ['websocket']
})
const feathers = createApplication()

feathers.configure(socketio(socket))
feathers.configure(authentication({
  header: 'Authorization', // the default authorization header for REST
  path: '/api/authentication', // the server-side authentication service path
  jwtStrategy: 'jwt', // the name of the JWT authentication strategy
  entity: 'user', // the entity you are authenticating (ie. a users)
  service: 'users', // the service to look up the entity
  cookie: 'feathers-jwt', // the name of the cookie to parse the JWT from when cookies are enabled server side
  storageKey: 'feathers-jwt', // the key to store the accessToken in localstorage or AsyncStorage on React Native
  storage: window.localStorage // Passing a WebStorage-compatible object to enable automatic storage on the client.
}))

Vue.prototype.$feathers = feathers

export default feathers

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

const socket = io('http://localhost:8081', {transports: ['websocket']})

const api = feathers()
  .configure(socketio(socket))
  .configure(auth({ storage: window.localStorage }))

api.service('/users')
api.service('/messages')

export default api

useEffect(() => {
    if (!client) {
      client = feathers();
      let path: string = clone(props.location.pathname);
      let url: string = `${process.env.REACT_APP_API_PROTOCOL ||
        window.location.protocol}//${process.env.REACT_APP_API_HOSTNAME ||
        window.location.hostname}:${
        process.env.REACT_APP_API_PORT || process.env.NODE_ENV === 'development'
          ? '8234'
          : window.location.port
      }`;
      socket = io(url, { path: `${path}/socket.io`.replace('//', '/') });
      client.configure(socketio(socket));
      client.configure(authentication());
    }
  }, [props.location]);

import auth from '@feathersjs/authentication-client';
import io from 'socket.io-client';

let API_URL = 'https://cg-trello-clone.now.sh';

if (window.location.hostname === 'localhost') {
  API_URL = 'http://localhost:3030';
}

const socket = io(API_URL, {
  transports: ['websocket'],
});

const feathersClient = feathers()
  .configure(socketio(socket))
  .configure(auth({
    storage: window.localStorage,
  }));

export default feathersClient;

bootstrap() {
    const endpoint = process.env.EVERGREEN_ENDPOINT;
    logger.info('Configuring the client to use the endpoint %s', endpoint);
    this.socket = io(endpoint, {
      reconnection: true,
      reconnectionDelay: 1000,
      reconnectionDelayMax : 5000,
      reconnectionAttempts: Infinity
    });
    this.app.configure(socketio(this.socket));

    this.app.configure(auth({
    }));

    this.app.on('reauthentication-error', (error) => {
      logger.info('Client must re-authenticate..', error);
      return this.reg.login();
    });

    logger.info('Registering listener for event: `update created`');
    this.app.service('update').on('created', (message) => {
      logger.info('Received an Update `created` event, checking for updates', message);
      this.runUpdates();
    });

    logger.info('Registering listener for event: `status ping`');
    this.app.service('status').on('ping', (message) => {
      logger.debug('Received ping', message);

import feathers from '@feathersjs/feathers';
import socketio from '@feathersjs/socketio-client';
import auth from '@feathersjs/authentication-client';
import io from 'socket.io-client';
import { CookieStorage } from 'cookie-storage'

const storage = new CookieStorage();
const socket = io(process.env.apiURL, { transports: ['websocket'] });
const app = feathers()
  .configure(socketio(socket))
  .configure(auth({ storage }));

export default app;