Skip to content

Step four component#78

Open
javiert-okta wants to merge 10 commits intostep-three-componentfrom
step-four-component
Open

Step four component#78
javiert-okta wants to merge 10 commits intostep-three-componentfrom
step-four-component

Conversation

@javiert-okta
Copy link
Contributor

@javiert-okta javiert-okta commented Jan 16, 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 the step four component, which shows the decoded token payload. The changes include:

  • Adds a new variant prop for button to handle two different styles
  • Update codeblock types to avoid impossible states
  • Update codeblock to render json response
  • Update values on the globals styling scss file

Screenshots

  • Dark theme

Desktop

image image

Mobile

image
  • Light Theme

Desktop

image image

Mobile

image

References

Link to Figma design

Testing

  • Verify that the step four component matches the design on the figma file (dark/light mode, desktop, tablet and mobile)
  • Verify the Codeblock component has horizontal scrolling on mobile
  • Verify the start over and log out buttons are accessible and clickable

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
Copy link

@github-actions
Copy link

<Codeblock
title="Decoded Token Payload"
type="json"
json={JSON.parse(JSON_EXAMPLE)}
Copy link
Contributor

Choose a reason for hiding this comment

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

You parse the JSON to then stringify it again on line 76 of ‎src/features/debugger/components/codeblock/codeblock.component.tsx

Copy link
Contributor

Choose a reason for hiding this comment

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

The type also expect a JSON string, not a parsed object

styles.code_block,
type === "token" && styles.vertical_scroll_container,
type === "request" && styles.horizontal_scroll_container
type === "token" || type === "json" && styles.vertical_scroll_container,
Copy link
Contributor

Choose a reason for hiding this comment

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

Add parentheses around the ||, eg

(type === "token" || type === "json") && styles.vertical_scroll_container,
(type === "request" || type === "json") && styles.horizontal_scroll_container,

&& has precedence, otherwise it would evaluate as type === "token" || (type === "json" && styles...)

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