docs: Clarify Client SDK tutorial documentation

[tr0b]

[disclaimer: I don't know if this is the right place to post this, or if I chose the right category]

I'm currently developing a simple Logto Client SDK for Clojure (re-frame SPA framework) and I've been mostly guiding myself with this Implement Client SDK documentation, based in Vanilla JS. So far I'm almost finished (The authentication seems to work; auth token, refresh token, id token are successfully stored on sign-up/sign-in with my current implementation, authorization is still wip) but the way certain details are written in this tutorial creates some confusion for me.

What problem did you meet?

Take for example, this section https://blog.logto.io/implement-client-sdk#handle-user-sign-in-callback

access_token: The default authorization code returned by the authorization server. Can be used to call the user info endpoint and retrieve authenticated user information.

and then the code for saving the token is shown, as below:

private async saveTokens({refreshToken, idToken, accessToken}) {
  this.storage.setItem('refreshToken', refreshToken);
  this.storage.setItem('idToken', idToken);

  // opaque access token without resource indicator specification
  this.accessTokenMap.setItem('', accessToken)

}

But then later in the authorization section (https://blog.logto.io/implement-client-sdk#get-access-token-for-protected-resource-authorization) when the tutorial mentions how to to integrate the getAuthToken function (along with the refresh token mechanism), the author writes the following code snippet:

async getAccessToken(resource?:string, scopes?: string[]) {
  if (!this.idToken) {
    throw new Error('User not authenticated');
  }

  const accessTokenInStorage = this.accessTokenMap.getItem(`${resource}:${scopes.join(_)}`); // WIth its current implementation per the tutorial, this will return a string e.g. "Qdefs6FMAetUltw3dC5H_LZ4JPgSrKYj3ZL5vx1Kfz9"

  if (accessTokenInStorage && accessTokenInStorage.expiresAt > Date.now() / 1000) { // There's no expires_at value here
      return accessToken.token;
  }

  return await this.getAccessTokenByRefreshToken(resource, scopes);
}

It isn't immediately obvious that, the developer needs to store both the token AND the expires_in (or expires_at, I'm also confused here) attribute in the opaqued/resources:scope access-token session value e.g. like this

{
"": {token: Qdefs6FMAetUltw3dC5H_LZ4JPgSrKYj3ZL5vx1Kfz9, expires_in: 3600}
}

Describe what you'd like Logto to have

Maybe the blog entry should be updated to explain a bit further how to properly store the access token in the session?

[github-actions]

This issue is stale because it has been open for 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.