Reactivesearch: ReactiveBase headers encodeURI on Authorization Basic

[jianglin101]

Issue Type:
bug

Platform:
ReactiveSearch for Web

Description:
https://github.com/appbaseio/appbase-js/commit/54d796bb1f6b8e69bfe14304af64973bf38e08e5#diff-1fdf421c05c1140f6d71444ea2b27638
appbase-js added shouldEncode default true for headers, which encodes

<ReactiveBase
      app="some-app"
      url="some-url"
      type="_doc"
      headers={{ Authorization: `Basic xxxxxxxx` }}
 >

then request headers become
authorization: Basic%20xxxxxxxx

Is there a way to set not to encode headers from ReactiveBase?

[JoeDevGeeeee]

Having the same problem. Anyone found a solution yet?

[arcxyz]

Same problem here using the Vue components.

[siddharthlatest]

If you are trying to use Basic Authentication, you can use the credentials prop of ReactiveBase, which accepts a username:password format (i.e. not base64 encoded).

[arcxyz]

As a temporary solution for my use case (elasticsearch proxy with express+jwt) I'm going to decode the header on server before extracting the token from request

[jianglin101]

solution by @siddharthlatest works. ReactiveBase documentation: 'If you are not using an appbase.io app, credentials may not be necessary'. So basically, prop credentials can be used for appbase.io app AND non-appbase Basic Authentication, prop headers is default encoded in appbase-js v4 beta

[bietkul]

It is best to use transformRequest prop to set the headers which you don't want to encode.

For example:

<ReactiveBase
    transformRequest={
        request => ({
            ...request,
            headers: {
                ...request.headers,
                                 // Reactivesearch will not encode this header
                my-header: 'Basic xxxxxxxx',
            },
        })
    }
>
</ReactiveBse>

[siddharthlatest]

Further update: Since ReactiveSearch v3.2.2, we no longer encode headers passed in the headers prop. If a user requires to encode the headers, we expect that they would do this on their end or utilize transformRequest prop for complete control