Skip to main content
Version: 4.5

Authentication

All network requests are run through the static fetchOptionsPlugin optionally defined in your Resource.

Here's an example using simple cookie auth:

class AuthdResource extends Resource {
  static fetchOptionsPlugin = (options: RequestInit) => ({
    ...options,
    credentials: 'same-origin',
  });
}
import { Request } from 'rest-hooks';

class AuthdResource extends Resource {
  static fetchPlugin = (request: Request) => request.withCredentials();
}

You can also do more complex flows (like adding arbitrary headers) to the request. Every fetchOptionsPlugin takes in the existing init options of fetch, and returns new init options to be used.

Auth Headers from React Context​

Here we use a context variable to set headers. Note - this means any fetch shape functions can only be called from a React Component. (However, this should be fine since the context will only exist in React anyway.)

class AuthdResource extends Resource {
  static fetchOptionsPlugin = (options: RequestInit) => {
    const { session } = useAuthContext();
    return {
    ...options,
      headers: {
        ...options.headers,
        'Access-Token': session,
      },
    }
  };
}

Code organization​

If much of your Resources share a similar auth mechanism, you might try extending from a base class that defines such common customizations.