Deploying NextJS App with AWS Amplify/Cognito to Vercel

Help
1

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!

2

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);
3

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:

image
image796×567 54.1 KB

Using Cognito User Pool and Authorization code grant.

4

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?

5

I added them via the upload an ENV file and they were added in the project settings

image
image951×857 58.7 KB

6

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

7

Good idea. Please let me know how it goes. :pray:

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

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.