Hey there, I’m trying to deploy my NextJS app using AWS Amplify/Cognito for Auth. I’m having issues getting the application to deploy properly, the error returned is as follows:
TypeError: Cannot read properties of undefined (reading 'loginWith')
at X.notifyOAuthListener (/vercel/path0/market-pay-next/.next/server/chunks/773.js:2:35015)
at X.configure (/vercel/path0/market-pay-next/.next/server/chunks/773.js:2:34779)
at Object.configure (/vercel/path0/market-pay-next/.next/server/chunks/773.js:4:16700)
at 10811 (/vercel/path0/market-pay-next/.next/server/chunks/699.js:1:9658)
at t (/vercel/path0/market-pay-next/.next/server/webpack-runtime.js:1:142)
at 55013 (/vercel/path0/market-pay-next/.next/server/app/page.js:1:1360)
at t (/vercel/path0/market-pay-next/.next/server/webpack-runtime.js:1:142)
at r (/vercel/path0/market-pay-next/.next/server/app/page.js:1:4108)
at /vercel/path0/market-pay-next/.next/server/app/page.js:1:4147
at t.X (/vercel/path0/market-pay-next/.next/server/webpack-runtime.js:1:1270)
> Build error occurred
Error: Failed to collect page data for /
at /vercel/path0/market-pay-next/node_modules/next/dist/build/utils.js:1268:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
Initial research indicates that it is unable to login to OAuth. I have my Cognito User Group set up to talk with the Vercel server but am still getting this error. What am I missing? I’d appreciate any help!
I have a .env file which I’m using to pass the environment variables to Vercel’s deployment:
NEXT_PUBLIC_AWS_PROJECT_REGION=
NEXT_PUBLIC_AWS_COGNITO_IDENTITY_POOL_ID=
NEXT_PUBLIC_AWS_COGNITO_REGION=
NEXT_PUBLIC_AWS_USER_POOLS_ID=
NEXT_PUBLIC_AWS_USER_POOLS_WEB_CLIENT_ID=
NEXT_PUBLIC_AWS_APPSYNC_GRAPHQL_ENDPOINT=
NEXT_PUBLIC_AWS_APPSYNC_REGION=
NEXT_PUBLIC_AWS_APPSYNC_AUTHENTICATION_TYPE=
NEXT_PUBLIC_AWS_APPSYNC_API_KEY=
NEXT_PUBLIC_AWS_COGNITO_DOMAIN=
NEXT_PUBLIC_AWS_COGNITO_REDIRECT_SIGN_IN=
NEXT_PUBLIC_AWS_COGNITO_REDIRECT_SIGN_OUT=
values deleted out for obvious reasons
from awsConfig:
const awsConfig = {
Auth: {
region: process.env.NEXT_PUBLIC_AWS_PROJECT_REGION,
userPoolId: process.env.NEXT_PUBLIC_AWS_USER_POOLS_ID,
userPoolWebClientId: process.env.NEXT_PUBLIC_AWS_USER_POOLS_WEB_CLIENT_ID,
identityPoolId: process.env.NEXT_PUBLIC_AWS_COGNITO_IDENTITY_POOL_ID,
oauth: {
domain: process.env.NEXT_PUBLIC_AWS_COGNITO_DOMAIN,
scope: ['email', 'openid', 'profile'],
redirectSignIn: process.env.NEXT_PUBLIC_AWS_COGNITO_REDIRECT_SIGN_IN,
redirectSignOut: process.env.NEXT_PUBLIC_AWS_COGNITO_REDIRECT_SIGN_OUT,
responseType: 'code',
},
mandatorySignIn: true,
},
API: {
endpoints: [
{
name: "MarketPayTest",
endpoint: process.env.NEXT_PUBLIC_API_GATEWAY_URL,
region: process.env.NEXT_PUBLIC_AWS_PROJECT_REGION,
}
]
}
};
Where it is invoked:
import { awsConfig } from '@/utils/amplify/amplify-config';
import { Authenticator } from '@aws-amplify/ui-react';
Amplify.configure(awsConfig);
I have these set for sign in and sign out URL, which are set to the values from Vercel:
NEXT_PUBLIC_AWS_COGNITO_REDIRECT_SIGN_IN=https://market-pay-testing.vercel.app/signin
NEXT_PUBLIC_AWS_COGNITO_REDIRECT_SIGN_OUT=https://market-pay-testing.vercel.app/signout
and my AWS Cognito User Group is configured and has the following for Hosted sign up and sign in:
Using Cognito User Pool and Authorization code grant.
Hi @baronxofficial! This might seem like a silly thing to ask, but I just want to be absolutely sure I know how the environment variable were added to the project. Did you upload the variables in project settings, or did you include them a different way?
I added them via the upload an ENV file and they were added in the project settings
I’m going to try replicating the aws-exports file exactly in case perhaps the params being passed are not exactly correct
Good idea. Please let me know how it goes. 
I found some posts about somewhat related issues that might give you some more ideas.
