# Changing the EndPoint and Search Key post authentication

**URL:** <https://discuss.elastic.co/t/changing-the-endpoint-and-search-key-post-authentication/289118>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [November 13, 2021, 3:30pm UTC](https://discuss.elastic.co/t/changing-the-endpoint-and-search-key-post-authentication/289118 "2021-11-13T15:30:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mecadamia.nut](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mecadamia.nut](https://discuss.elastic.co/u/Mecadamia.nut)\
**Post date:** [November 13, 2021, 3:30pm UTC](https://discuss.elastic.co/t/changing-the-endpoint-and-search-key-post-authentication/289118/1 "2021-11-13T15:30:00Z")

</div>

Hi, we are using Proxy for the appSearch and wondering, how to change the endPoint and searchKey once the user is authenticated. I'm using useEffect and dynamically changing the endPoint and searchKey if the user is authenticated. But the appSearch keeps taking only the endpoint and searchKey with the initialized ones.

Here is my code.

```auto
const [accessToken, setAccessToken] = useState([])
const connector = new AppSearchAPIConnector({
    searchKey: accessToken != 'undefined'&&accessToken.length>0 ? `Bearer ${accessToken}` : `${search_key}`,
    engineName,
    endpointBase: public_url });

const [config,setConfig] = useState({
    apiConnector: connector,
    autocompleteQuery: {.....
})

  useEffect(() => {
....
              const secureConnector = new AppSearchAPIConnector({
                searchKey: `Bearer ${accessTokenFromServer}`,
                engineName,
                endpointBase: auth_url
              });  
              setConfig({...config,apiConnector: secureConnector})

```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [November 15, 2021, 3:37pm UTC](https://discuss.elastic.co/t/changing-the-endpoint-and-search-key-post-authentication/289118/2 "2021-11-15T15:37:43Z")

</div>

Everything will need to be completely re-initialized.

A practical way to do this in React is to force your component tree to remount from as high in your component tree as possible.

For instance, if all of the code you posted is contained in an "App" component, you could use a "key" prop to force it to re-mount every time that "accessToken" changes.

```auto
<App key={accessToken} accessToken={accessToken} />

```

Reference: [Forcing state reset on a React component by using the key prop | by Alberto Gasparin | Medium](https://medium.com/@albertogasparin/forcing-state-reset-on-a-react-component-by-using-the-key-prop-14b36cd7448e)

---

<div class="post-metadata">

**Author:** ![Mecadamia.nut](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mecadamia.nut](https://discuss.elastic.co/u/Mecadamia.nut)\
**Post date:** [November 17, 2021, 9:01pm UTC](https://discuss.elastic.co/t/changing-the-endpoint-and-search-key-post-authentication/289118/3 "2021-11-17T21:01:12Z")

</div>

Thanks Jason. I did like you said, i've added the key to 'SearchProvider' as below

```auto
const [access_Token, setAccessToken] = useState('')
<SearchProvider config={config} key={access_Token} accessToken={access_Token}>

```

i still see it is using the old values even though i could see the key got updated in the components section. anyway to clear the cache it might be using?

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [November 18, 2021, 2:00pm UTC](https://discuss.elastic.co/t/changing-the-endpoint-and-search-key-post-authentication/289118/4 "2021-11-18T14:00:14Z")

</div>

Try wrapping the SearchProvider in another component, and use the key on the wrapper.

---

<div class="post-metadata">

**Author:** ![Mecadamia.nut](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mecadamia.nut](https://discuss.elastic.co/u/Mecadamia.nut)\
**Post date:** [November 18, 2021, 8:44pm UTC](https://discuss.elastic.co/t/changing-the-endpoint-and-search-key-post-authentication/289118/5 "2021-11-18T20:44:55Z")

</div>

Thanks Jason. I've created the wrapper and still didn't work. I found out that the order of updating was incorrect and hence it is not being reflected. i've changed the order in the useEffect and now it is working correctly as expected. Thanks a lot for your help.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 16, 2021, 8:45pm UTC](https://discuss.elastic.co/t/changing-the-endpoint-and-search-key-post-authentication/289118/6 "2021-12-16T20:45:03Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.