[build]: n.end is not a function

[JonasBa]

Hello everyone, I've been trying to use this package to protect some of our under development pages but I'm running into an issue with next optimization step.

The package versions I'm using are

"next": "9.4.4",
"nextjs-basic-auth-middleware": "^0.1.0",

The error comes from an attempt by next to optimize the page

Creating an optimized production build

Compiled successfully.

Automatically optimizing pages ...
Error occurred prerendering page "/new". Read more: https://err.sh/next.js/prerender-error
TypeError: n.end is not a function

My code is as follows:

import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
import basicAuthMiddleware from 'nextjs-basic-auth-middleware'

const credentials = process.env.BASIC_AUTH_CREDENTIALS.split(':')

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    await basicAuthMiddleware(ctx.req, ctx.res, {
      users: [{ name: credentials[0], password: credentials[1] }],
      includePaths: ['/new'],
    })

    const initialProps = await Document.getInitialProps(ctx)
    return initialProps
  }
}

export default MyDocument

It seems that the call to basicAuthMiddleware terminates/ends the response which may be used by the call to getInitialProps?

I've attempted at reordering the calls to see if that's the case, but I havent had any luck. One of my subpages is also using the getStaticProps, but removing it doesnt fix the build.

Edit: I realize I forgot to write that process.env.BASIC_AUTH_CREDENTIALS are set at build time, so that's not a potential source of the error

[OZZlE]

I have the same issue:

Automatically optimizing pages ...Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: null,
  query: null,
  pathname: '/en/faq',
  path: '/en/faq',
  href: '/en/faq'
}
// ...
Error occurred prerendering page "/sv/faq". Read more: https://err.sh/next.js/prerender-error
TypeError: n.end is not a function

> Build error occurred
Error: Export encountered errors on following paths:
    /404
    /404.html
    /de/faq
    /en/faq
    /sv/faq
    at exportApp ([censored]/node_modules/next/dist/export/index.js:22:1166)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async build ([censored]/node_modules/next/dist/build/index.js:36:218)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.    

@JonasBa did you manage to solve it? I have hardcoded the credentials for now just to test, didn't help..

Could it be specific to yarn somehow? Edit: Nope same happens with npm run..

[OZZlE]

Seems to be related to vercel/next.js#8014 ?

[OZZlE]

Seems like this isn't possible with SSR pages :< https://github.com/vercel/next.js/blob/master/errors/404-get-initial-props.md

If true I would empty this module and just write in Readme that currently we can't have Basic Auth and SSR. Destroying SSR makes using nextjs pointless...

[OZZlE]

Ok you can have Basic Auth on a ExpressJs server which hosts Nextjs. https://stackoverflow.com/questions/64316886/how-do-i-add-basic-authentication-to-nextjs-node-server

[afzalsayed96]

@OZZlE That's not quite ideal, unfortunately

[jchiatt]

Yep, and since getServerSideProps cannot be called in a Custom Document, it seems there's no way to use this even if you are okay with opting out of static optimization.

[jchiatt]

@OZZlE @afzalsayed96 @JonasBa I went ahead and rolled my own basic auth package: https://www.npmjs.com/package/nextjs-basic-auth

(It also requires opting out of static generation, unfortunately)

[michielmetcake]

You can do a workaround like:

ctx.pathname !=== '/_error' &&
    await basicAuthMiddleware(ctx.req, ctx.res, {
      users: [{ name: credentials[0], password: credentials[1] }],
      includePaths: ['/new'],
    })

[OZZlE]

I'm fine with opting out of SSG, we are caching our website in Fastly anyway but what I wrote earlier was that SSR wouldn't work properly so for us 'nextjs-basic-auth' sounds quite interesting! :)

[blurrah]

The naming might be a bit awkward as I originally only used it as a documentMiddleware it only requires a request and response object to add the authentication headers. I have updated the documentation with an example of using this package in getServerSideProps for a single page.

This will unfortunately only work for server side rendered pages, I have added some extra information to the documentation as well for handling it on Vercel, AWS or Cloudflare. @OZZlE I haven't added anything for Fastly if you were ever going to switch to SSG you could look at Compute@edge for it to run basic auth in front of your sites.