Basic Auth issue on IE & mobile browsers

Some days ago, QA team reported that they couldn't access our web app on Internet Explorer (and on mobile browsers, too). After login successfully, it is redirected to login page instead of profile page.

As you can see, the login response as image bellow is totally correct with access token

Login response

But unfortunately, when call API to get user profile, request header still is Authorization: Basic xxx instead of Authorization: Bearer xyz

Request headers

I don't know it is a feature or a bug :( But as I expected, after passing basic auth, browser should change authorization header from basic to bearer automatically.

Currently I just have 3 solutions:

  • Turn off basic auth: this is simplest solution but client do not like it =))
  • Change authentication/authorization middleware to use custom header, e.g: My-Authorization. This is not standard so I don't like it personally
  • Convince client to use Chrome/Firefox/Safari for demonstration, only use IE for anonymous user => and, yes, we chosen this solution =))