Skip to main content
Version: 6.1

Resource Authentication

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

Cookie Auth#

Here's an example using simple cookie auth:

import { Resource } from '@rest-hooks/rest';
abstract class AuthdResource extends Resource {  static getFetchInit = (init: RequestInit): RequestInit => ({    ...init,    credentials: 'same-origin',  });}

You can also do more complex flows (like adding arbitrary headers) to the request. Every getFetchInit() 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 endpoint functions can only be called from a React Component. (However, this should be fine since the context will only exist in React anyway.)

abstract class AuthdResource extends Resource {  static useFetchInit = (init: RequestInit) => {    const accessToken = useAuthContext();    return {      ...init,      headers: {        ...init.headers,        'Access-Token': accessToken,      },    };  };}

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.