Run side-effect on every 'get' (to rotate a token if necessary)

[PhilipGrefe]

I wonder what the best practice is to run a side effect whenever an atom is read. Could you help me out?

My use case is to have an atom with an always up to date oAuth-token. The should be rotated if necessary, using the following logic:

1. get the token from storage
2. if token is expired -> rotate token using the refresh token
3. return the (potentially updated) token

I tried using the amazing jotai-effect, but it doesn't work. The effect basically never runs, because the token from the storage does not change.

const loginAtom = atom(
  (get) => { // should return an always up to date token 
    get(rotateTokenEffectAtom) // doesn't run because the loginBaseAtom below does not change
    return get(loginBaseAtom)
  }
)

const rotateTokenEffectAtom = atomEffect((get) => {
  const loginBase = get(loginBaseAtom)
  rotateLogin(loginBase) // some function that checks the validity of the token and 
})

[dai-shi]

Thanks for opening up a discussion.
It's a design decision from v0 to intentionally avoid adding effect support.
For now, useEffect should be a canonical solution. There's a hack with .onMount but probably jotai-effect is cleaner. setInterval might be a last resort.
(In the future, we consider adding a new capability in the core, so that jotai-effect can support wider usage. But it won't happen very soon.)

[dai-shi]

There might be a workaround with the current jotai-effect. cc @dmaskasky

[dmaskasky]

How about storing the token on a ref and using a counter to trigger refreshes when the token changes?

function createLoginAtom() {
  const refAtom = atom(() => ({
    token: null
  })
  const refreshAtom = atomWithReducer(
    0,
    s => ++s
  )

  const loginBaseAtom = atom(
    (get, { setSelf }) => {
      get(refreshAtom)
      const ref = get(refAtom)
      ref.token ??= get(loginBaseAtom)
      if (isExpired(ref.token)) {
        queueMicrotask(setSelf) // refresh
        return ref.token = rotateToken()
      }
      return ref.token
    },
    (_, set) => set(refreshAtom)
  )
  return atom((get) => get(loginAtom)
}

[PhilipGrefe]

Thanks for your reply.
My problem is that the token does not change on its own; it only changes when I detect that it's outdated and actively update it. If the token would change on its own, I would not have the issue.

For now, I got lucky because I only need the token in other atom's setter method. Below is my (dirty) workaround solution, making use of atomWithRefresh for simplicity.
If you have another idea, please let me know 😉

Posting it a bit verbose for the reference:

loginBaseAtom = atomWithStorage //... reading, writing and listening to DB

const loginAtom = atomWithRefresh(
  const login = await get(loginBaseAtom)
    if (!login) return undefined // case: not logged in
    if (dayjs().isAfter(dayjs(login.refreshTokenExpiresAt))) return undefined // case: refresh token has expired
    if (dayjs().isAfter(dayjs(login.tokenExpiresAt))) {
      // case: token has expired - we HAVE to rotate it
      try {
        const newToken = await fetchTokensWithRefreshToken(login.refreshToken)
        await db
          .insert(loginTable) // <- side-effect - but the if conditions here break the infinite loop 😌 
          .values({ ...newToken, id: 1 })
          .onConflictDoUpdate({ target: loginTable.id, set: newToken })
        return newToken
      } catch (error) {
        console.error('error rotating token', error)
        return undefined
      }
    } else if (dayjs().isAfter(dayjs(login.tokenExpiresAt).subtract(600, 's'))) {
      // case: token is still valid - we want to rotate it or onFail return the old token
      try {
        const newToken = await fetchTokensWithRefreshToken(login.refreshToken)
        await db
          .insert(loginTable) // <- side-effect - but the if conditions here break the infinite loop 😌 
          .values({ ...newToken, id: 1 })
          .onConflictDoUpdate({ target: loginTable.id, set: newToken })
        return newToken
      } catch (error) {
        console.warn('error rotating token. returning old token instead', error)
        return login
      }
    }
    return login
  },
  async (get, set, newLogin: Login) => {
    await set(loginBaseAtom, { ...newLogin })
  },
)

usage in other atoms:

const anotherAtom = atom(null, async (get, set) => {
  await set(loginWithRefreshAtom)
  const login = await get(loginWithRefreshAtom)
  //... use the (potentially refreshed) login
})

[dmaskasky]

Is rotateToken synchronous? You can see in my solution its being called and returned if isExpired is true. Then all consumers are updated in the next microtask. Perhaps I'm not understanding something.