# Hiding an API Token in a theme component

**URL:** https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166
**Category:** Support
**Created:** [September 5, 2022, 3:37pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166 "2022-09-05T15:37:26Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![attj](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@attj](https://meta.discourse.org/u/attj)
#### Post date: [September 5, 2022, 3:37pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/1 "2022-09-05T15:37:26Z")

</div>

I have a theme component where it sends a request to an external API to fetch some data during a page load. However, the Bearer token I use to fetch this data is naturally loaded in the script that the client has access to. Is there a way to create a plugin or something that will enable me to hide this information?

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [September 5, 2022, 3:47pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/2 "2022-09-05T15:47:33Z")

</div>

Yes, you should indeed create a plugin, and define a controller method that fetches the data for you.

Then, from the frontend code, call the controller method, which injects the bearer token server side, inaccessible for any third party, and makes the call to the external API.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 5, 2022, 4:18pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/3 "2022-09-05T16:18:46Z")

</div>

> [@RGJ](#):
>
> you should indeed create a plugin, and define a controller method that fetches the data for you.

Rather than creating a new controller to do it (which isn’t clearly what Richard recommended) you can fairly easily add it to an existing serializer, something like

```plaintext
  add_to_serializer(:current_user, :my_stuff) do
    stuff = get_my_stuff_somehow
    stuff
  end

```

FIguring out what serializers are available and which one you want is hopefully simple enough (most are pretty easy to guess, but you can find them in `app/serializers`); searching [GitHub - discourse/all-the-plugins · GitHub](https://github.com/discourse/all-the-plugins) for `add_to_serializer` should provide plenty of examples. And start with [GitHub - discourse/discourse-plugin-skeleton: Template for Discourse plugins · GitHub](https://github.com/discourse/discourse-plugin-skeleton).

Even if you don’t know Ruby or Rails, the above should give you a pretty good idea what you need to do. If not, you can ask in #Marketplace with a budget.

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [September 5, 2022, 4:53pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/4 "2022-09-05T16:53:12Z")

</div>

I think it’s a very bad idea to hook an external dependency into a serializer @pfaffman  
If the external service goes down or is slow, then your forum will be down as well.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 5, 2022, 5:06pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/5 "2022-09-05T17:06:27Z")

</div>

Oh. Well, darn. That does sound true. 🤷

@attj , this is one of many matters in which I trust what Richard says more than what I say.

I’m afraid you’ll need to do the work to add a route and such, which is quite a few more lines of code ( probably only dozens). I think that [Discourse Category Home 🏠](https://meta.discourse.org/t/discourse-category-home/214227) is one that adds a route.

---

<div class="post-metadata">

### Author: ![attj](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@attj](https://meta.discourse.org/u/attj)
#### Post date: [September 5, 2022, 7:54pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/6 "2022-09-05T19:54:23Z")

</div>

I guess I managed to write a plugin but I need to put it to github in order to include it in my app.yml. Which naturally exposes the token as well. Is there a way to get around this?

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [September 5, 2022, 7:58pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/7 "2022-09-05T19:58:58Z")

</div>

Just read the token from a site setting and input it there after installation.

---

<div class="post-metadata">

### Author: ![attj](https://avatars.discourse-cdn.com/v4/letter/a/a698b9/32.png) [@attj](https://meta.discourse.org/u/attj)
#### Post date: [September 5, 2022, 8:00pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/8 "2022-09-05T20:00:24Z")

</div>

Makes a lot of sense. Thanks!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [October 5, 2022, 8:01pm UTC](https://meta.discourse.org/t/hiding-an-api-token-in-a-theme-component/238166/9 "2022-10-05T20:01:03Z")

</div>

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