Switch to using basic auth for configuration

Author: seanstory

example-apps/internal-knowledge-search/app-ui/.env

@@ -1,3 +1,4 @@
 REACT_APP_SEARCH_APP_NAME=changeme
-REACT_APP_SEARCH_APP_API_KEY=changeme
-REACT_APP_SEARCH_APP_ENDPOINT=http://localhost:9200
+REACT_APP_SEARCH_APP_ENDPOINT=http://localhost:9200
+REACT_APP_SEARCH_USER=elastic
+REACT_APP_SEARCH_PASSWORD=changeme

example-apps/internal-knowledge-search/app-ui/src/components/SearchApplicationSettings.tsx

@@ -11,14 +11,14 @@ import {json} from "react-router-dom";
 
 const SearchApplicationSettings: React.FC = () => {
     const dispatch = useDispatch();
-    const {appName, apiKey, searchEndpoint, searchPersona} = useSelector((state: RootState) => state.searchApplicationSettings);
+    const {appName, appUser, appPassword, searchEndpoint, searchPersona} = useSelector((state: RootState) => state.searchApplicationSettings);
     const {showToast} = useToast();
 
     const fetchPersonaOptions = async () => {
         try {
             const identitiesIndex = ".search-acl-filter-search-sharepoint" //TODO fix hardcoded
             const identitiesPath = searchEndpoint + "/" + identitiesIndex + "/_search"
-            const response = await fetch(identitiesPath, {headers: {"Authorization": "ApiKey " + apiKey}});
+            const response = await fetch(identitiesPath, {headers: {"Authorization": "Basic " + btoa(appUser + ":" + appPassword)}});
             const jsonData = await response.json();
             const ids = jsonData.hits.hits.map((hit) => hit._id)
             return ids
@@ -49,15 +49,19 @@ const SearchApplicationSettings: React.FC = () => {
     };
 
     const handleSave = () => {
-        dispatch(updateSettings({appName, apiKey, searchEndpoint, searchPersona}));
+        dispatch(updateSettings({appName, appUser, appPassword, searchEndpoint, searchPersona}));
         showToast("Settings saved!", MessageType.Info);
     };
 
-    const updateAppName = (e) => dispatch(updateSettings({appName: e.target.value, apiKey, searchEndpoint, searchPersona}))
-    const updateApiKey = (e) => dispatch(updateSettings({appName, apiKey: e.target.value, searchEndpoint, searchPersona}))
-    const updateSearchEndpoint = (e) => dispatch(updateSettings({appName, apiKey, searchEndpoint: e.target.value, searchPersona}))
+    const updateAppName = (e) => dispatch(updateSettings({appName: e.target.value, appUser, appPassword, searchEndpoint, searchPersona}))
 
-    const updateSearchPersona = (e) => dispatch(updateSettings({appName, apiKey, searchEndpoint, searchPersona: e}))
+    const updateAppUser = (e) => dispatch(updateSettings({appName, appUser: e.target.value, appPassword, searchEndpoint, searchPersona}))
+
+    const updateAppPassword = (e) => dispatch(updateSettings({appName, appUser, appPassword: e.target.value, searchEndpoint, searchPersona}))
+
+    const updateSearchEndpoint = (e) => dispatch(updateSettings({appName, appUser, appPassword, searchEndpoint: e.target.value, searchPersona}))
+
+    const updateSearchPersona = (e) => dispatch(updateSettings({appName, appUser, appPassword, searchEndpoint, searchPersona: e}))
 
     return (
         <div className="container mx-auto p-4 bg-white rounded shadow-md">
@@ -91,17 +95,34 @@ const SearchApplicationSettings: React.FC = () => {
 
             <div className="text-left mb-6 p-4 border rounded bg-gray-50">
                 <label
-                    htmlFor="apiKey"
+                    htmlFor="appUser"
+                    className="block text-sm font-medium mb-1 text-gray-700"
+                >
+                    Application Elasticsearch Username:
+                </label>
+                <p className="text-xs mb-2 text-gray-500">The Elasticsearch username to use to establish a connection with.</p>
+                <input
+                    id="appUser"
+                    type="text"
+                    value={appUser}
+                    onChange={updateAppUser}
+                    className="p-2 w-full border rounded focus:outline-none focus:shadow-outline"
+                />
+            </div>
+
+            <div className="text-left mb-6 p-4 border rounded bg-gray-50">
+                <label
+                    htmlFor="appPassword"
                     className="block text-sm font-medium mb-1 text-gray-700"
                 >
-                    Application API Key:
+                    Application Elasticsearch Password:
                 </label>
-                <p className="text-xs mb-2 text-gray-500">Your application's unique API key used for looking up identities.</p>
+                <p className="text-xs mb-2 text-gray-500">The Elasticsearch password to use to establish a connection with.</p>
                 <input
-                    id="apiKey"
+                    id="appPassword"
                     type="password"
-                    value={apiKey}
-                    onChange={updateApiKey}
+                    value={appPassword}
+                    onChange={updateAppPassword}
                     className="p-2 w-full border rounded focus:outline-none focus:shadow-outline"
                 />
             </div>

example-apps/internal-knowledge-search/app-ui/src/models/SearchApplicationSettingsModel.ts

@@ -2,7 +2,8 @@ import {FilterModel} from "./FilterModel";
 
 export interface SearchApplicationSettingsModel {
     appName: string;
-    apiKey: string;
+    appUser: string;
+    appPassword: string;
     searchEndpoint: string;
 
     searchPersona: string;

example-apps/internal-knowledge-search/app-ui/src/pages/SearchPage.tsx

@@ -37,24 +37,24 @@ export default function SearchPage() {
     //TODO: simplify query state and move it to one place
     const [query, setQuery] = useState<string>("");
 
-    const {appName, apiKey: adminApiKey, searchEndpoint, searchPersona} = useSelector((state: RootState) => state.searchApplicationSettings);
+    const {appName, appUser, appPassword, searchEndpoint, searchPersona} = useSelector((state: RootState) => state.searchApplicationSettings);
     const {sorts} = useSelector((state: RootState) => state.sort);
     const indexFilter = useSelector((state: RootState) => state.filter)["filters"]["Data sources"].values;
 
 
     useEffect(() => {
         const fetchData = async () => await handleSearchSubmit();
         fetchData();
-    }, [indexFilter, sorts, appName, adminApiKey, searchEndpoint]);
+    }, [indexFilter, sorts, appName, appUser, appPassword, searchEndpoint]);
 
     const getOrCreateApiKey = async () => {
         if (searchPersona == "admin"){
-            return adminApiKey
+            return "admin key" //TODO fix hardcoded
         }
         else {
             const identitiesIndex = ".search-acl-filter-search-sharepoint" //TODO fix hardcoded
             const identityPath = searchEndpoint + "/" + identitiesIndex + "/_doc/" + searchPersona
-            const response = await fetch(identityPath, {headers: {"Authorization": "ApiKey " + adminApiKey}});
+            const response = await fetch(identityPath, {headers: {"Authorization": "Basic " + btoa(appUser + ":" + appPassword)}});
             const jsonData = await response.json();
             console.log(jsonData)
             const permissions = jsonData._source.query.template.params.access_control

example-apps/internal-knowledge-search/app-ui/src/store/slices/searchApplicationSettingsSlice.ts

@@ -5,7 +5,8 @@ import {SearchApplicationSettingsModel} from "../../models/SearchApplicationSett
 
 const initialState: SearchApplicationSettingsModel = {
     appName: process.env.REACT_APP_SEARCH_APP_NAME || "some-search-application",
-    apiKey: process.env.REACT_APP_SEARCH_APP_API_KEY || "xxxxxxxxxxxxxxxxxxx",
+    appUser: process.env.REACT_APP_SEARCH_USER || "elastic",
+    appPassword: process.env.REACT_APP_SEARCH_PASSWORD || "changeme",
     searchEndpoint: process.env.REACT_APP_SEARCH_APP_ENDPOINT || "https://some-search-end-point.co",
     searchPersona: "admin"
 };