Admin - Access Denied - Application error: a server-side exception has occurred

[Matt]

First off, thank you for your efforts on this awesome portfolio/photog template. I've been having some access issues to log in since migrating the code to your latest release.

My next move is to remove AWS all together, but I'd like to use S3 for low cost storage. Below are the screenshots and logs im seeing (novice developer). Appreciate your help on this!

After deploying a fresh install and attempting login:

Logs for the issue apprear to be related to AWS which I've validated several times:

More detailed log data:

AccessDenied: Access Denied
at throwDefaultError (/var/task/node_modules/.pnpm/@smithy+smithy-client@2.2.0/node_modules/@smithy/smithy-client/dist-cjs/default-error-handler.js:8:22)
at /var/task/node_modules/.pnpm/@smithy+smithy-client@2.2.0/node_modules/@smithy/smithy-client/dist-cjs/default-error-handler.js:18:39
at de_ListObjectsCommandError (/var/task/node_modules/.pnpm/@AWS-SDK+client-s3@3.484.0/node_modules/@aws-sdk/client-s3/dist-cjs/protocols/Aws_restXml.js:4155:20)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async /var/task/node_modules/.pnpm/@smithy+middleware-serde@2.0.15/node_modules/@smithy/middleware-serde/dist-cjs/deserializerMiddleware.js:7:24
at async /var/task/node_modules/.pnpm/@AWS-SDK+middleware-signing@3.468.0/node_modules/@aws-sdk/middleware-signing/dist-cjs/awsAuthMiddleware.js:30:20
at async /var/task/node_modules/.pnpm/@smithy+middleware-retry@2.0.25/node_modules/@smithy/middleware-retry/dist-cjs/retryMiddleware.js:31:46
at async /var/task/node_modules/.pnpm/@AWS-SDK+middleware-sdk-s3@3.484.0/node_modules/@aws-sdk/middleware-sdk-s3/dist-cjs/region-redirect-endpoint-middleware.js:14:24
at async /var/task/node_modules/.pnpm/@AWS-SDK+middleware-sdk-s3@3.484.0/node_modules/@aws-sdk/middleware-sdk-s3/dist-cjs/region-redirect-middleware.js:9:20
at async /var/task/node_modules/.pnpm/@AWS-SDK+middleware-logger@3.468.0/node_modules/@aws-sdk/middleware-logger/dist-cjs/loggerMiddleware.js:7:26 {
'$fault': 'client',
'$metadata': {
httpStatusCode: 403,
requestId: '0NCXJQV4XC7AT9FV',
extendedRequestId: 'DlisE90kTyps8FjzBvnQu0FElFprwOLPovNk52qFx0vgQcNT1FvegNnQ4B64Y4pHy5Mp7acMiEU=',
cfId: undefined,
attempts: 1,
totalRetryDelay: 0
},
Code: 'AccessDenied',
RequestId: '0NCXJQV4XC7AT9FV',
HostId: 'DlisE90kTyps8FjzBvnQu0FElFprwOLPovNk52qFx0vgQcNT1FvegNnQ4B64Y4pHy5Mp7acMiEU='
}

[Matt]

logging in worked fine when removing S3 env variables

[Sam Becker]

That is definitely odd.

This part seemed to be the most telling: ListObjectsCommandError ... which would suggest there aren't sufficient AWS credentials to list the bucket objects?

Can you confirm you've added all 4 environment variables:

• NEXT_PUBLIC_AWS_S3_REGION
• NEXT_PUBLIC_AWS_S3_BUCKET
• AWS_S3_ACCESS_KEY
• AWS_S3_SECRET_ACCESS_KEY

And that your IAM policy looks right?

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:PutObjectACL",
        "s3:GetObject",
        "s3:ListBucket",
        "s3:DeleteObject"
      ],
      "Resource": [
        "arn:aws:s3:::{BUCKET_NAME}",
        "arn:aws:s3:::{BUCKET_NAME}/*"
      ]
    }
  ]
}

[Matt]

Thanks Sam. This appears to work now at least in my local environment! All I changed was the lines below where i incorrectly replaced BUCKET_NAME with the actual bucket name. After removing my specific bucket name, this appears to work.

    "arn:aws:s3:::{BUCKET_NAME}",
    "arn:aws:s3:::{BUCKET_NAME}/*"

Next question - how do I default to AWS for storage? Just remove the Vercel Blob store env variables?

Cheers!

[Sam Becker]

Actually, it should include your bucket name but without the braces, for instance:

"arn:aws:s3:::exif-photo-blog",
"arn:aws:s3:::exif-photo-blog/*"

If you're still having trouble, I can try to improve error formatting for AWS connections to give you more clues.

As for Vercel Blob, yes, you should be able to simply remove those credentials, provided you're not serving any images from that store.

[Matt]

I think I got it! Messed with next-config that i forgot about, updated the policy details and everything seems to be working fine. Will try removing blob store later. Good stuff!

[Matt]

spoke too soon again. commented out Blob, removed .env variables and getting this next-config error. Pretty sure i have aws set up right. will get back into this later.

Error: Invalid src prop (https://kqkb5v5od6e9slxz.public.blob.vercel-storage.com/photo-ep8WfIvC.png) on next/image, hostname "kqkb5v5od6e9slxz.public.blob.vercel-storage.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

My next-config (with blob commented out) is same as yours i believe:

// const VERCEL_BLOB_STORE_ID = process.env.BLOB_READ_WRITE_TOKEN?.match(
// /^vercel_blob_rw_([a-z0-9]+)_[a-z0-9]+$/i,
// )?.[1].toLowerCase();

// const VERCEL_BLOB_HOSTNAME = VERCEL_BLOB_STORE_ID
// ? ${VERCEL_BLOB_STORE_ID}.public.blob.vercel-storage.com
// : undefined;

const AWS_S3_HOSTNAME =
process.env.NEXT_PUBLIC_AWS_S3_BUCKET &&
process.env.NEXT_PUBLIC_AWS_S3_REGION
// eslint-disable-next-line max-len
? ${process.env.NEXT_PUBLIC_AWS_S3_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_S3_REGION}.amazonaws.com
: undefined;

const createRemotePattern = (hostname) => hostname
? {
protocol: 'https',
hostname,
port: '',
pathname: '/**',
}
: [];

/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
imageSizes: [200],
remotePatterns: []
// .concat(createRemotePattern(VERCEL_BLOB_HOSTNAME))
.concat(createRemotePattern(AWS_S3_HOSTNAME)),
minimumCacheTTL: 31536000,
},
};

const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer(nextConfig);

[Sam Becker]

Error: Invalid src prop (https://kqkb5v5od6e9slxz.public.blob.vercel-storage.com/photo-ep8WfIvC.png)

The url above is still referencing Vercel Blob. This is what I meant by you can only remove Vercel Blob configuration if you're not hosting any images there.

If you want to host from both Vercel Blob and AWS then you need to leave the Vercel Blob configuration in place. If you want a clean break, and only want to connect to AWS, then you'll need to delete the Vercel Blob images (after re-adding Vercel Blob configuration) from the admin dashboard and re-upload them with AWS configuration in place (the system should favor AWS over Vercel Blob if they're both configured).

Does that make sense?

[Matt]

perfect, everything works great as expected. Im a noob at a lot of this, but my goal is to implement some sort of on demand NFT minting & selling via Thirdweb. Happy to collab further and appreciate your work on this awesome template!