> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial | Call APIs with Secrets

## Article: Tutorial | Call APIs with Secrets

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/integrations/tutorial-call-apis-with-secrets.md

## Article Content:

# Tutorial | Call APIs with Secrets

In this tutorial, you'll learn how to securely use an external API key stored in the [Secrets Manager](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/secrets/about-the-secrets-manager.md) to call the [OpenWeatherMap API](https://openweathermap.org/api). By keeping API keys safe and confidential with the Secrets Manager, you can make secure API requests without exposing sensitive information in your code.

At the end of this tutorial, you'll have a working [web method](https://dev.wix.com/docs/sdk/core-modules/web-methods/introduction.md) that securely retrieves weather data for any city, using a stored API key.

We'll use the following steps to build this functionality:

1. Set up your API key in the Secrets Manager.
2. Create a web method to retrieve the API key and call the OpenWeatherMap API.

## Before you begin

It's important to note the following before doing this tutorial:

- You'll need an OpenWeatherMap API key. You can get one by signing up for a free account at [OpenWeatherMap](https://openweathermap.org/api).

> The code in this article was written using the following module versions:
>
> - @wix/web-methods (v1.0.0)
> - @wix/secrets (v1.0.0)
> - @wix/essentials (v1.0.0)
>
> Learn how to install npm packages [in the editor](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-in-the-editor.md) or [using the CLI](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-with-the-cli.md).

## Step 1 | Set up your API key in the Secrets Manager

This step stores your OpenWeatherMap API key securely in the Secrets Manager.
At the end of this step, your API key will be safely stored and ready to use in your code.

To set up your API key:

1. Access the Secrets Manager using one of these methods:

   - In the editor, navigate to **Developer Tools** in the Code sidebar. Under the Security section, select **Secrets Manager**.
   - In the dashboard, select **Developer Tools**, and then select **Secrets Manager**.

2. Add and save the API key for the OpenWeatherMap API. For purposes of this tutorial, name this key "WeatherApiKey".

## Step 2 | Create a web method to retrieve weather data

This step creates a backend web method that retrieves your API key from the Secrets Manager and uses it to call the OpenWeatherMap API.
At the end of this step, you'll have a working function that can fetch weather data for any city.

To create the web method:

1. Create a new file called `serviceModule.web.js` in the site's backend folder.

2. Add the import statements at the top of the file:

   ```javascript
   import { Permissions, webMethod } from "@wix/web-methods";
   import { secrets } from "@wix/secrets";
   import { auth } from "@wix/essentials";
   ```

3. Create an [elevated](https://dev.wix.com/docs/sdk/articles/work-with-the-sdk/about-elevated-permissions.md) function to access site secrets with proper permissions:

   ```javascript
   const elevatedGetSecretValue = auth.elevate(secrets.getSecretValue);
   ```

4. Create a web method function that accepts a `city` parameter and retrieves the API key you stored in a site secret:

   ```javascript
   export const getCurrentTemp = webMethod(Permissions.Anyone, async (city) => {
     const { value } = await elevatedGetSecretValue("WeatherApiKey");

     // Continue with the API call code in the next steps
   });
   ```

5. Continue the function by constructing the full URL for the fetch request:

   ```javascript
   const url = "https://api.openweathermap.org/data/2.5/weather?q=";
   const fullUrl = url + city + "&APPID=" + value;
   ```

6. Finish the function by making the API call and returning the temperature data:

   ```javascript
   return fetch(fullUrl)
     .then((response) => response.json())
     .then((json) => json.main.temp);
   ```

You've now successfully created a secure weather API integration using the Wix JavaScript SDK and the Secrets Manager.

You can extend this example to retrieve additional weather data or integrate it into your site's user interface.

<blockquote class="tip">

**Tip:**
You can test backend code in the editor without developing a frontend using Wix's [functional testing](https://dev.wix.com/docs/develop-websites-sdk/test-your-site/test-backend-functions/about-functional-testing.md) feature.

</blockquote>

## Complete code example

Here's the complete code for your `serviceModule.web.js` file:

```javascript
// serviceModule.web.js

import { Permissions, webMethod } from "@wix/web-methods";
import { secrets } from "@wix/secrets";
import { auth } from "@wix/essentials";

const elevatedGetSecretValue = auth.elevate(secrets.getSecretValue);

export const getCurrentTemp = webMethod(Permissions.Anyone, async (city) => {
  const { value } = await elevatedGetSecretValue("WeatherApiKey");

  const url = "https://api.openweathermap.org/data/2.5/weather?q=";
  const fullUrl = url + city + "&APPID=" + value;

  return fetch(fullUrl)
    .then((response) => response.json())
    .then((json) => json.main.temp);
});
```

## See also

- [Web Methods API](https://dev.wix.com/docs/sdk/core-modules/web-methods/introduction.md)
- [Elevated Permissions](https://dev.wix.com/docs/sdk/articles/work-with-the-sdk/about-elevated-permissions.md)
- [Secrets API](https://dev.wix.com/docs/api-reference/business-management/secrets/introduction?apiView=SDK.md)