feat: add interactivity to quickstarts

[darrickyong]

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

Describe the purpose of this PR along with any background information and the impacts of the proposed change. For the benefit of the community, please do not assume prior context.

Provide details that support your chosen implementation, including: breaking changes, alternatives considered, changes to the API, etc.

If the UI is being changed, please provide screenshots.

This PR adds interactivity to quickstarts for certain frameworks:

• React
• Vue
• Angular
• NextJS
• VanillaJS
• Svelte

References

Include any links supporting this change such as a:

• GitHub Issue/PR number addressed or fixed
• Auth0 Community post
• StackOverflow post
• Support forum thread
• Related pull requests/issues from other repos

If there are no references, simply delete this section.

Testing

Describe how this can be tested by reviewers. Be specific about anything not tested and reasons why. If this library has unit and/or integration testing, tests should be added for new functionality and existing tests should complete without errors.

Please include any manual steps for testing end-to-end or functionality not covered by unit/integration tests.

Also include details of the environment this PR was developed in (language/platform/browser version).

• This change adds test coverage for new/changed/fixed functionality

Testing was performed locally with manage.local to confirm that applications were properly created with the arguments provided.

Pressing the Copy button copies the unmasked client_secret

Tested this also by updating the branch in Mintifly and observing the change at https://tus.auth0.com/docs/quickstart/webapp/nextjs and https://manage.tus.auth0.com/

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]

Summary

Status	Count
🔍 Total	36
✅ Successful	24
⏳ Timeouts	0
🔀 Redirected	6
👻 Excluded	6
❓ Unknown	0
🚫 Errors	0
⛔ Unsupported	0

Redirects per input

Redirects in main/docs/quickstart/spa/angular/index.mdx

• [200] https://docs.npmjs.com/downloading-and-installing-node-js-and-npm | Redirect: Followed 1 redirect resolving to the final status of: OK. Redirects: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm --> https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/

Redirects in main/docs/quickstart/spa/react/index.mdx

• [200] https://docs.npmjs.com/downloading-and-installing-node-js-and-npm | Redirect: Followed 1 redirect resolving to the final status of: OK. Redirects: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm --> https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/

Redirects in main/docs/quickstart/spa/svelte/index.mdx

• [200] https://docs.npmjs.com/downloading-and-installing-node-js-and-npm | Redirect: Followed 1 redirect resolving to the final status of: OK. Redirects: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm --> https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/

Redirects in main/docs/quickstart/spa/vanillajs/index.mdx

• [200] https://docs.npmjs.com/downloading-and-installing-node-js-and-npm | Redirect: Followed 1 redirect resolving to the final status of: OK. Redirects: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm --> https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/

Redirects in main/docs/quickstart/spa/vuejs/index.mdx

• [200] https://docs.npmjs.com/downloading-and-installing-node-js-and-npm | Redirect: Followed 1 redirect resolving to the final status of: OK. Redirects: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm --> https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/

Redirects in main/docs/quickstart/webapp/nextjs/index.mdx

• [200] https://docs.npmjs.com/downloading-and-installing-node-js-and-npm | Redirect: Followed 1 redirect resolving to the final status of: OK. Redirects: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm --> https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/
  Full Github Actions output

[darrickyong]

Adding config to rootStore in order to leverage apiBaseUrl as config.

[darrickyong]

After an app creation, navigating away to another framework will reset the clientId

[brth31]

@darrickyong We should auto-fill both AUTH0_CLIENT_SECRET and AUTH0_SECRET values.

• AUTH0_CLIENT_SECRET can be obtained from the respective app details on the tenant
• AUTH0_SECRET is a random string that the component should auto-generate on the fly. eg: openssl rand -hex 32

[mikemimik]

@brth31 given the internal conversation that we had, we will not include 'secret' values yet.

ℹ️ We'll work together to scope out work to create this UI/UX for our customers seperately as an n+1 to this work.