react-admin useGetIdentity return only the fullname, id is undefined avatar is undefined-CodePudding

my app is based on tutorial of React-admin and loopback 4 as a backend

I'm trying to get the id of the logged in user, the login mechanisms works well but when i try to access the id of the logged in user it remains undefined.

in my authProvider, my login function is

login: ({ username, password }) => {
    const request = new Request(
      process.env.REACT_APP_API_URL   '/users/login',
      {
        method: 'POST',
        body: JSON.stringify({ email: username, password }),
        headers: new Headers({ 'Content-Type': 'application/json' }),
      },
    );
    return fetch(request)
      .then((response) => {
        if (response.status < 200 || response.status >= 300) {
          throw new Error(response.statusText);
        }
        return response.json();
      })
      .then((auth) => {
        localStorage.setItem(
          'auth',
          JSON.stringify({ ...auth, fullName: username }),
        );
      })
      .catch(() => {
        throw new Error('Network error');
      });
  },

and I use this in one component:

const CurrentUserId = ({ id }) => {
  const { identity, isLoading: identityLoading } = useGetIdentity();

  console.log(identity);
  if (identityLoading) {
    return <span>Loading...</span>;
  } else {
    // find the user_id from the identity
    const user_email = identity.fullName;
    const user_id = identity.id;

    return <span>id: {user_id}</span>;
  }
};

but the I console.log returns

{id: undefined, fullName: '[email protected]', avatar: undefined}

I followed the instructions presented here https://marmelab.com/react-admin/AuthProviderWriting.html https://marmelab.com/react-admin/useGetIdentity.html

any ideas how to retrieve the id?

thanks a lot

CodePudding user response：

If you receive a JWT token from the server, you need to decode it and store it like this:

import jwtDecode from 'jwt-decode' 
...
function saveLBToken({ token } : { token: string }) {
  const decoded = jwtDecode(token) 

  if (decoded && typeof decoded === 'object') { 
    sessionStorage.setItem(LB4_TOKEN, JSON.stringify({ token, ...decoded })) 
  } else {
    console.log('Bad LB token:', decoded)
  }
}

CodePudding user response：

Thanks to MaxAlex answer I ended up using this in my code:

export const authProvider = {
  // authentication
  login: ({ username, password }) => {
    const request = new Request(
      process.env.REACT_APP_API_URL   '/users/login',
      {
        method: 'POST',
        body: JSON.stringify({ email: username, password }),
        headers: new Headers({ 'Content-Type': 'application/json' }),
      },
    );
    return fetch(request)
      .then((response) => {
        if (response.status < 200 || response.status >= 300) {
          throw new Error(response.statusText);
        }

        return response.json();
      })
      .then((auth) => {
        const { id, name, email, exp, iat } = jwtDecode(auth.token);
        if (!id || !name || !email || !exp || !iat) {
          throw new Error('Invalid token');
        }
        if (exp < iat) {
          throw new Error('Token expired');
        }
        localStorage.setItem(
          'auth',
          JSON.stringify({
            ...auth,
            id,
            fullName: name,
            email,
            exp,
            iat,
          }),
        );
      })
      .catch(() => {
        throw new Error('Network error');
      });
  },