Missing Blitz sessionMiddleware when trying to use passport-twitch-strategy #394

Kiodok · 2021-11-11T11:37:38Z

What is the problem?

I'd like to include twitch login for my blitz application. I created a Button in the login form with a router.push to the route "/api/auth/twitch".
After that I was able to login through twitch and authorize my app.
I already tried the passport-twitch package, but found out that it is a bit outdated, last update years ago.
So I switched to passport-twitch-strategy, which is just a few months old.

Now I'm stuck at the error shown below.
Thank you in advance for your assistance.

Paste all your error logs here:

11:46:05.239 INFO Starting authentication via twitch... 
Starting authentication via twitch...
11:46:06.040 INFO Processing callback for twitch... 
Processing callback for twitch...
API resolved without sending a response for /api/auth/twitch/callback?code=8cq6pfk4wn26dmjjlt9vvogz75jeol&scope=, this may result in stalled requests.
(node:8084) UnhandledPromiseRejectionWarning: Error: Missing Blitz sessionMiddleware!
    at assert (F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\passport-adapter.js:77:27)
    at F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\passport-adapter.js:142:21
    at F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\middleware.js:109:9
    at new Promise (<anonymous>)
    at withCallbackHandler (F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\middleware.js:106:12)
    at connectHandler (F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\middleware.js:118:16)
    at dispatch (F:\Blitz Projects\streamconnect\node_modules\next\dist\server\middleware.js:90:40)
    at secureProxyMiddleware (F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\middleware.js:123:5)
    at dispatch (F:\Blitz Projects\streamconnect\node_modules\next\dist\server\middleware.js:90:40)
    at F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\middleware.js:111:26
(node:8084) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not 
handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)

Paste all relevant code snippets here:

// app\api\auth\[...auth].ts:

import { passportAuth } from "blitz"
import { Strategy as TwitchStrategy } from "passport-twitch-strategy"
import db from "db"

export default passportAuth(({ ctx, req, res }) => ({
  successRedirectUrl: "/",
  errorRedirectUrl: "/",
  secureProxy: true,
  strategies: [
    {
      strategy: new TwitchStrategy({
        clientID: process.env.NEXT_PUBLIC_TWITCH_CLIENT_ID as string,
        clientSecret: process.env.NEXT_PUBLIC_TWITCH_CLIENT_SECRET as string,
        callbackURL:
          process.env.NEXT_PUBLIC_MODE === "production"
            ? "https://stream-connect.net/api/auth/twitch/callback"
            : "http://localhost:3000/api/auth/twitch/callback",
        scope: "user:read:email"
      },
      async function (_token, _tokenSecret, profile, done) {
        const publicData = {
          profile: profile
        }
        console.log(publicData)
        done(undefined, { publicData })
      }
      ),
    },
  ],
}))

What are detailed steps to reproduce this?

Implemented a Button to your JSX-Code
Add a variable const router = useRouter()
onClick call a function with router.push("/api/auth/twitch")
Add the file [...auth].ts to app\api\auth
Copy paste my Code
Run blitz dev
Click on the button

Run `blitz -v` and paste the output here:

Windows 10 | win32-x64 | Node: v14.18.1

blitz: 0.40.0 (global)
blitz: 0.42.4 (local)

  Package manager: npm
  System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 21.45 GB / 31.95 GB
  Binaries:
    Node: 14.18.1 - F:\Programme\NodeJS\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - F:\Programme\NodeJS\npm.CMD
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.1.1 => 3.1.1
    blitz: 0.42.4 => 0.42.4
    prisma: 2.27.0 => 2.27.0
    react: 18.0.0-alpha-9b76d2d7b-20210719 => 18.0.0-alpha-9b76d2d7b-20210719
    react-dom: 18.0.0-alpha-9b76d2d7b-20210719 => 18.0.0-alpha-9b76d2d7b-20210719
    typescript: ~4.3 => 4.3.5

Please include below any other applicable logs and screenshots that show your problem:

The text was updated successfully, but these errors were encountered:

beerose · 2021-11-11T12:49:04Z

Hi @Kiodok!
I think there are two issues:

Missing Blitz session middleware — yet to investigate.
Failed to load script ... in the browser — are you using <Link> component? If yes, you should use <a> instead. We had a similar issue here: When redirecting to oauth endpoint, a page redirection error popups #221, and it seemed to help.

Kiodok · 2021-11-11T14:07:53Z

Hello @beerose :)
With your advice from the second step, I was able to fix the error shown in the second screenshot from above.
Missing Blitz sessionMiddleware is sadly the same.

Thanks for your help so far 👍

beerose · 2021-11-12T14:07:49Z

hey @Kiodok, I was trying to reproduce it and passport-twitch-strategy seems to work fine, so maybe the problem is somewhere else. Could you share your blitz.config.ts?

Kiodok · 2021-11-12T14:51:23Z

Hey @beerose :D
That sounds great so far, thanks for trying it out.

blitz.config.ts:

import { BlitzConfig, sessionMiddleware, simpleRolesIsAuthorized } from "blitz"

const config: BlitzConfig = {
  middleware: [
    sessionMiddleware({
      cookiePrefix: "streamconnect",
      isAuthorized: simpleRolesIsAuthorized,
    }),
  ],

  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    module.exports = {
      distDir: "build",
    };
    return config
  },
}
module.exports = config

Kiodok · 2021-11-26T14:08:48Z

Hello @beerose :)
Did you find out anything new about the sessionMiddleware error?

Greetings,
Kiodok

beerose · 2021-11-29T14:25:24Z

Hey @Kiodok — could you try using <a> HTML element instead of router.push and see if that works? Something like this:

<a href="api/auth/twitch">
  Login with Twitch
</a>

Kiodok · 2021-11-30T08:13:14Z

Hello @beerose,
Yes, I tried it, but nothing changed.

<a href="/api/auth/twitch">
  <SignUpInButton color="deepPurple">Twitch</SignUpInButton>
</a>

beerose · 2021-11-30T12:31:13Z

Ok, I tried it again, and this time I used your blitz.config.ts. You overode the config (with the second module.exports and there was no session config. You'll have to set distDir in the first object:

import { BlitzConfig, sessionMiddleware, simpleRolesIsAuthorized } from "blitz"

const config: BlitzConfig = {
  middleware: [
    sessionMiddleware({
      cookiePrefix: "streamconnect",
      isAuthorized: simpleRolesIsAuthorized,
    }),
  ],
  distDir: "build",

  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    return config
  },
}
module.exports = config

Kiodok · 2021-11-30T13:04:10Z

Thanks @beerose, that really helped and did the trick so far.
Now I get some profile information like ID and name from my twitch account.
But after that I got a new error:

14:02:51.173 INFO Starting authentication via twitch...
Starting authentication via twitch...
14:02:51.978 INFO Processing callback for twitch...
Processing callback for twitch...
API resolved without sending a response for /api/auth/twitch/callback?code=mmgfj5cfosnxxeod8x2b3rq7no57ma&scope=, this may result in stalled requests.
{ userId: '79175660', userName: 'kiodok' }
Error: Cannot find module 'F:\Blitz Projects\streamconnect.next\serverless\blitz-db.js'
Require stack:

F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\auth-sessions.js
F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\index.js
F:\Blitz Projects\streamconnect\node_modules\next\stdlib-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.mod._resolveFilename (F:\Blitz Projects\streamconnect\node_modules\next\dist\build\webpack\require-hook.js:96:28)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at getDb (F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\auth-sessions.js:96:27)
at Object.getSession (F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\auth-sessions.js:107:27)
at F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\auth-sessions.js:697:60
at Generator.next ()
at asyncGeneratorStep (F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\auth-sessions.js:21:28) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\auth-sessions.js',
'F:\Blitz Projects\streamconnect\node_modules\next\dist\stdlib-server\index.js',
'F:\Blitz Projects\streamconnect\node_modules\next\stdlib-server.js'
]
}

I already searched for the module serverless\blitz-db.js, but couldn't find anything.

beerose · 2021-12-08T15:12:12Z

Sorry about the late reply. The code that looks for blitz-db.js is here: https://github.com/blitz-js/blitz/blob/canary/nextjs/packages/next/stdlib-server/auth-sessions.ts#L66, but I'm not yet sure why it's causing issues. It should look under server/blitz-db.js but it turns out to be empty. Maybe you could put some console logs in node_modules to debug this? I'll try to reproduce it too.

Kiodok · 2021-12-08T16:48:12Z

@beerose No problem.
I think the problem is, that my .next folder is missing. In the past it was generated with blitz build, but that doesn't happen anymore. It can't find the file within F:\Blitz Projects\streamconnect.next\serverless\blitz-db.js without the folder at all.
The question is now, how to generate the .next folder :D

beerose · 2021-12-08T17:36:37Z

Hmm, that should be generated out of the box when you run blitz dev or blitz build. Could you try reinstalling deps and running one of those commands again? Or do you remember when it stopped being generated?

Kiodok · 2021-12-08T22:42:42Z

@beerose I reinstalled everything and ran both commands - same error.
I'm not sure when it stopped being generated, but I think it was when I changed the distDir in blitz.config.ts.
But it's still the version you commented a few days ago.

import { BlitzConfig, sessionMiddleware, simpleRolesIsAuthorized } from "blitz"

const config: BlitzConfig = {
  middleware: [
    sessionMiddleware({
      cookiePrefix: "streamconnect",
      isAuthorized: simpleRolesIsAuthorized,
    }),
  ],
  distDir: "build",

  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    return config
  },
}
module.exports = config

beerose · 2021-12-09T12:19:34Z

Ah okay. So since you have build instead of .next and it looks for .next, it can't find anything. The issue is that this code: https://github.com/blitz-js/blitz/blob/canary/nextjs/packages/next/stdlib-server/auth-sessions.ts#L66, doesn't respect custom distDir. I suppose if you remove distDir (so you'll have .next back), it will work.

Kiodok · 2021-12-10T00:35:56Z

@beerose I removed the distDir and now I get the following error:

API resolved without sending a response for /api/auth/twitch/callback?code=vtxuqhnsgtbb153vabw99t1765xtms&scope=user%3Aread%3Aemail, this may result in stalled requests.
{
userId: '79175660',
userName: 'kiodok',
userEmail: 'kaka22-kiodok@web.de'
}
PrismaClientValidationError:
Invalid prisma.session.create() invocation:

{
data: {
expiresAt: new Date('2022-01-09T00:31:55.889Z'),
handle: 'YUCejVvO0m25zlVWga84PjhvAXT-Xl1M:ots',
userId: undefined,
hashedSessionToken: 'a8a992acf0c90ef119bb1eef2e5903344212d601a09046a0d0edc1e63476ba09',
antiCSRFToken: '0BQsDWRqIbx0cw3REjOqpQxLIL242UhQ',
publicData: '{"userId":"79175660","userName":"kiodok","userEmail":"kaka22-kiodok@web.de"}',
privateData: '{}',
user: {
~~~~
connect: {
id: '79175660'
}
}
}
}

Unknown arg user in data.user for type SessionUncheckedCreateInput. Did you mean userId? Available args:
type SessionUncheckedCreateInput {
id?: Int
createdAt?: DateTime
updatedAt?: DateTime
expiresAt?: DateTime | Null
handle: String
hashedSessionToken?: String | Null
antiCSRFToken?: String | Null
publicData?: String | Null
privateData?: String | Null
userId?: Int | Null
}

at Document.validate (F:\Blitz Projects\streamconnect\node_modules\@prisma\client\runtime\index.js:35616:19)
at PrismaClient._executeRequest (F:\Blitz Projects\streamconnect\node_modules\@prisma\client\runtime\index.js:38003:17)
at consumer (F:\Blitz Projects\streamconnect\node_modules\@prisma\client\runtime\index.js:37948:23)
at F:\Blitz Projects\streamconnect\node_modules\@prisma\client\runtime\index.js:37950:47
at AsyncResource.runInAsyncScope (async_hooks.js:197:9)
at PrismaClient._request (F:\Blitz Projects\streamconnect\node_modules\@prisma\client\runtime\index.js:37950:25)
at request (F:\Blitz Projects\streamconnect\node_modules\@prisma\client\runtime\index.js:38053:77)
at _callback (F:\Blitz Projects\streamconnect\node_modules\@prisma\client\runtime\index.js:38258:14)
at PrismaPromise.then (F:\Blitz Projects\streamconnect\node_modules\@prisma\client\runtime\index.js:38265:23) {

clientVersion: '3.1.1'
}

What do you think about this?
Thanks for your help so far :) I really appreciate that

Kiodok · 2021-12-14T08:11:11Z

@beerose It's working now! :D
Thanks for your time and helpful advices.
I just needed to add the code for db.user.create.

beerose · 2021-12-14T09:40:09Z

Awesome, @Kiodok!

I just needed to add the code for db.user.create.

Do you mean in the strategy callback?

Kiodok · 2021-12-14T10:03:16Z

Yes, exactly.

beerose · 2021-12-14T10:05:53Z

ok, thanks!

Kiodok added kind/bug status/triage labels Nov 11, 2021

beerose added the status/ready-to-work-on label Nov 11, 2021

blitzjs-bot removed the status/triage label Nov 11, 2021

Kiodok closed this as completed Dec 14, 2021

blitzjs-bot added status/done and removed status/ready-to-work-on labels Dec 14, 2021

dillondotzip transferred this issue from blitz-js/blitz Jul 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Missing Blitz sessionMiddleware when trying to use passport-twitch-strategy #394

Missing Blitz sessionMiddleware when trying to use passport-twitch-strategy #394

Kiodok commented Nov 11, 2021

beerose commented Nov 11, 2021

Kiodok commented Nov 11, 2021 •

edited

beerose commented Nov 12, 2021

Kiodok commented Nov 12, 2021 •

edited

Kiodok commented Nov 26, 2021

beerose commented Nov 29, 2021

Kiodok commented Nov 30, 2021

beerose commented Nov 30, 2021

Kiodok commented Nov 30, 2021 •

edited

beerose commented Dec 8, 2021

Kiodok commented Dec 8, 2021

beerose commented Dec 8, 2021

Kiodok commented Dec 8, 2021

beerose commented Dec 9, 2021

Kiodok commented Dec 10, 2021

Kiodok commented Dec 14, 2021

beerose commented Dec 14, 2021

Kiodok commented Dec 14, 2021

beerose commented Dec 14, 2021

Missing Blitz sessionMiddleware when trying to use passport-twitch-strategy #394

Missing Blitz sessionMiddleware when trying to use passport-twitch-strategy #394

Comments

Kiodok commented Nov 11, 2021

What is the problem?

Paste all your error logs here:

Paste all relevant code snippets here:

What are detailed steps to reproduce this?

Run blitz -v and paste the output here:

Please include below any other applicable logs and screenshots that show your problem:

beerose commented Nov 11, 2021

Kiodok commented Nov 11, 2021 • edited

beerose commented Nov 12, 2021

Kiodok commented Nov 12, 2021 • edited

Kiodok commented Nov 26, 2021

beerose commented Nov 29, 2021

Kiodok commented Nov 30, 2021

beerose commented Nov 30, 2021

Kiodok commented Nov 30, 2021 • edited

beerose commented Dec 8, 2021

Kiodok commented Dec 8, 2021

beerose commented Dec 8, 2021

Kiodok commented Dec 8, 2021

beerose commented Dec 9, 2021

Kiodok commented Dec 10, 2021

Kiodok commented Dec 14, 2021

beerose commented Dec 14, 2021

Kiodok commented Dec 14, 2021

beerose commented Dec 14, 2021

Run `blitz -v` and paste the output here:

Kiodok commented Nov 11, 2021 •

edited

Kiodok commented Nov 12, 2021 •

edited

Kiodok commented Nov 30, 2021 •

edited