runWithAmplifyServerContext throwing error, ⨯ Error: Cannot access Cognito.length on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

[akuntal]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

# Put output below this line

Describe the bug

Error: Cannot access Cognito.length on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
at Object.get (/Users/alokkumar/Desktop/workspace/nextjs-cognito-auth/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:252553)
at deepFreeze (/Users/alokkumar/Desktop/workspace/nextjs-cognito-auth/node_modules/@aws-amplify/core/dist/cjs/utils/deepFreeze.js:10:29)
at deepFreeze (/Users/alokkumar/Desktop/workspace/nextjs-cognito-auth/node_modules/@aws-amplify/core/dist/cjs/utils/deepFreeze.js:12:36)
at deepFreeze (/Users/alokkumar/Desktop/workspace/nextjs-cognito-auth/node_modules/@aws-amplify/core/dist/cjs/utils/deepFreeze.js:12:36)
at AmplifyClass.configure (/Users/alokkumar/Desktop/workspace/nextjs-cognito-auth/node_modules/@aws-amplify/core/dist/cjs/singleton/Amplify.js:45:55)
at createAmplifyServerContext (/Users/alokkumar/Desktop/workspace/nextjs-cognito-auth/node_modules/@aws-amplify/core/dist/cjs/adapterCore/serverContext/serverContext.js:18:13)
at runWithAmplifyServerContext (/Users/alokkumar/Desktop/workspace/nextjs-cognito-auth/node_modules/aws-amplify/dist/cjs/adapter-core/runWithAmplifyServerContext.js:20:71)
at runWithAmplifyServerContext (/Users/alokkumar/Desktop/workspace/nextjs-cognito-auth/node_modules/@aws-amplify/adapter-nextjs/dist/cjs/utils/createRunWithAmplifyServerContext.js:25:67)

Expected behavior

should return the current user

Reproduction steps

I am using @aws-amplify/adapter-nextjs andaws-amplify with nextjs 14 app router.

Code Snippet

import { runWithAmplifyServerContext } from "@/utils/amplify-server-utils";
import { fetchAuthSession, getCurrentUser } from "aws-amplify/auth/server";
import { cookies } from "next/headers";

export async function GET(request: Request) {
  const user = await runWithAmplifyServerContext({
    nextServerContext: { cookies: cookies },
    operation: async (contextSpec) => {
      try {
        const session = await fetchAuthSession(contextSpec);
        if (!session.tokens) {
          return;
        }
        const user = {
          ...(await getCurrentUser(contextSpec)),
        };

        return user;
      } catch (error) {
        console.log(error);
      }
    },
  });

  return new Response(JSON.stringify({ user }));
}

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[HuiSF]

Hi @akuntal thanks for reporting this issue. Looking at the stack trace, there could be something went wrong to accessing the config object that was passed into createServerRunner() function call.

Could you paste your implementation of @/utils/amplify-server-utils?

[akuntal]

Hi @HuiSF, Here it is.

import { authConfig } from "@/app/amplify-cognito-config";
import { NextServer, createServerRunner } from "@aws-amplify/adapter-nextjs";
import { fetchAuthSession, getCurrentUser } from "aws-amplify/auth/server";

export const { runWithAmplifyServerContext } = createServerRunner({
  config: {
    Auth: authConfig,
  },
});

And here is my config file.

"use client";

import { Amplify, type ResourcesConfig } from "aws-amplify";

export const authConfig: ResourcesConfig["Auth"] = {
  Cognito: {
    userPoolId: String(process.env.NEXT_PUBLIC_USER_POOL_ID),
    userPoolClientId: String(process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID),
  },
};

Amplify.configure(
  {
    Auth: authConfig,
  },
  { ssr: true }
);

export default function ConfigureAmplifyClientSide() {
  return null;
}

[HuiSF]

Hi @akuntal Thanks for providing the details.

Looking at your code, the authConfig object is exported from the client module that's marked with the directive "use client", and then you imported it into a module that runs on the server side. This will cause the error:

You cannot dot into a client module from a server component. You can only pass the imported name through.

My recommendation is to extract the authConfig into a separate file and import it into both locations to use.

[akuntal]

Thank you @HuiSF, it worked.