Skip to content

Exchange code token logic#81

Open
javiert-okta wants to merge 12 commits intoredirection-server-logicfrom
exchange-code-token-logic
Open

Exchange code token logic#81
javiert-okta wants to merge 12 commits intoredirection-server-logicfrom
exchange-code-token-logic

Conversation

@javiert-okta
Copy link
Contributor

@javiert-okta javiert-okta commented Jan 28, 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 two component that exchanges the code received to an auth token. The changes include:

  • Add method to restart process and delete local storage data
  • Add method to handle the code exchange and show success or error according to the design and request response
  • Add "rawjson" type to Codeblock
  • Generate request data for step two

Screenshots:

  • Erro verifying UI
Screenshot 2026-02-26 at 3 59 06 PM
  • Received Token
image

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

@github-actions
Copy link

JSON.stringify({ ...restartDebuggerStepsData, ...restartAuthData }),
);
setAuthData(restartAuthData)
setDebuggerStepsData(debuggerStepsData)
Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't this be restartDebuggerStepsData instead of debuggerStepsData?

try {
const response = await fetch("api/code_to_token", {
method: requestData.method,
body: JSON.stringify(bodyFromRequestData()),
Copy link
Contributor

Choose a reason for hiding this comment

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

Missing a content type, which is mandatory for json bodies

const response = await fetch("api/code_to_token", {
    method: requestData.method,
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(bodyFromRequestData()),
  });

idTokenHeader,
};
});
const statusString = `'HTTP/1.1 ${data.result.response.statusCode}`;
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove leading quote. '

const statusString = `HTTP/1.1 ${data.result.response.statusCode}`;

const jsonResponseString = `Content-Type: application/json\n${JSON.stringify(result, null, 2)}`;
setExchangeResult(`${statusString}\n${jsonResponseString}`);
} catch (error) {
const statusString = `'HTTP/1.1 500`;
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove leading quote. '

const statusString = `HTTP/1.1 500`;

authCode: null,
stateToken: null,
};
localStorage.setItem(
Copy link
Contributor

Choose a reason for hiding this comment

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

Try/Catch localStorage, this can be disabled/full and throw.

}
const data = await response.json();
const result = data.result.response.body;
const payload = result.id_token.split(".")[0];
Copy link
Contributor

Choose a reason for hiding this comment

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

You're getting the header of the jwt, not the payload, the naming is confusing and wrong.

const header = result.id_token.split(".")[0];

Should we verify the token is valid before splitting?

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