Skip to content

Validate token logic#82

Open
javiert-okta wants to merge 10 commits intoexchange-code-token-logicfrom
validate-token-logic
Open

Validate token logic#82
javiert-okta wants to merge 10 commits intoexchange-code-token-logicfrom
validate-token-logic

Conversation

@javiert-okta
Copy link
Contributor

@javiert-okta javiert-okta commented Jan 30, 2026

By submitting a PR to this repository, you agree to the terms within the Auth0 Code of Conduct. Please see the contributing guidelines for how to create and submit a high-quality PR for this repo.

Description

The following PR adds logic to the step three component that exchanges validates the received token and finally decodes it on the next step. The changes include:

  • Move helper functions on validate endpoint to utils file
  • Refactor validation response
  • Add loading state to Button component and spinner animation
  • Add error icon for error validation on UI
  • Add error component for Step Four
  • Pass data to Step Three and Step Four
  • Automatically save local storage data on every change

Screenshots:

Screenshot 2026-02-26 at 4 30 35 PM Screenshot 2026-02-26 at 4 41 28 PM

References

Link to Figma design

Testing

IMPORTANT:

The functionality for OIDC can only be tested on a specifically controlled url which is why the following link should be used:
OIDC TESTING URL

  • Verify that the app starts with the step one selected and has the correct request info on display
  • Click on Start and verify you are redirected to the auth0 tenant login page
  • Login and verify that the response is seen on the step two and is visible
  • Step one is now hidden
  • Click on Exchange and confirm the token is received and displayed
  • Step two is now hidden
  • Step three shows the token
  • The View on JWT button redirects to jwt.io with the same token
  • Click on Verify
  • Step three is hidden
  • Step four shows the token was validated
  • The decoded JSON structure is shown
  • Click on Start Over
  • The debugger app is restarted and step one shows again
  • Test on mobile the same process and confirm the styling and functionaliy is ok

Checklist

  • I have added documentation for new/changed functionality in this PR or in auth0.com/docs
  • All active GitHub checks for tests, formatting, and security are passing
  • The correct base branch is being used, if not the default branch

@github-actions
Copy link

@github-actions
Copy link

github-actions bot commented Feb 2, 2026

});
}, [currentStepIndex]);

useEffect(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This runs on every state change. Maybe you can debounce this for performance?

<div className={styles.button_arrow}>
<ArrowIcon />
</div>
{isLoading ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the button also be disabled when loading?

method: requestData.method,
body: JSON.stringify(bodyFromRequestData(requestData)),
});
setIsLoading(false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't run if the request fails.

You could use a finally to always reset the loading state

try {...}
catch() {...}
finally {
  setIsLoading(false);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants