Stryber Authentication Service

Description

Service which contains API to handle authentication (sign up, sign in, sign out and forgot password), based on axios and redux-sagas. Service adds authentication token when user is signed in and removes token after sign out.

Installation

Install dependencies

npm i @stryberventures/stryber-react-core-components-auth --save

Service expects next peer dependencies:

"axios": ">= 0.19.0",
"react-redux": ">= 7.1.0",
"redux-saga": ">= 1.1.3"

Usage

To initialize auth service:

1. Call Auth.register method:

Auth.register({
  axiosInstance,
  storageProvider,
  routes: {
    signIn: 'auth/my-custom-route',
  }
});

where axiosInstance should be axios instance which is used in application and storageProvider should be wrapper above storage module, like:

const storageProvider = {
  setItem: localStorage.setItem.bind(localStorage),
  getItem: localStorage.getItem.bind(localStorage),
  removeItem: localStorage.removeItem.bind(localStorage),
};

The idea of storage wrapping is that you can use any storage provider (for example AsyncStorage for React Native). 2) Dispatch initialization method

dispatch(Auth.actions.initialize());

After that you are able to use Auth actions, for example:

dispatch(Auth.actions.signIn({
  email, password,
}));
dispatch(Auth.actions.resetPasswordConfirmation({
  email, password, token,
}));

Error handling

Service expects that error will look in next way:

interface IAuthError {
  message: string;
  errors?: null | {
    [errorKey: string]: string[];
  };
}

otherwise, you will get general authentication error message. If your error data looks different, or it is wrapped by other object, you can handle it with axios interceptor:

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    return Promise.reject(error?.response?.data?.someObject || error);
  },
);

where someObject is typeof IAuthError