🐛 BUG - Reactions not working (Expired JWT token)

[JackDevAU]

Cc: @bradystroud @KristenHu @Aibono1225 @adamcogan @drwharris

Hi Team,

("Copying" from email - RE: Update Rule “autonomy-mastery-and-purpose/rule” #8469)

Describe the Bug

So, I did some digging and found that if you already have something favourited you can’t add another. If you have nothing favourited, you can add something. The issue seems to be an API call returning a 401 as you can see in the following screen shot

Upon further investigation, signing out and signing back in seems to allow you to react to rules again! This would likely mean the error is to do with an expired user token.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.ssw.com.au/rules/fundamentals-of-prompt-engineering/
2. Be logged into Rules
3. Scroll down to the bottom and React
4. See reaction reset

Expected Behavior

• A reaction should increment if you haven't reacted to it before!
• When a user has an expired JWT token - we should refresh it or log them out

Tasks

• [x] Investigate
• [ ] Fix

Screenshots

Figure: Error that occurs when you try and add a favourite if you already have one.

Thanks!

[KristenHu]

Update: I've tried to add the function to refresh token, but I cannot reproduce the bug to test currently.

[Aibono1225]

Update: The Rules Functions use auth0's id_token for authentication.

I tested the issue locally with my own auth0 account. After enabling refresh token and waiting for the original id_token to expire, I successfully obtained a new id_token using the /oauth/token API. With this new token, I was able to call the Reactions API successfully.

However there is a potential issue with this approach. The /oauth/token API only provides the new id_token and doesn't update the token claims stored in local storage. This means that once the old token expires, we need to obtain the new id_token every time we call a Rules API, which doesn't seem to be a good practice.

Figure: The claims are not updated, so we will still get an expired token if we use const claims = await getIdTokenClaims();

[Aibono1225]

After some investigation, the getAccessTokenSilently method seems to be able to refresh id_token in local storage when the cacheMode is set to 'off'

    const token = await getAccessTokenSilently({
      audience: 'xxx',
      scope: 'openid profile email offline_access',
      grant_type: 'refresh_token',
      cacheMode: 'off',
    });

[Aibono1225]

Done - I've enabled the "refresh token" feature in the Auth0 dashboard. Now, the token will work as follows:

• Get an id_token and refresh_token when the user first logs in
• Once the id_token expires, the refresh_token will be used to fetch a new id_token
• Ask the user to "log in again" if the refresh token expires

Figure: We have a refresh token!