Third-party API calls

Your next-generation Slack app gives you the ability to consolidate and direct information in all sorts of ways. That includes information that comes from, or goes to, external sources.

In this guide, we'll integrate a call to a third-party API into a function. By doing so, your app can make API calls to a third-party service whenever a trigger invokes the workflow that the function is in.

Ready to go? Read on!

1. Acquire third-party API credentials

First things first: you'll need the proper API credentials to make the proper API calls. These credentials are the same ones you would use to make standalone calls to that API.

For example, look at the GitHub API. To make certain calls to their API, you need to be an authenticated user. You would go to the "Personal access tokens" page within your GitHub settings to generate a new token. This token is what you would use to prove you're who you say you are.

2. Store API credentials as local environment variables

In general, it's not the best security practice to put your credentials right within your app. It also wouldn't be helpful for other users. The solution to both these conundrums is to use environment variables within your app.

When running an app locally, your Slack app will read in environment variables if they're placed in a .env file at the root of your project.

Your created .env file should be written in the following way:

github_name = slackbotsbestpal
github_token = ABC123DEF

Be careful where you're storing your project files! You don't want just anyone to have access to the credentials within your .env file.

3. Create a custom function with environment variables

Within your function, you call environment variables with the env function context property:

const token = env["github_token"];

You can make API calls the same way you would in any other TypeScript environment. Below is an example of a TypeScript file containing a function that fetches the repositories for an authenticated user using the GitHub API's /user/repos endpoint.

export default SlackFunction(
  MyFunctionDefinition,
  async ({ inputs, env }) => { // Add this

  const headers = {
    Authorization: 'Bearer ' + env.GITHUB_TOKEN,
    'Content-Type': 'application/json'
  }

  try {

  const endpoint = `https://api.github.com/users/repos`

  const repos = await fetch(endpoint, {
    method: 'GET',
    headers
  })
    .then((response : any) => {

      // do cool stuff with your repo info

    }).catch((error) => {
      console.log('Error verifying collaborator:\n', error)
      return false
    })

  } catch (err : any) {
    console.log('There was an issue', err)
  }
    
    return { outputs: {} };
  },
);

Remember, your function needs to be part of a workflow, and then invoked by a trigger, for your Slack app to work!

4. Run your app locally with environment variables

When you have finished building your app, test it out by running it locally:

slack run

When running locally, your app will use the environment variables stored within your .env file.

5. Deploy your app with environment variables

The real power of Run On Slack app environment variables is seen when you deploy your app to a workspace. Use the env Slack CLI helper to have environment variables interact with your app, independent of any local files.

When you are ready, deploy your application:

slack deploy

With your app deployed, add your environment variable with the slack env add command:

slack env add github_token ABC123DEF

Note: if your token contains non-alphanumeric characters, wrap it in double quotes like this:

slack env add github_token "ABC123DEF"

Environment variables added via the slack env add command can be accessed via the env CLI helper. With the helper you can update and even remove them!