# Unauthorized Responses

Some applications log users out after a certain period of time. For single page apps, this usually presents itself as requests to the backend suddenly failing for the logged-out user. This can occur when the user leaves the application open in their browser over night, for instance.

A common UX pattern is to display a notification to the user when this occurs, so that they can log back in. This recipe describes one way that you can detect when a user is logged out, so that you can notify them however you see fit.

## Your server

The backend that you interface with needs to provide a consistent representation of the user being logged out.

If your API uses proper [HTTP status codes](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes), then this means that the responses will have a `401` status code.

The rest of this guide will assume that the backend returns a `401` HTTP status code, although this same system works for other representations, too.

## Action Creators

Whenever an unauthorized response from the backend is returned in your CRUD action creators, include the status code in the [request action](/requests/request-actions.md) that you dispatch.

You can attach arbitrary data to a request by specifying `requestProperties` on the action.

If you're using [Redux Resource XHR](/extras/redux-resource-xhr.md), then this will be set for you. You can access the status code at `action.requestProperties.statusCode`.

If you're not using Redux Resource XHR, then your code may look something like:

```javascript
export function readBook(id) {
  return function(dispatch) {
    dispatch({
      type: actionTypes.READ_RESOURCES_PENDING,
      resourceType: 'books',
      resources: [id]
    });

    // `request` would be whatever function you are using to make HTTP
    // requests. It could be `window.fetch()`, axios, superagent, xhr,
    // or anything else that you prefer.
    request('/some-url', (err, res) => {
      // Different libraries attach the status code to different properties.
      // It is usually either `res.status` or `res.statusCode`. You do not
      // need to check both properties if you know which one your library uses.
      if (err || res.statusCode >= 400 || res.status >= 400) {
        dispatch({
          type: actionTypes.READ_RESOURCES_FAILED,
          resourceType: 'books',
          resources: [id],
          requestProperties: {
            statusCode: res.statusCode
          }
        });

        return;
      }

      // Check to see if the request was cancelled, or if it succeeded, then
      // dispatch the appropriate action here.
    });
  }
}
```

## Reducer

The final step is to write a reducer that updates the state tree whenever these failed actions occur. Here is an example reducer that does this:

```javascript
import { actionTypes } from 'redux-resource';

const {
  READ_RESOURCES_FAILED,
  UPDATE_RESOURCES_FAILED,
  CREATE_RESOURCES_FAILED,
  DELETE_RESOURCES_FAILED
} = actionTypes;

export default function reducer(state = false, action) {
  const isFailedAction = action.type === READ_RESOURCES_FAILED ||
    action.type === UPDATE_RESOURCES_FAILED ||
    action.type === CREATE_RESOURCES_FAILED ||
    action.type === DELETE_RESOURCES_FAILED;

  if (isFailedAction && action.requestProperties.statusCode === 401) {
    return true;
  }

  return state;
}
```

Before an unauthorized response has been received, this reducer will return a state of `false`. When a logged-out response is received, then the reducer will update the state to be `true`.

You'll want to use this reducer with [`combineReducers`](http://redux.js.org/docs/api/combineReducers.html):

```javascript
import { combineReducers } from 'redux';
import unauthorizedReducer from './unauthorized-reducer';

const reducer = combineReducers({
  unauthorized: unauthorizedReducer,
  // ...other store slices (your resource reducers, etc.)
});
```

With this in place, you have a slice of your state tree that will be `true` whenever an unauthorized response is received.

You can use this value in your view layer to toggle the appearance of a modal, or some other notification, to let the user know that they need to log back in.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://redux-resource.js.org/recipes/unauthorized-responses.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.