how to use /.auth/me reliably

Question

I am running a webapp as a docker container in azure app service.
I configured active directory for authentification which then redirects to the app url.
Since the app requires the username, I use the /.auth/me api endpoint to fetch the username, however,
this only works sometimes and about 50% of the time it just returns an empty list.
It doesn't happen for specific users either. if I open the app, it sometime works and sometimes doesn't.

I use this javascript code to fetch the data:

await fetch("/.auth/me")
  .then(function(response) {return response.json();}).then(function(body) {return body;})

The only other reference to this issue I could find is this: https://stackoverflow.com/questions/56111020/easy-auth-returns-empty-response-for-some-people

but it seems this is still an issue almost 3 years later!

Does anybody know how to reliably fetch the user information?

Answer 1

Hi anonymous user,

If you are missing some permissions in your shared access signature, you may not get all of the data. Make sure the following are added:

Allowed services: Blobs
Allowed resource types: Container, Object
Allowed permissions: Read, Write, List, Create

There was also a bug reported related to the docker containers wiping away user data. With this bug, the middleware container handling the authentication on Linux App Services restarts and loses its tokens, and one workaround is to use a blob storage token which means that the Azure Middleware Container will store the tokens in a blob storage instead of on disk and thereby prevent them from restarting. The information is only wiped away on Linux and on Windows the restart will work as expected. If you need to reuse the information of current user through /.auth/me, you need to record the authMe information through code after the first log in. See: Restarting Azure App Service resets /.auth/me

Are you specifying the userDetails property? The documentation also has several examples of how to get the data using "await fetch('/.auth/me')" and grabbing either the client principal object that stores the userDetails, or getting the userDetails separately.

async function getUserInfo() {  
  const response = await fetch('/.auth/me');  
  const payload = await response.json();  
  const { clientPrincipal } = payload;  
  return clientPrincipal;  
}  
  
console.log(getUserInfo());  

This blog post also has a good example of this:

async function getUsername() {  
    // call the endpoint  
    const response = await fetch('/.auth/me');  
    // convert to JSON  
    const json = await response.json();  
    // ensure clientPrincipal and userDetails exist  
    if(json.clientPrincipal && json.clientPrincipal.userDetails) {  
        // return userDetails (the username)  
        return json.clientPrincipal.userDetails;  
    } else {  
        // return null if anonymous  
        return null;  
    }  
}  

Let me know if any of this helps.