AWS Amplify config file (aws-export.js) with environment variables (env var)

I am trying to add env file to my, but I get a clientId must be provided.

At the moment, I get “Error: Both UserPoolId and ClientId are required.”

My guess guess is the way I import them. The sequence may not be the most correct OR the script may need something to be able to read the dotenv or digital ocean variables

.env

aws_project_region=us-east-1
aws_cognito_identity_pool_id="us-east-2:aaa-bbbb-cccc-ddd"
aws_cognito_region=us-east-1
aws_user_pools_web_client_id="xxxxxxxxxxxxxxxx"

aws-export.js

const awsmobile = {
  aws_project_region: process.env.aws_project_region,
  aws_cognito_identity_pool_id: process.env.aws_cognito_identity_pool_id,
  aws_cognito_region: process.env.aws_cognito_region,
  aws_user_pools_id: 'us-east-2_yyyyyyyyyyY',
  aws_user_pools_web_client_id: 'yyyyyyyyyyyyyyyyyyy',
  oauth: {},
  aws_cognito_username_attributes: ['EMAIL'],
  aws_cognito_social_providers: [],
  aws_cognito_signup_attributes: ['EMAIL', 'PHONE_NUMBER'],
  aws_cognito_mfa_configuration: 'OFF',
  aws_cognito_mfa_types: ['SMS'],
  aws_cognito_password_protection_settings: {
    passwordPolicyMinLength: 8,
    passwordPolicyCharacters: ['REQUIRES_LOWERCASE', 'REQUIRES_NUMBERS'],
  },
  aws_cognito_verification_mechanisms: ['EMAIL'],
  aws_appsync_graphqlEndpoint:
    'https://hhhhhhhhhhhhh.appsync-api.us-east-2.amazonaws.com/graphql',
  aws_appsync_region: 'us-east-2',
  aws_appsync_authenticationType: 'API_KEY',
  aws_appsync_apiKey: 'da2-ggggggggggggg',
};

export default awsmobile;

_app.tsx

import config from '../../src/aws-exports';

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

next.config.js

const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');
// https://issueexplorer.com/issue/shadowwalker/next-pwa/288
module.exports = withPWA({
  images: {
    domains: ['live.staticflickr.com', 'c.tenor.com', 'tailwindui.com'],
  },
  pwa: {
    dest: 'public',
    runtimeCaching,
    buildExcludes: [
      /middleware-manifest.json$/,
      /_middleware.js$/,
      /_middleware.js.map$/,
    ],
  },

  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.resolve.fallback = {
      ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
      // by next.js will be dropped. Doesn't make much sense, but how it is
      fs: false, // the solution
    };

    // SVG fixes
    config.module.rules.push(
      ...[
        {
          test: /.yml$/,
          type: 'json',
          use: 'yaml-loader',
        },
        {
          test: /.svg$/,
          use: '@svgr/webpack',
        },
      ]
    );
    return config;
  },
});

My digital Ocean env variables

https://ibb.co/DbQnwz0