On Production useSession return empty object

[maksyukvadim]

Question 💬

Hi I am try to use next-auth for my project. When I run via "npm run dev" all work fine, but if I deploy it to firebase hosting getSession/useSession always return enpty object. I guess problem around my server(hostinig) but not sure.
links

• https://drive.google.com/file/d/11zCjUKW4hhdPlJO5IXF8bSanR73oAa3Q/view?usp=drive_link
• https://drive.google.com/file/d/1Jn9z7Z81cR-The2CkeS81EFJF7_gbTQ8/view?usp=drive_link

.env.local

FB_API_KEY="***"
FB_AUTH_DOMAIN="***"
FB_PROJECT_ID="***"
FB_STORAGE_BUCKET="***"
FB_MESSAGING_SENDER="***"
FB_APP_ID="***"
FB_MEASUREMENT_ID="***"
NEXTAUTH_URL="https://sheas-cafe-dev.web.app"  / "http://localhost:3000" - for dev 
NEXTAUTH_SECRET="c9azA3Org5vZmgr16Fkvvkp+psBkLBWpQaUppkzfJUI="

Package.json

{
  "name": "sheas-cafe",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev:server": "NODE_ENV=production node server.js",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"
  },
  "main": "function.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@types/node": "20.2.1",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "antd": "^5.5.2",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.4",
    "firebase": "^9.22.1",
    "firebase-admin": "^11.9.0",
    "firebase-functions": "^4.4.1",
    "formik": "^2.4.1",
    "jest": "^29.5.0",
    "jsonwebtoken": "^9.0.0",
    "next": "13.4.4",
    "next-auth": "^4.22.1",
    "normalize.css": "^8.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sharp": "^0.32.1",
    "typescript": "5.0.4",
    "url": "^0.11.1",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.21.5",
    "@commitlint/cli": "^17.6.5",
    "@commitlint/config-conventional": "^17.6.5",
    "@semantic-release/changelog": "^6.0.3",
    "@semantic-release/commit-analyzer": "^9.0.2",
    "@semantic-release/exec": "^6.0.3",
    "@semantic-release/git": "^10.0.1",
    "@semantic-release/gitlab": "^12.0.1",
    "@semantic-release/release-notes-generator": "^11.0.1",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.1",
    "@types/uuid": "^9.0.2",
    "@typescript-eslint/eslint-plugin": "^5.59.8",
    "conventional-changelog-conventionalcommits": "^5.0.0",
    "eslint-config-google": "^0.14.0",
    "husky": "^8.0.3",
    "identity-obj-proxy": "^3.0.0",
    "jest-environment-jsdom": "^29.5.0",
    "semantic-release": "^21.0.2"
  }
}

functions.js

/* eslint-disable @typescript-eslint/no-var-requires */

const {https} = require("firebase-functions");
const next = require("next");
const {parse} = require("url");

const server = next({
  dev: false,
  conf: {distDir: "build"},
});

const nextjsHandle = server.getRequestHandler();
exports.nextServer = https.onRequest((req, res) => {
  const parsedUrl = parse(req.url, true);
  return server.prepare().then(() => nextjsHandle(req, res, parsedUrl));
});

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "europe-west1"
    },
    "rewrites": [
      {
        "source": "**",
        "function": "nextServer"
      }
    ]
  },
  "functions": [
    {
      "source": ".",
      "runtime": "nodejs18",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log",
        "**/src/**",
        "**/.vscode/**",
        ".firebase/**",
        ".firebaserc",
        "firebase.json",
        "**/node_modules/**",
        "**/public/**",
        "**/.next/cache/**"
      ]
    }
  ]
}

[...nextauth].api.ts

import NextAuth, {NextAuthOptions} from "next-auth";
import {decode, encode} from "next-auth/jwt";
import CredentialsProvider from "next-auth/providers/credentials";

import {FB_API_KEY} from "@/constants/config";
import {IDENTITY_TOOLKIT_URL} from "@/constants/API/URLs";
import {adminSDK} from "@/pages/api/_adminSDK/adminSDK";

export const authOptions: NextAuthOptions = {
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      type: "credentials",
      credentials: {
        username: {label: "Username", type: "text", placeholder: "jsmith"},
        password: {label: "Password", type: "password"},
      },
      async authorize(credentials: any, req: any) {
        try {
          const authResponse = await fetch(`${IDENTITY_TOOLKIT_URL}/accounts:signInWithPassword?key=${FB_API_KEY}`, {
            "method": "POST",
            "headers": {
              "Content-Type": "application/json",
            },
            "body": JSON.stringify({
              "returnSecureToken": true,
              "email": credentials.email,
              "password": credentials.password,
            }),
          });
          if (!authResponse.ok) {
            return null;
          }
          const user = await authResponse.json();
          const userRoles = await adminSDK.getUserRoles(user.localId);
          user.roles = userRoles;
          return user;
        } catch (ex) {
          return null;
        }
      },
    } as any),
  ],
  callbacks: {
    jwt: async ({token, user}) => {
      if (user?.idToken) {
        token.accessToken = user.idToken;
        token.refreshToken = user.refreshToken;
        token.userEmail = user.email;
        token.expiresIn = user.expiresIn;
        token.userRoles = user.roles;
        token.userId = user.localId;
        return token;
      }
      return Promise.resolve(token);
    },
    session: async ({session, token}) => {
      session.user = {
        ...session.user || {},
        id: token.userId,
        roles: token.userRoles,
        email: token.userEmail,
      };

      return session;
    },
  },
  pages: {
    signIn: "/admin/login",
  },
};

export default NextAuth(authOptions);

How to reproduce ☕️

Setup new project with next js and copy my files

links

• https://drive.google.com/file/d/11zCjUKW4hhdPlJO5IXF8bSanR73oAa3Q/view?usp=drive_link
• https://drive.google.com/file/d/1Jn9z7Z81cR-The2CkeS81EFJF7_gbTQ8/view?usp=drive_link

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[maksyukvadim]

This is happens because firebase hosting support only "__session" name for cookies

[vitordhers]

Ok, I'm dealing with the same problem, is there any workaround? Thanks in advance

[leonardomarcao]

Any update? I trying to make it with the credentials provider too, but I'm using FastAPI and in production, I receive an empty session, only localhost works.

[shailopez]

dealing with this too, but it's happening randomly. sometimes it would show a value, sometimes not