Decoding ID Token Failed As the ID Token is Not Yet Set in the State (Intermittent Issue)

[ThaminduDilshan]

Describe the issue:

This issue is noticed in the Asgardeo react native sample application, which is using the auth-js SDK through Asgardeo react native SDK. This is a intermittent issue which only happens time to time.

In the React native sample application, when a user is redirecting back to the application upon a successful authentication, the UI will hang in the login screen without proceeding to the home page. The following error is noticed in the debugger console.

D: Decoding ID token failed

The user is able to proceed to the landing page if he clicks the login button again.

Code implementation

handleAuthUrl = async (Url) => {
  requestAccessTokenDetails(Url)
    .then(async (token) => {
      this.setState({ ...token, haslogin: true });

      userInformation().then((user) => {
...

Able to resolve this if we add a waiting before invoking the userInformation() function. This shouldn't be needed according to the waits in the SDK implementation.

  requestAccessTokenDetails(Url)
    .then(async (token) => {
      await auth.getAccessToken();

Environment information

• OS: Android 10

---

[ThaminduDilshan]

Debug Session Recording

Kazam_screencast_00009.mp4

Debug Trace

Below is the expected implementation of the React native sample application. handleAuthUrl function is called upon successful reception of the browser redirection.

handleAuthUrl = async (Url) => {
  requestAccessTokenDetails(Url)
    .then(async (token) => {
      this.setState({ ...token, haslogin: true });

      userInformation().then((user) => {
        this.setState({ ...user });

        getDecodedIDToken().then((decodeID) => {
          this.setState({ ...decodeID });
          this.props.navigation.navigate('SignIn', { token: this.state });
          this.setState({ haslogin: false });
        });
      });
    });
    .catch((error) => {
      console.log(error);
    });
};

When redirecting user back to the application upon a successful authentication, the react native sample application will invoke the requestAccessTokenDetails() function, which will then internally invoke the auth-js requestAccessToken() function. Upon reception of the token, the application will call the userInformation() function which will then internally invoke the auth-js getBasicUserInfo() function. This function will invoke the _authenticationCore.getBasicUserInfo() function.

public async getBasicUserInfo(): Promise<BasicUserInfo> {
        const sessionData = await this._dataLayer.getSessionData();
        const authenticatedUser = AuthenticationUtils.getAuthenticatedUserInfo(sessionData?.id_token);
...

The cause for the Exception should be the id_token is not yet set in the session when executing the above line.

public static getAuthenticatedUserInfo(idToken: string): AuthenticatedUserInfo {
        const payload: DecodedIDTokenPayload = CryptoUtils.decodeIDToken(idToken);
...

public static decodeIDToken(idToken: string): DecodedIDTokenPayload {
        try {
            const words = Base64.parse(idToken.split(".")[1]);
            const utf8String = utf8.stringify(words);
...

This will throw the below exception.

Typescript: Cannot read property 'split' of undefined\n        at Function ...

[jay-jlm]

We are still experiencing this issue with 0.2.20