NextJs website + Cognito auth + next-auth npm package + S3 -> Getting CLIENT_FETCH_ERROR

Question

I build my front-end using NextJs and am hosting the website on AWS S3. Everything was fine until I tried to add cognito authentication. I found this npm package that was supposed to make everything easy: next-auth.

However I keep getting errors:

1. When loading the page, there is console error: "CLIENT_FETCH_ERROR". Next auth says I need to declare an env variable called NEXTAUTH_URL (https://next-auth.js.org/errors) which I have done in my .env file.
2. When trying to click login it redirects me to https://example.com/api/auth/error with a 403 in the public website. On localhost, it actually brings me to a page (http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F) with 2 buttons (one to sign in with Cognito and the other with Google).

Do you think this is because S3 doesn't actually have environment variables so NEXTAUTH_URL is undefined? Should I move to Vercel or another AWS service or is there something else that could be wrong?

My pages/api/auth/[...nextauth].js file:

import NextAuth from 'next-auth/next';
//import Providers from 'next-auth/providers';
import GoogleProvider from 'next-auth/providers/google';
import CognitoProvider from 'next-auth/providers/cognito';

export default NextAuth({
  providers: [
    CognitoProvider({
      clientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
      clientSecret: process.env.COGNITO_CLIENT_SECRET,
      issuer: process.env.COGNITO_ISSUER,
      domain: process.env.COGNITO_DOMAIN,
    }),
  ],
  theme: {
    colorScheme: 'light',
  },
  debug: process.env.NODE_ENV === 'development' ? true : false,
  secret: process.env.NEXTAUTH_SECRET,
});