How to access SECRETS outside of the "/amplify" directory?

[swbergmann]

Environment information

I am using NextJS with Amplify Gen 2 and
- created nextjs application via npx create-next-app myapp
- installed all amplify packages via npm create amplify@latest -y
- started the amplify sandbox via npx ampx sandbox
- set two secrets in the AWS Amplify website: Hosting / Secrets (to be used for all branches)

Nothing special about my environment.

Describe the bug

What works:
If I hard code my secrets into the application code everything works perfectly locally (npm run dev) as well as hosted on AWS Amplify Gen 2 (via the deployed URL). I can confirm perfect functionality of the use case (send emails after submitting a contact form) in all environments.

What does not work:
Accessing/using the secrets (created in the AWS website) is not possible in my application code (outside of the /amplify directory).

I created secrets in the AWS Amplify website and want to use them in my NextJS application in
pages/api/contact.ts

Ideally I want to use the secrets in line #5 and #6 - this is outside of the /amplify directory.

So far I followed the official documentations:
Access Secrets
Set up a Function

My conclusion so far is, that using secrets only works in the /amplify directory i.e.
accessing secret via secret() function in resource.ts

then assigning the secrets via
env from "$amplify/env/secrets"; in the handler.ts

But I am unable to:

1. import from "$amplify/env/secrets"; in any other directory other than "/amplify" or below
2. export the values from my secrets so that I can use them in my application files i.e.

Please advise:
How is the intended use of secrets outside the /amplify directory?
Please provide demo code snippets.

Thank you in advance

Reproduction steps

See screenshots attached.

[Jay2113]

Hi @swbergmann 👋 , this thread seems to be a duplicate of #2384. Please refer to my comment here: #2384 (comment).