How to show user information (name or avatar) on appBar? - reactjs

Question

I want to show logged user information (name, avatar, role) on appBar. I created some custom components : layout, appBar and userMenu How can I pass the logged user data to the userMenu or appBar component?

Answer 1

I believe that in the getIdentity method of your Auth provider you want to return an object with this information in your Promise.resolve. So it is somewhat indirect and not done within a custom AppBar itself.
Here is a snippet example from an auth provider:
getIdentity: () => {
return Promise.resolve({
id: userName,
fullName: userFullName,
avatar: <Avatar />
});
The Avatar aspect is optional of course and React-Admin will place its own avatar there if you leave that out.

Answer 2

One approach would be retrieving the user information from the authentication storage you are using on the client-side.
In my case, I'm showing user initials instead of the standard avatar in the component by pulling the information from the JWT token stored on localStorage.
decodeJwt(localStorage.getItem('token')).fullname
Probably not the best approach but worked for my use case.

Answer 3

See https://github.com/marmelab/react-admin/issues/7042
This is what worked for me in my AuthProvider. I am using session-based authentication and don't have a jwt client side - so I expose an API on the server that provides the logged in user info. I don't have an avatar so I pass the user initials (only the first letter appears on the page)
getIdentity: async () => {
const userinfo = await UserService.getUserInfo();
const {id: id, userName: fullName, firstLastInitials: avatar} = userinfo;
console.log(`getIdentity UserService user name is ${fullName}'`);
return Promise.resolve({ id, fullName, avatar });
}
and
const getUserInfo = async () => {
const apiUri = HostApiServer(); // GET SERVER URI
const mainResponse = await fetch(`${apiUri}/loggedInUser`, {
method: 'GET'
});
const resp = await mainResponse.json();
console.log(`UserService - GOT user info from ${apiUri}`);
console.log(JSON.stringify(resp));
return resp;
};
const UserService = {
doLogin,
doLogout,
isLoggedIn,
getToken,
getUserInfo
};