Slack integration and posting chat messages using OAuth2 in Node.js

OAuth 2.0 is a protocol that lets your app request authorization to access private details in a user’s Slack account without getting their password.

Typically OAuth 2.0’s most commonly used flow is divided into three main steps:

1. Application pop up a new window for the 3rd party authorization app asking the user (who must have an account and be logged in on the system) to grant permission for your application and then be able to take actions on his/her behalf.
2. Once properly authenticated and authorized, the third-party app acknowledges the permission and redirects the user to your app via a pre-configured URL.
3. Your application exposes an endpoint for such callback operations. It hits the third-party provider API to ask for an access token based on the response code returned by the previous redirect process.

Environment setup

For this article, I will be using Node.js and npm as the default package manager. Here I will create two different applications one for the client(in React) and another for the server capabilities.

Slack App config

Here we use the Slack OAuth2 API which allows you to create an application under your account and provides you with some OAuth2 client credentials to use in other applications.

This way, you can easily allow users of your application to log in via their Slack accounts.

So, let’s create a new application by clicking this link. Make sure to fill in all the fields with the app name and workspace to develop your app in.

Then go to the basic information section. You will find the app credentials with the client ID and client secret. Next, go to the OAuth & Permissions and add the redirect URLs. The authorization callback URL is the most important field because it demarcates where Slack should redirect the user once the authorization process is finished.

Here you can enter any URL you prefer as shown in the image below.

And then you need to add the scopes to indicate what your app can access.

Here in the bot token scopes, I have added the below permissions as shown below.

channels:history -View messages and other content in public channels that App has been added to

channels:manage -Manage public channels that App has been added to and create new ones

chat:write -Send messages as TestApp

groups:write -Manage private channels that App has been added to and create new ones

im:write -Start direct messages with people

mpim:write -Start group direct messages with people

The server project

Let’s get back to project creation. Pick up a folder of your choice and run the following command:

mkdir oauth2-node-server
cd oauth2-node-server
npm init

Again, leave all the options as they’re presented to you until the end. Then, run the following command to install the required NPM dependencies:

npm install axios express cors

Axios will be used to make HTTP request calls to the Slack OAuth2 servers. Express will be our version of the server, and cors is just used to avoid conflicts with the browser’s Same-Origin policies.

The code for the server is very simple and can be found in the following code. Make sure to add it to a file named index.js:

Here from the /oauth/redirect endpoint you will get a valid access token and then we may redirect the response and all of its content to the React client application listening to port 3000.

Before heading to the next section, make sure everything’s working fine by running the following command:

node index.js

which may, in turn, produce the output shown below:

➜ Listening at port 8080

The client project

Leave the current server folder and run the following command to create the client project:

npx create-react-app oauth2-node-app

Then, run the following command to add the required Node dependencies:

npm install axios

Then substitute your App.js file content with the following:

Testing

To test the client implementation, you may run the following command in the client’s root folder:

npm start

Look for errors in the logs and wait until React loads the application on your web browser.

You may see the following screen with the Sign in button. Before clicking it, make sure to have both the server app and the proxy up.

After clicking the Sign in button, you’ll be redirected to the Slack authorization page, as shown in the image below.

Click on the Authorize button, and Slack will also take care of the redirecting process after it’s finished and you will get an access token to access slack APIs. So this access token is known as a bearer token and we can use this token to call API methods for channel creation and post messages to the channel using the below APIs which you can see in the server project of the above code.

1 . conversations.create API to create a channel

2 . chat.postMessageAPI to post chat messages.

Thank you for reading!