How to call REST API with access only for Auth/Guest Users

aahmedfaraz commented 1 year ago

Amplify CLI Version

12.4.0

Question

Background

I created a web app on Next.js and added Amplify Auth in it. Every Auth function like Auth.signup, Auth.signin . . . etc, are running on client side, but as per my scenario I don't want to delete user on client side but inside a lambda, so that I can handle other related stuff as well inside the lambda.
For that, I want to create a REST API using Amplify CLI, which I will use to delete user and other related operations.

What I did

I created a REST API using Amplify CLI, and there is a lambda attached with it which will handle the operations, and while creating the API I added restrictions so that only Auth/Guest user can access the api and can only use DELETE method.
Amplify created the API ✅, everything is fine till now.

Problem

How to call this API using API object inside aws-amplify, I tried as per docs, it is giving CORS Policy error.

ykethan commented 1 year ago

Hey, 👋 thanks for raising this! I'm going to transfer this over to our JS repository for better assistance 🙂.

aahmedfaraz commented 1 year ago

Thanks, I also added the issue inside amplify/cli

cwomack commented 1 year ago

Hello, @aahmedfaraz 👋. If you opened another issue inside the CLI repo, can you link it please so we know they are related?

As for the REST API and CORS issues, can you share your package.json so we can see what dependencies and versions you have currently? Also was there any specific section of the docs or guide you were following for setting this up?

ykethan commented 1 year ago

https://github.com/aws-amplify/amplify-cli/issues/13189 duplicate issue on the CLI repository.

aahmedfaraz commented 1 year ago

@cwomack Sure, here are the dependencies list I am using:

  "dependencies": {
    "@aws-amplify/ui-react": "^5.0.3",
    "@prismicio/client": "^7.1.0",
    "@prismicio/next": "^1.3.3",
    "@prismicio/react": "^2.7.1",
    "@reduxjs/toolkit": "^1.9.5",
    "aws-amplify": "^5.3.3",
    "helmet": "^7.0.0",
    "next": "^13.4.4",
    "next-sitemap": "^4.1.8",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-helmet": "^6.1.0",
    "react-qr-code": "^2.0.11",
    "react-redux": "^8.1.1",
    "redux-thunk": "^2.4.2"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^13.4.4",
    "@next/eslint-plugin-next": "^13.4.13",
    "@playwright/test": "^1.37.1",
    "@semantic-release/commit-analyzer": "^10.0.4",
    "@semantic-release/github": "^9.0.4",
    "@semantic-release/release-notes-generator": "^11.0.4",
    "@slicemachine/adapter-next": "^0.3.9",
    "@types/jest": "^29.5.4",
    "@types/node": "20.3.3",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.6",
    "@types/react-helmet": "^6.1.6",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.62.0",
    "autoprefixer": "^10.4.15",
    "axios": "^1.5.0",
    "danger": "^11.2.8",
    "eslint": "^8.48.0",
    "eslint-config-next": "^13.4.12",
    "eslint-config-standard-with-typescript": "^37.0.0",
    "eslint-plugin-tailwindcss": "^3.13.0",
    "jest": "^29.6.4",
    "postcss": "^8.4.22",
    "slice-machine-ui": "^1.7.1",
    "tailwindcss": "^3.3.3",
    "ts-jest": "^29.1.1",
    "typescript": "^5.0.4",
    "webpack-bundle-analyzer": "^4.9.0"
  },

I just followed the amplify REST API docs, Automated Setup, here is the link.

ykethan commented 1 year ago

@aahmedfaraz Does the Lambda function attached to the REST API path have a response with headers?

for example:

headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Headers': '*',
     },

aahmedfaraz commented 1 year ago

No, I was not adding the wildcard with Headers, I did this now and it is working ✅ Thanks @ykethan

aahmedfaraz commented 1 year ago

One more thing, how to make sure the user which is running the lambda is Authorized?

According to somewhere I studied it should have it in event.requestContext.authorizer, but there is no such variable available in the Lambda event, I just tried with providing a header on API call of Authorization: 'Bearer <auth-jwt-token>, and now when I hit the API, I got CORS again, these are the errors:

Access to XMLHttpRequest at '<api-url>' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field authentication is not allowed by Access-Control-Allow-Headers in preflight response.

and inside catch the error.message is Network Error

josefaidt commented 1 year ago

Hey @aahmedfaraz :wave:

how to make sure the user which is running the lambda is Authorized?

by default when a REST API route is restricted using the CLI walkthrough, it is restricted and authenticated via IAM. The requests will be authorized before invoking the Lambda at the API Gateway level.

If you need to access the caller's identity inside the Lambda route handler, you will need to use overrides to configure your route to authorize via Cognito User Pools, which you can then pass the bearer token and access the identity inside the handler.

I just tried with providing a header on API call of Authorization: 'Bearer , and now when I hit the API, I got CORS again, these are the errors:

Can you confirm in the API Gateway Console that there are CORS headers applied to default 4xx and 5xx responses? There was an issue in the past where subsequent updates to the REST API would remove these headers, and therefore when the handler/authorizer encounters an error you would see CORS errors in your client application rather than the actual error. For what it's worth Firefox will show the underlying error (if any), where Chrome swallows the response body and promotes the CORS error instead

cwomack commented 1 year ago

@aahmedfaraz, can you confirm the above items regarding CORS headers? Let us know if @josefaidt's answers helped unblock you or if there's more assistance needed from us!

aahmedfaraz commented 1 year ago

Yes Sure, the doc mentioned in the answer helped alot, it is working now ✅, Thanks @josefaidt and @cwomack

aws-amplify / amplify-js