web3wes / oauth-sample

🤖 Slack OAuth Demo 🤖

This project aims to speed up the time to understand & implement multiple OAuth redirects using Slack's Bolt framework.

Screenshare.-.2022-03-20.7_00_55.PM.mp4

Steps

1. App Configuration
2. Install the App
3. Conclusion

Step 1. App Configuration

Create a Slack App

This demo assumes you will be able to host your app either via Ngrok (recommended), Glitch, or another service. You will need to do this set your OAuth redirect URLs as shown in the screenshot below.

With Ngrok, to start your app, first use the ngrok http 3000 command to start ngrok. From there, copy and paste your forwarding address into your manifest file as shown in the screenshots below. Make sure to start the node app with Node app.js as well, so that all requests can be fowarded to Ngrok from your app.

1. Open https://api.slack.com/apps/new and choose "From an app manifest"
2. Choose the workspace you want to install the application to
3. Copy the contents of manifest.json into the text box that says *Paste your manifest code here* (within the JSON tab) and click Next. Make sure to change the URLs on the manifest.json in three specific places, as shown in the screenshot below.

4. Review the configuration and click Create
5. Click Install to Workspace and Allow on the screen that follows. You'll then be redirected to the App Configuration dashboard.
6. Click on Manage Distribution and then make sure all boxes have green check marks. Select Remove Hard Coded Information, check the box and then Activate Public Distribution.

Environment Variables

Before you can run the app, you'll need to store some environment variables.

1. Copy .env.sample to .env
2. Click Basic Information from the left hand menu. There, in the App Credentials you should see your SLACK_CLIENT_ID, SLACK_CLIENT_SECRET, and SLACK_SIGNING_SECRET. Click on Show and copy and paste those values into your .env file.
3. This app uses (the free version of) MongoDB. You'll need to provide your MongoDB username, password, and database name in the .env file: DB_USERNAME, DB_PASSWORD, and DB_NAME. You can feel free to leave the DB_NAME as slack_connect_test.

Below, you can see a screenshot of my database configuration. The DB_NAME is slack_connect_test and the collection is named users.

Don't forget to save your .env and then run source .env to set your env variables.

Install Dependencies

npm install

Run Bolt Server

npm start

Great job! You're now ready to install the app using Slack's OAuth process.

Step 2. Install the App

Watch the video below (sound on) to understand how to install the app. Note that the video is showing the install path from a Ngrok URL. The base URL will always we different, based on if you are using Ngrok or Glitch, and depending on what your app is named on Glitch / what forwarding address is used in Ngrok.

installAppWorkspace.mov

Next, navigate to your install endpoint. Since we are using Bolt, this endpoint is automatically created for us from the Bolt package.

1. If you are using Glitch (and assuming your app is hosted at https://bolt-template-slack-connect.glitch.me), you can navigate to https://bolt-template-slack-connect.glitch.me/slack/install If you are using Ngrok, it should look something like https://3cb89939.ngrok.io/slack/install
2. Click on the Add to Slack button.
3. Pick a workspace to install the app to from the top-right corner.
4. Click on the green Allow button.
5. You will be redirected to the Redirect URL. Click on "Open Slack".
6. Once you click on "Open Slack" your browser, you will be taken to the messages tab of your new Slack Connect Admin app! 🎉