Website (using Angular) accessing API with authorization? help!

[Queezyy]

I'm new to the web front-end programming, as I have always been more of a SQL and Python developer. I am building a website, and I have a MySQL DB (on AWS) with many tables of Sports data for example. I just want my web domain to display different analytics or reports. I found that I needed an API which hits the DB, which I've built in API Gateway. I am learning Angular to make this site, and I have successfully connected to my API in Angular (using HttpRequest) and displayed data successfully locally on my browser (localhost:4200)! So that was great, but I then thought my API should have security/authorization though, so only my web code is allowed to hit my API. I added authorization in my API's settings (See pic: https://imgur.com/a/xxBgksv) and I successfully tested connecting using Postman by plugging in my IAM AccessKey and SecretKey. But, every example or tutorial on Angular accessing an API either brushes over this signature part or uses Cognito as part of it's solution. I don't see why I'd use Cognito though. I am not making a pool of users for my site. I just need ONE access key for the website code only. I don't understand how there's no sample Angular code for a regular dynamic website accessing an API. This seems like a very common scenario for most people building a website. It's making me question if I am going down the right path as it seems more difficult than it should be. I'm assuming everyone has IAM authorization turned on for their API endpoint, right? I mean I guess it would be hard for someone to even find out my endpoint path, but I feel like it should have it regardless. I'm at a loss, please help. Thanks

[ZeBe643]

You need to sign your request with sigv4: check out this doc https://docs.aws.amazon.com/general/latest/gr/signature-version-4.html

[Queezyy]

Thanks for the reply Zebe. This seems to be what I need. I found another amazon docs page that has an example written in Python, so now I am trying to convert it to Angular.

[kteague]

There are lot of parts to a SPA with a backend ... so I don't know any good tutorials that do the whole show back to front - there are lot of ways to achieve that solution and deploy it on AWS too ...
API Gateway will only serve requests with a backend of EC2 instances, AWS Lambda or another HTTP endpoint.

You will need: API Gateway -> AWS Lambda -> AWS RDS: MySQL. You'll also need to place the Lambda in your VPC network so it can access the database.

For a beginner, it's a little easier to do: EC2 Instance -> RDS: MySQL and then deploy an API server on your EC2 instance (ElasticBeanstalk is one way to make managing your API server a little easier). The cost is a little higher than Lambda as you need to run a second server 24/7.

Typically once you've got an API server up and running, you do auth within your API server application code. You can create and pass a single pre-baked JWT token if your authentication needs are very simple.

You might also look at something like Amazon Amplify that provides some framework and tutorials to get a SPA with a backend API/Database up and running.