Storing and using JWT with DataFetches

Developer Support
1

What is the recommended way to store and use my apps JWT for DataFetches? I’ve tried storing it in localStorage and they setting my Authorization header with a dynamic code value of
`

Bearer ${localStorage.getItem('idToken')}

`
That works in Plasmic Studio but not on my localhost after it has synced.

I have the JWT in a cookie as well but that seemed even harder to get to work than localStorage.

I got the custom Auth working. Is there a way to attach a custom value to the logged in user?

I looked at setting a state variable on my login page and the referencing that but I couldn’t get that to work either.

What is the recommended way to do this? How have others done it?

Screenshot 2023-04-05 at 10.04.00 PM.png
Screenshot 2023-04-05 at 10.04.00 PM.png1920×1080 317 KB

2

Can one page access the $state from another page? Is there any global state?

3

So I actually was able to get this to work using localStorage. Any other ideas though?

4

An annoying thing about this approach is that to get a response to work with in Plasmic Studio I have to enter devtools and set my localStorage value manually.

Is there a better solution that is more of a native Plasmic way to solve this?

5

hi! how is the JWT token procured?

6

from my login endpoint.

7 
(function () {
  function deleteCookie(name) {
    document.cookie =
      name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
  }

  const data = {
    email: $state.email.value,
    password: $state.password.value,
  };
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
    .then((res) => res.json())
    .then((res) => {
      if (res.error) {
        deleteCookie('plasmicUserToken');
        deleteCookie('elevateJWT');
        deleteCookie('elevateRefreshToken');
        deleteCookie('email');
        return;
      }

      window.location.href = '/';

      if (res && res?.plasmicUser && res?.elevateUser) {
        const { plasmicUser, elevateUser } = res;
        const { email } = plasmicUser;
        const { idToken, refreshToken } = elevateUser;
        localStorage.setItem('plasmicUser', JSON.stringify(plasmicUser));
        localStorage.setItem('elevateUser', JSON.stringify(elevateUser));
        localStorage.setItem('idToken', idToken);
        localStorage.setItem('refreshToken', refreshToken);
        localStorage.setItem('email', email);
        localStorage.setItem('Authorization', `Bearer ${idToken}`);
      }
      return res;
    })
    .catch((error) => {
      console.error(error);
    });
})();
8

are you doing everything inside Plasmic at the moment? or do you have a custom app host?

9

with a custom app host, you can probably do something like…

  1. User must log in before rendering /plasmic-host
  2. Login form logs in user, and sets the JWT token in localStorage, and then renders <PlasmicCanvasHost /> , which will render either the studio or the artboard. But now both studio and artboards are on the same origin and should all have access to the JWT token in localStorage.
10

everything inside plasmic at the moment.