How do you use authMiddleware?

[sibelius]

I want to set the auth token after login/register process using the token received

is it possible? do u have an example?

[nodkz]

Just provide auth middleware to network layer with a token thunk. This function will be called every time, when Relay makes request. You may store your token in global var, localStorage. In my project I use https://www.npmjs.com/package/store

Relay.injectNetworkLayer(new RelayNetworkLayer([
  authMiddleware({
    token: () => window.MyGlobalVarWithToken, // store.get('jwt'), 
  }),
]));

[sibelius]

thanks, I will use AsyncStorage.

calling it every time is not a problem?

[nodkz]

I don't sure that token: async () => await storage('token'), will work at all.
But if does, then you'll get delays before relay send queries to server.

So if possible, try to put token in some variable with sync access.

BTW don't forget about tokenRefreshPromise option in authMiddleware. This promise will be called only if your server returns 401 response. After resolving of token, it implicitly make re-request.

At the end, you may write your own middleware for working with your token logic. As example you may see this simple MW: https://github.com/nodkz/react-relay-network-layer/blob/master/src/middleware/perf.js
You may change req.headers = {} before call next(req).

[sibelius]

thanks for all the help, I will try to write a middleware

[nodkz]

Few minutes ago I publish new version, where was added allowEmptyToken options to authMiddleware. If allowEmptyToken: true, and token is empty, request proceed without Authorization header.

This can help you, if you do requests to graphql server without token and don't want send empty auth header.

[sibelius]

it could be very useful if we could just call a function on authMiddleware to save the token or remove it

[nodkz]

Assumption:
Suppose, such function exists. So you should somehow save reference to this function in some global variable. When you log in, you take this var with function and call it. So I can not imagine this somehow realization should be implemented.

Current realization:
Let this variable save not reference to function which you wish, let it keep token. So just provide this variable to arrow function for token option. When you log in, you just write token to this global var. And with next Relay request it reads token from this global var.

I try keep MW realization as simple, as possible. If I begin store token internally, I should also provide functions for reading and removing token ;).

[sibelius]

I think it is better to use Relay.Environment to reset relay data on login, thanks for all the support

[nodkz]

How I actually use auth middleware:

class ClientApi {
  ...
  getRelayNetworkLayer = () => { 
    return new RelayNetworkLayer([
      authMiddleware({
        token: () => this._token,
        tokenRefreshPromise: () => this._getTokenFromServer(this.url('/auth/jwt/new')),
      }),
  ...
}

refresh token promise has the following view

  _getTokenFromServer = (url, data = {}) => {
    console.log('[AUTH] LOAD NEW CABINET JWT');
    const opts = {
      method: 'POST',
      headers: {
        'Accept': 'application/json', // eslint-disable-line
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    };
    return fetch(url, opts)
      .then(res => {
        if (res.status > 299) { throw new Error(`Wrong response status ${res.status}`); }
        return res;
      })
      .then(res => res.json())
      .then(json => {
        this._token = json.token;
        this._saveTokenToStorage();
        return this._token;
      })
      .catch(err => console.error('[AUTH] ERROR can not load new cabinet jwt', err));
  };

So if new user makes request to server, it responds with 401 header. AuthMW implicitly catchs this header and run _getTokenFromServer. Internally it makes new request to obtain new token from server, and if succeed, store it to localStorage and pass new token to AuthMW. AuthMW makes re-request and seamlessly pass data to Relay.

So app logic does not know anything about authorization.

Our ClientApi also contains following methods loginByOauth
(providerName), loginByEmail(...), logout(). And instance of ClientApi stored in global variable.

Our ClientApi class was written inspired by https://github.com/reindexio/reindex-js/blob/master/src/index.js

[sibelius]

for every 401 it will try to get the token?

how _getTokenFromServer get data parameter?

the problem with this approach is that you do not clean the Relay cache, so if an user logged in, then logout, and another user login, this second user could have access to some left data from the first user