Deploying NextJS App with AWS Amplify/Cognito to Vercel

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.

reply to #2

Vercel Staff

Hi ! 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

reply to #4

I'm going to try replicating the aws-exports file exactly in case perhaps the params being passed are not exactly correct

Vercel Staff

Good idea. Please let me know how it goes.

I found some posts about somewhat related issues that might give you some more ideas.

https://github.com/aws-amplify/amplify-js/issues/11313

GitHub

Federated sign-in: [TypeError: Cannot read property 'oauthSignIn' of undefined] · Issue #11313 · aws-amplify/amplify-js

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-cont...

This topic is closed. It no longer accepts new replies.

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'

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=

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, } ] } };