getSession returns null on server (_app.js getInitialProps) when using Basic Auth

[kmsomebody]

Description 🐜

When a site is deployed on a password-protected domain, e.g. using Basic Auth via Apache 2 in my case, getSession returns null on the server. Disabling Basic Auth in the Apache configuration gets rid of the problem.
This isn't a problem for production environments, but it is for staging environments or beta-deployments, in which case password protection is desirable.

Is this a bug in your own project?

Yes

How to reproduce ☕️

_app.js custom app:

const MyApp = ({ Component, session, pageProps }) => {
    // null on password-protected server, but correct session object on local server as well as public server. 
    console.log(session);

    // ...
};

_app.js getInitialProps:

MyApp.getInitialProps = async appContext => {
    if (typeof window === 'undefined') {
        return {
            ...await App.getInitialProps(appContext),
            session: await getSession(appContext)
        };
    }

    return {};
};

Apache configuration:

<Location />
    AuthType Basic
    AuthName "Password required"
    AuthBasicProvider file
    AuthUserFile /var/www/staging/.htpasswd
    Require valid-user
</Location>

Screenshots / Logs 📽

No response

Environment 🖥

System:
    OS: Linux 4.19 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Atom(TM) CPU N2800   @ 1.86GHz
    Memory: 586.18 MB / 3.82 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
npmPackages:
    next: 12.0.10 => 12.0.10
    react: 17.0.2 => 17.0.2

Next-Auth version isn't shown, I assume it's because I have it encapsulated in a submodule. It's 4.2.1.

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

Hi, I don't have an immediate suggestion, but it sounds like the issue is with your configuration. Some cookies might be swallowed and never make it to the app.

We recently added a page about how to secure preview environments though, you might find it useful: https://next-auth.js.org/deployment#example

[kmsomebody]

Hi, I don't have an immediate suggestion, but it sounds like the issue is with your configuration. Some cookies might be swallowed and never make it to the app.

I'm pretty sure the cookies are there. At least they were in v3. I upgraded to v4 hoping that it will fix the problem.

The same problem occured when calling getSession from an API-route. With v4 I can use getServerSession, which works perfectly in that API-route, however due to Webpack trying to bundle server-only modules in the client bundles, I cannot use this in getInitialProps.

I compared the headers that the API-route received on staging with the ones on localhost, and besides the host name and additional Authorization header on staging, there's no difference.

Just for clarification, simply disabling Authorization on staging makes the difference. The same code on staging with Authorization enabled, using getSession vs getServerSession also makes a difference.

We recently added a page about how to secure preview environments though, you might find it useful: https://next-auth.js.org/deployment#example

Thank you for the link. Unfortunately this doesn't fit my use-case, but it may be a good solution for other apps that require being logged in.
In my case, I'm testing private content, depending on which user is logged in, if logged in at all. Not being logged in is (currently) the most common case, due to only my team members and some partners having user accounts.
It is not a super urgent bug that needs to be fixed. Now that I know that Basic Auth causes this, I know it works on production just like it works in my local environment. I just wanted to report that this issue exists and that I think that it should be addressed (as a fix, or maybe in the documentation).