Skip to content

Step three component#77

Open
javiert-okta wants to merge 8 commits intostep-two-componentfrom
step-three-component
Open

Step three component#77
javiert-okta wants to merge 8 commits intostep-two-componentfrom
step-three-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 one component, which shows the request that will be done to the Auth0 tenant. The changes include:

  • A header component prop for rendering in the codeblock
  • New styling for rendering tokens
  • A way of adding vertical, horizontal or both to the scrolling in codeblock
  • A JWT button to view token in jwt.io

Screenshots

  • Dark theme

Desktop

image

Mobile

image
  • Light Theme

Desktop

image

Mobile

image

References

Link to Figma design

Testing

  • Verify that the step three component matches the design on the figma file (dark/light mode, desktop, tablet and mobile)
  • Verify the Codeblock component has vertical scrolling on mobile
  • Verify the JWT button is clickable and directs to jwt.io with the correct token
  • Verify the verify button is 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

const ViewJWTButton = ({ token }: { token: string }) => {
return (
<div className={styles.button_container}>
<ConfigurationIcon />
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this the right icon?

/>

<p className={styles.description}>
This token is cryptographically signed with the HS256 algorithim.
Copy link
Contributor

Choose a reason for hiding this comment

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

Typo: should be "This token is cryptographically signed with the HS256 algorithm"

cursor: pointer;
color: var(--color_fg_link);
p {
font-family: Aeonik;
Copy link
Contributor

Choose a reason for hiding this comment

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

--font-mono


const ViewJWTButton = ({ token }: { token: string }) => {
return (
<div className={styles.button_container}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Should be a <button>

or

<a href={`https://jwt.io/#token=${token}`} target="_blank" className={styles.button_container}>
  <ConfigurationIcon />
   View on JWT.IO
</a>

import { Codeblock } from "../../codeblock/codeblock.component";
import styles from "../debugger-steps.module.scss";
import ConfigurationIcon from "features/common/icons/configuration-icon";
const REALLY_LONG_TOKEN =
Copy link
Contributor

Choose a reason for hiding this comment

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

Weird variable name, why not just TOKEN?

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