From 3988e45bda15b463d61c831cadc255d9d84771a2 Mon Sep 17 00:00:00 2001
From: Ryan Berry <59584307+ryanb-jobber@users.noreply.github.com>
Date: Sun, 8 Aug 2021 18:17:04 -0600
Subject: [PATCH] Add header support when using custom request url (#734)

* Add support for headers on the request
---
 GooglePlacesAutocomplete.d.ts |  1 +
 GooglePlacesAutocomplete.js   | 18 ++++++++++++++++++
 README.md                     |  7 ++++++-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/GooglePlacesAutocomplete.d.ts b/GooglePlacesAutocomplete.d.ts
index ec8bb8a..1fbd5f9 100644
--- a/GooglePlacesAutocomplete.d.ts
+++ b/GooglePlacesAutocomplete.d.ts
@@ -363,6 +363,7 @@ interface Place {
 interface RequestUrl {
   url: string;
   useOnPlatform: 'web' | 'all';
+  headers?: Record<string, string>;
 }
 
 interface GooglePlacesAutocompleteProps {
diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js
index 73d5a8a..e1bed09 100644
--- a/GooglePlacesAutocomplete.js
+++ b/GooglePlacesAutocomplete.js
@@ -123,6 +123,20 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     }
   };
 
+  const getRequestHeaders = (requestUrl) => {
+    if (requestUrl) {
+      return requestUrl.headers;
+    } else {
+      return {};
+    }
+  };
+
+  const setRequestHeaders = (request, headers) => {
+    Object.keys(headers).map((headerKey) =>
+      request.setRequestHeader(headerKey, headers[headerKey]),
+    );
+  };
+
   const [stateText, setStateText] = useState('');
   const [dataSource, setDataSource] = useState(buildRowsFromResults([]));
   const [listViewDisplayed, setListViewDisplayed] = useState(
@@ -299,6 +313,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
       );
 
       request.withCredentials = requestShouldUseWithCredentials();
+      setRequestHeaders(request, getRequestHeaders(props.requestUrl));
 
       request.send();
     } else if (rowData.isCurrentLocation === true) {
@@ -458,6 +473,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
       request.open('GET', requestUrl);
 
       request.withCredentials = requestShouldUseWithCredentials();
+      setRequestHeaders(request, getRequestHeaders(props.requestUrl));
 
       request.send();
     } else {
@@ -521,6 +537,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
       );
 
       request.withCredentials = requestShouldUseWithCredentials();
+      setRequestHeaders(request, getRequestHeaders(props.requestUrl));
 
       request.send();
     } else {
@@ -876,6 +893,7 @@ GooglePlacesAutocomplete.propTypes = {
   requestUrl: PropTypes.shape({
     url: PropTypes.string,
     useOnPlatform: PropTypes.oneOf(['web', 'all']),
+    headers: PropTypes.objectOf(PropTypes.string),
   }),
   styles: PropTypes.object,
   suppressDefaultStyles: PropTypes.bool,
diff --git a/README.md b/README.md
index 3cd3397..fb32143 100644
--- a/README.md
+++ b/README.md
@@ -404,12 +404,14 @@ export default GooglePlacesInput;
 
 Web support can be enabled via the `requestUrl` prop, by passing in a URL that you can use to proxy your requests. CORS implemented by the Google Places API prevent using this library directly on the web. You will need to use a proxy server. Please be mindful of this limitation when opening an issue.
 
-The `requestUrl` prop takes an object with two properties: `useOnPlatform` and `url`.
+The `requestUrl` prop takes an object with two required properties: `useOnPlatform` and `url`, and an optional `headers` property.
 
 The `url` property is used to set the url that requests will be made to. If you are using the regular google maps API, you need to make sure you are ultimately hitting https://maps.googleapis.com/maps/api.
 
 `useOnPlatform` configures when the proxy url is used. It can be set to either `web`- will be used only when the device platform is detected as web (but not iOS or Android, or `all` - will always be used.
 
+You can optionally specify headers to apply to your request in the `headers` object. 
+
 ### Example:
 
 ```js
@@ -432,6 +434,9 @@ const GooglePlacesInput = () => {
         useOnPlatform: 'web', // or "all"
         url:
           'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api', // or any proxy server that hits https://maps.googleapis.com/maps/api
+        headers: {
+          Authorization: `an auth token` // if required for your proxy
+        }
       }}
     />
   );