Autoredirect user to login page after session timeout

[lisa-kwok]

Is your feature request related to a problem? Please describe.
A 401 unauthorised alert will be prompted when a user who is already logged out trying to perform action on the UserPage.

Describe the solution you'd like
Ideally user should be redirected to the LogIn Page

[liangyuanruo]

@lisatjide should the user be redirected to the login page instead?

[aniruddha-adhikary]

There is an existing implementation of the requested feature in two actions, one of them being creating a new link.

user/actions/index.ts

const createUrlOrRedirect =
  (history: History) =>
....
      if (response.status === 401) {
        history.push(LOGIN_PAGE)
        dispatch<SetUrlUploadStateAction>(setUrlUploadState(false))
      }

However, handling the error response in every single method where an HTTP call is made, would result in a number of duplicates. I suggest interacting with the history object directly, instead of passing it through props and arguments of methods in a long chain.

Proposal

Instantiate the history object outside of the entry-point.

history.ts

import { createHashHistory } from 'history'
export default createHashHistory()

Use the history object in the React Root.

index.ts

import * as history from './history';
...

And taking care of the redirection to the login page at the API Call layer.

app/utils/request.js

import * as history from '../../../history';

export const postJson = (
  url: string = '',
  data: object = {},
  options?: RequestInit,
) => {
  // ....
  const response = crossFetch(url, opts);
  if (response.code === 401) history.push(LOGIN_PAGE);
}

Something of this nature :) Any thoughts? @liangyuanruo

[aniruddha-adhikary]

Then again I just realized the state would be out-of-sync. Example:

dispatch<SetUrlUploadStateAction>(setUrlUploadState(false))