“Missing Authentication Token” — CloudFront/APIG Troubleshooting

Originally published at https://lukemiller.dev/blog/missing-authentication-token-cloudfront-apig-troubleshooting-252d8a33c412/

Adding an API Gateway deployment to AWS CloudFront should be a very simple activity in your day, and yet, here you are! You hit the Missing Authentication Token error and are possibly about to lose your mind. Let me help.

AWS CloudFront

This one has foiled many developers, so you’re in good company. If you’re sure you set everything up correctly and still get the dreaded Missing Authentication Token response, then take just one look at the popular AWS Forum discussion on this and you’ll see how often this is an issue for people. What’s more frustrating is that almost everyone points to the same resource to help people, this, which does not address what I’ve found to be the most common culprit of the 403 response.

The number one issue is mistyping the API Gateway url string and not including the stage. I know, we’re programmers, we would never make a slily misteak like that. But, the second most common reason for this error is a misunderstanding of the relationship between the CloudFront Behavior Path and the APIG Resource Paths.

Let’s troubleshoot this from the beginning.

APIG Setup

First, make sure you:

  • deployed your Resources to a Stage
  • copied the full url path to past in the CloudFront Origin

Next, confirm you have NONE for the Authorization of the method you’re trying to trigger through CloudFront.

See that “NONE” under the red box? That’s what yours should say.

If you have Auth enabled, and that’s purposeful, then this post isn’t for you. Sorry, and good luck!

Now that we deployed, copied the url string, and ensured the authorization for the method is NONE, we have completed the handy tips from the AWS resource. Yet we still have an issue.

Most commonly, the issue is incorrect Behavior Paths we set up for this API Origin in the CloudFront distribution.

Setting Up APIG Origin in CloudFront

Let’s say this is our API Gateway:

API Gateway

For this scenario, I want the whole API available in CloudFront, so if yours only needs one or two methods from an API then follow along to find the pattern that’ll be the same for either implementation.

My CloudFront Origin for this API Gateway looks like:

CloudFront Origin for my API Gateway

Remember we copied the whole endpoint url, including the stage /prod. CloudFront then chops off the https://, and puts the route path /prod in the Origin Path. Change the Origin ID to something easier for you to know what this API does.

In the dashboard, you should see this:

Origin in the dashboard

Add Behaviors

Now for the Behaviors! Here is where I often find issues that trigger the Missing Authentication Token response.

The Path Pattern you fill in must match your API Gateway resources. Here are mine again:

My API resources

That means, the only Path Patterns I can enter that will trigger this API are:

  • /posts
  • /users
  • /users/favorites OR /users/*

That’s it. I can’t alter what comes before them in the CloudFront Path either. I can’t enter api/users as the Behavior path thinking that I’m mapping that somehow to hit the API Gateway. If I don’t have a resource called /api in my API Gateway, then it can’t be a Behavior path.

When you enter the Path for the Behavior, like /users, and then hit that with a request, CloudFront goes: “Oh, I see you’re going to <cloudfront url>/users, and I have a Behavior for /users pointing to an Origin that receives all /users requests. I’ll take you to the Origin <api end point /prod>/users.” So, the Behavior path maps the request to the Origin, but also appends the Behavior path to that Origin. So <cloudfront url>/users becomes <origin path>/users, which in our case is a valid API resource.

The Behavior path maps the request to the Origin, but also appends the Behavior path to that Origin

Misunderstanding these Behavior routes is where the Missing Authentication Token error can easily occur. It’s incorrect to think we can put anything in the Behavior Path Pattern and that CloudFront would treat it like, “oh, I see you’re going to <cloudfront url>/anything/resource, and I have an Origin for that so I’ll take you to <api end point>”. It’s not just mapping the Behavior path to an Origin. It’s mapping the Behavior path to an Origin and then appending that Behavior path to the Origin.

It’s a subtle difference. We’re not pairing any Behavior path we want to an Origin, we’re using a path from an Origin and telling CloudFront to use that Origin with this path whenever this path is requested.

I’m repeating myself. Hopefully it’s sinking in.

In my example I put the entire APIG deployment stage as the CF Origin <key>.execute-api.us-east-2.amazon.com/prod. So my CF Behavior paths will need to be paths in my API Gateway that start from /prod. If I made the Origin /prod/users, then the only Behavior paths I could add are / (which would be just the Origin of /prod/users) and /favorites. Since the Origin was set as /prod/users there is no way I can create a Behavior path to access the /posts API resources.

One last time: the CF Behavior paths are the exact APIG resource paths you want accessed, and they’re appended to the Origin path you created for the APIG.

So, if you’re getting the Missing Authentication Token response from your CloudFront/API Gateway endpoint, make sure you:

1- Deployed your resource to a stage

2- Didn’t misspell the API endpoint or leave out the stage when entering it into the CloudFront Origin

3- The method’s AUTH setting is NONE

4- Enter a path in the CloudFront Behavior that, when appended to the Origin, matches the exact path in your API Gateway

Thanks!

Working towards master-status for all things front-end web development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store