Why does AWS Cognito Managed Login return "Invalid CSRF token" when login is attempted from an earlier tab/window?
Hello,
I'm using AWS Cognito Managed Login for authentication in my application. I'm encountering an issue related to CSRF protection when multiple login pages are opened in separate tabs.
Here’s what happens:
- I open the Cognito Managed Login page from my application in Tab A/Window A.
- Then, I open another login page (same Managed Login) in a new Tab B/Window B.
- After that, I go back to Tab A/Window A and try to log in.
- Cognito returns: "Invalid CSRF token" error.
What I Understand (So Far):
- Cognito sets a XSRF-TOKEN cookie on its domain (auth.us-east-1.amazoncognito.com) during login.
- This token is associated with a state parameter and checked when redirecting back.
- Opening a second Cognito login page causes a new token to overwrite the original (since cookies are shared across pages).
- When the user logs in from the first page, the stored token and the browser cookie no longer match → causing CSRF validation to fail.
Still, I’m trying to understand how to avoid this error in a multi-tab/multi-page scenario.
Thanks in advance!
Example Managed Login URL: https://avp***.auth.us-east-1.amazoncognito.com/login?client_id=...&prompt=login&redirect_uri=...&response_type=code&scope=openid+profile+aws.cognito.signin.user.admin&state=...
- Newest
- Most votes
- Most comments
The AWS answer is not helpful. Managed Login as the product name suggests is completely on the AWS side. Why would an app have to manage/detect the number of tabs? That's beyond the responsibility of the app. A better solution is to be able to customize the error message. I want to modify the error to say "Your login session has timed out. Please refresh your browser". No non-technical user is going to know what a CSRF token is. This is surfacing a tech debt up to the customer's clients.
There are a lot of improvements to Managed Login that needs to be implemented to be able to fully serve the client. Another example is Fonts. Why cant I simply use a font that matches my app? Part of the security practices that we tell our users today is to be suspicious of sites that try to scam/phish them by looking at certain inconsistency in email/link/webpages. If fonts are different that's a red flag. Same thing with input field styles. Bootstrap, is one if not the most popular css framework out there. Why can't I make my login page use this css framework or any css framework for that matter?
answered 9 months ago
Implement a refresh mechanism: When a user switches back to an older tab, you could implement a mechanism to refresh the login page, ensuring it has the most recent CSRF token.
How do you do this when the authentication is managed by AWS ?
answered a year ago
It's also not just multiple tabs/pages. When the login sits there for a bit of time the CSRF token error message appears too. This happens in the following scenarios:
- User is done for the day, the app redirects you to the login page, sits there until the morning. User logs in > CSRF error.
- New day, opens a new login page, (gets coffee, impromptu office worker chat, whatever distracts you). User logs in > CSRF error.
answered 9 months ago
Relevant content
asked a year ago
