Cloudfront disrupting authentication with JSON Web Token

Question

Short version: my jwt token is not surviving a refresh when pointing to domain behind Cloudfront.

Not sure if this is best posted here or on stackoverflow, but since I think I've isolated the problem to AWS Cloudfront, I thought I'd start here.

---

My setup:

• Route 53 DNS settings point to Cloudfront distribution
• 1 Cloudfront behavior takes api/* traffic and sends it to ELB EC2 instance hosting node/express app
• 1 Cloudfront behavior takes default traffic and sends it to s3 bucket where Vue single page app files live
• Node/express app is using Passport.js for authentication with JWT strategy
  • Elastic Beanstalk

On my local, everything is perfect. When I run on my staging site, and visit my profile page, all user data fills in the appropriate fields. When I refresh the page, something happens with the JWT token and all user data is lost. This is happening on other pages behind authentication as well.

Instead of pointing my api calls to staging (which is behind cloudfront) I tried pointing my api directly to my ec2 instance and everything worked perfectly.

So, with the problem isolated to Cloudfront, what do I need to do (do I need to forward certain headers) in order for the JWT token to be passed successfully each time?

Answer 1

If you are sending your JWT in a header, then your assumption was right, you have to tell CloudFront to forward the header to the origin. It can be achieved by changing Cache Based on Selected Request Headers option in your cache behavior to one of these values:

• All. This will forward all headers to the origin;
• Whitelist. Then you can add your header name you use to send the JWT (most common is Authorization).

Please be aware that this option has two functionalities:

1. to forward specific/all headers to your origin
2. to cache objects based on those header.

Make sure you understand how this might impact your cache behavior. You can read more about it at Caching Content Based on Request Headers

There is another option you can configure in your cache behavior which I almost always use : Object Caching. You can set the object caching to Use Origin Cache Headers this way your application can control response caching. This Setting might be availabable or not based on your origin(S3/ALB/EC2) and/or your Cache Based on Selected Request Headers value.

Hope this will help.