slack_oauth_invalid_state error using ExpressReceiver with Bolt

[AlexIsMaking]

I'm trying to set up OAuth login and I get a slack_oauth_invalid_state error after clicking Allow to approve the app.

Reproducible in:

The Slack SDK version

"slack/bolt": "^3.13.1",
"slack/socket-mode": "^1.3.2",
"slack/web-api": "^6.8.1",

Node.js runtime version

v20.2.0

OS info

ProductName: macOS
ProductVersion: 13.4
BuildVersion: 22F66
Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000

Steps to reproduce:

I'm using Firebase so the directory structure is a little bit complicated.

app.js

const functions = require('firebase-functions');
const { App, ExpressReceiver, LogLevel } = require('@slack/bolt');
const { registerListeners } = require('./listeners');
const { saveInstallation } = require('./services/slack-oauth-service');

if (!functions.config().slack.signing_secret) {
  throw new Error('Slack signing secret is missing');
}
if (!functions.config().slack.client_id) {
  throw new Error('Slack client ID is missing');
}
if (!functions.config().slack.client_secret) {
  throw new Error('Slack client secret is missing');
}

const receiver = new ExpressReceiver({
  signingSecret: functions.config().slack.signing_secret,
  clientId: functions.config().slack.client_id,
  clientSecret: functions.config().slack.client_secret,
  stateSecret: 'my-secret',
  scopes: ['chat:write', 'commands', 'workflow.steps:execute'],
  installerOptions: {
    directInstall: true,
  },
  installationStore: {
    storeInstallation: async (installation, state) => {
      // eslint-disable-next-line no-console
      console.log('installation: ');
      // eslint-disable-next-line no-console
      console.log(installation);
      // eslint-disable-next-line no-console
      console.log('state: ', state);
      if (installation.team !== undefined) {
        return saveInstallation(installation, state);
      }
      throw new Error('Failed saving installation data to installationStore');
    },
  },
});

const app = new App({
  receiver,
  logLevel: LogLevel.DEBUG,
});

registerListeners(app);

module.exports = app; // export the app to handle incoming requests

index.js

const functions = require('firebase-functions');
const app = require('./app');

exports.slackApp = functions.https.onRequest(app.receiver.app);

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/slack/**",
        "function": "slackApp"
      }
    ]
  },
  ...
}

Expected result:

The OAuth process should be completed successfully.

Actual result:

Oops, Something Went Wrong!
Please try again or contact the app owner (reason: slack_oauth_invalid_state)

I'm not 100% where to look but can't see a cookie containing a state that matches the state from the url in the application's cookies for my Slack workspace URL.

The POST request to https://anotioneer.slack.com/nullclog/track/ is getting a 301 response.

The GET request to https://anotioneer.slack.com/nullclog/track is getting a 404 response.

[filmaj]

Hey @AlexIsMaking , we don't support Firebase as a runtime that we have experience with or provide examples for so I can't help you much here.

However, do take a look at issues filed from others in the community who also had trouble, and resolved, their firebase hosting issues:

• Installation flow fails with slack_oauth_invalid_state when running an app on Firebase Hosting #1730
• slack_oauth_invalid_state for any new installations #1412

[AlexIsMaking]

@filmaj thanks for the link, @multimanic's solution worked for me

It is possible to use Firebase Cloud Functions with Firebase Hosting with distributed apps (using Bolt JS's /slack/install). If you get the error slack_oauth_invalid_state it's because Firebase Hosting together with Cloud Functions or Cloud Run, cookies are generally stripped from incoming requests - except a cookie called __session. The solution is to make use of the parameter stateCookieName the framework provides which allows you to rename the cookie from the default slack-app-oauth-state to __session.

[filmaj]

Nice! Glad that worked out. I will close this issue, then 😄