Skip to content

Enhance ThunderID quickstart samples - #52

Merged
brionmario merged 1 commit into
thunder-id:mainfrom
brionmario:flexible-vendor-config
Aug 4, 2026
Merged

Enhance ThunderID quickstart samples#52
brionmario merged 1 commit into
thunder-id:mainfrom
brionmario:flexible-vendor-config

Conversation

@brionmario

@brionmario brionmario commented Aug 4, 2026

Copy link
Copy Markdown
Member

Purpose

  • Added support for redirect-based authentication flow in Next.js, Nuxt, React, and Vue samples.
  • Updated environment variable handling to accommodate both native and redirect flows.
  • Enhanced configuration notices to guide users through setting up redirect URIs and CORS.
  • Improved styling for configuration steps and added documentation links for further assistance.

Approach

N/A

Related Issues

Related PRs

  • N/A

Checklist

  • Followed the contribution guidelines.
  • Manual test round performed and verified.
  • Documentation provided. (Add links if there are any)
  • Tests provided. (Add links if there are any)
    • Unit Tests
    • Integration Tests
  • Breaking changes. (Fill if applicable)
    • Breaking changes section filled.
    • breaking change label added.

Security checks

  • Followed secure coding standards in WSO2 Secure Coding Guidelines
  • Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.

Summary by CodeRabbit

  • New Features

    • Added step-by-step setup guidance across all quickstarts.
    • Added native and redirect authentication flow configuration for Next.js and Nuxt.
    • Added copy buttons for origins and redirect URIs with confirmation feedback.
    • Added flow-specific development setup commands.
  • Documentation

    • Clarified environment variables, security guidance, and configuration steps.
    • Improved StackBlitz launch links and added framework-specific documentation links.
    • Standardized setup instructions around .env.
  • Bug Fixes

    • Development setup now removes placeholder values when creating .env files.

@coderabbitai

coderabbitai Bot commented Aug 4, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Quickstart samples now show structured configuration steps, copyable browser origins, sanitized .env files, clearer environment templates, and documentation links. Next.js and Nuxt samples support native and redirect authentication flows with flow-specific setup.

Changes

Browser configuration guidance

Layer / File(s) Summary
Browser configuration notice
samples/browser/quickstart/src/pages/home.js, samples/browser/quickstart/src/main.js, samples/browser/quickstart/src/style.css, samples/browser/quickstart/.env.example, samples/browser/quickstart/scripts/prepare-dev.cjs, samples/browser/quickstart/README.md
The browser quickstart displays environment, CORS, and redirect URI steps. Origin values support clipboard copying and temporary Copied! feedback. Environment initialization clears placeholder values.

Server and framework quickstart guidance

Layer / File(s) Summary
Express, React, Vue, and Node guidance
samples/express/quickstart/*, samples/react/quickstart/*, samples/vue/quickstart/*, samples/node/quickstart/*
The quickstarts add structured setup notices, redirect values, documentation links, credential guidance, styled configuration groups, and sanitized .env initialization.

Native and redirect flow support

Layer / File(s) Summary
Next.js and Nuxt authentication flows
samples/nextjs/quickstart/*, samples/nuxt/quickstart/*
The samples detect the selected flow, validate flow-specific variables, render conditional redirect guidance, and provide prepare-dev:redirect scripts that update .env.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Developer
  participant QuickstartApp
  participant ConfigNotice
  participant PrepareScript
  Developer->>QuickstartApp: Set native or redirect environment variables
  QuickstartApp->>QuickstartApp: Detect authentication flow
  QuickstartApp->>ConfigNotice: Pass flow state and missing variables
  ConfigNotice-->>Developer: Display flow-specific setup steps
  Developer->>PrepareScript: Run prepare-dev:redirect
  PrepareScript-->>Developer: Write selected flow to .env
Loading

Possibly related PRs

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the enhancement of the ThunderID quickstart samples.
Description check ✅ Passed The description explains the purpose, identifies the implementation scope, and includes the required template sections, although checklist items remain unchecked.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

samples/browser/quickstart/scripts/prepare-dev.cjs

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

samples/browser/quickstart/src/main.js

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

samples/browser/quickstart/src/pages/home.js

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

  • 22 others

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@JayaShakthi97

Copy link
Copy Markdown
Contributor

@coderabbitai, review

@coderabbitai

coderabbitai Bot commented Aug 4, 2026

Copy link
Copy Markdown

@JayaShakthi97 I will review the changes in PR #52.

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@samples/nextjs/quickstart/README.md`:
- Around line 33-34: The README instructions for the redirect-based flow
incorrectly say to comment out four native-flow variables. Update the guidance
near NEXT_PUBLIC_THUNDERID_CLIENT_ID to say users should comment out the three
flow-specific native values—NEXT_PUBLIC_THUNDERID_APPLICATION_ID,
NEXT_PUBLIC_THUNDERID_SIGN_IN_URL, and NEXT_PUBLIC_THUNDERID_SIGN_UP_URL—while
retaining the shared base URL and server secrets.
- Line 24: Update the fenced code block in the README around the opening ``` to
include the dotenv language identifier, resolving the MD040 markdownlint
violation while preserving the block’s existing content.

In `@samples/nextjs/quickstart/scripts/prepare-dev.cjs`:
- Around line 47-49: Update the flow-preparation logic in
samples/nextjs/quickstart/scripts/prepare-dev.cjs lines 47-49 and
samples/nuxt/quickstart/scripts/prepare-dev.cjs lines 47-49 to read envTarget
when it exists, falling back to envExample only when it is missing, before
passing the content to applyFlow; preserve the existing write behavior and
selected flow handling.

In `@samples/nuxt/quickstart/README.md`:
- Around line 33-34: Update the redirect-flow setup instructions near the
native-flow variable guidance to keep NUXT_PUBLIC_THUNDERID_BASE_URL enabled,
and tell users to comment out only the other three native-flow variables before
uncommenting NUXT_PUBLIC_THUNDERID_CLIENT_ID. Ensure the documented environment
configuration provides the base URL required for ThunderIDRoot to render.
- Around line 24-31: Update the fenced environment-variable block in the README
to use the dotenv language identifier, changing the opening fence to ```dotenv
while leaving its configuration entries unchanged.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: bc580e02-5e3d-4c77-9e7d-7aee62056f2c

📥 Commits

Reviewing files that changed from the base of the PR and between c76184f and 1b12d84.

📒 Files selected for processing (34)
  • samples/browser/quickstart/.env.example
  • samples/browser/quickstart/README.md
  • samples/browser/quickstart/src/main.js
  • samples/browser/quickstart/src/pages/home.js
  • samples/browser/quickstart/src/style.css
  • samples/express/quickstart/.env.example
  • samples/express/quickstart/README.md
  • samples/express/quickstart/index.mjs
  • samples/express/quickstart/public/styles.css
  • samples/nextjs/quickstart/.env.example
  • samples/nextjs/quickstart/README.md
  • samples/nextjs/quickstart/app/components/ConfigNotice.tsx
  • samples/nextjs/quickstart/app/globals.css
  • samples/nextjs/quickstart/app/layout.tsx
  • samples/nextjs/quickstart/package.json
  • samples/nextjs/quickstart/scripts/prepare-dev.cjs
  • samples/node/quickstart/.env.example
  • samples/node/quickstart/README.md
  • samples/node/quickstart/lib/ui.mjs
  • samples/nuxt/quickstart/.env.example
  • samples/nuxt/quickstart/README.md
  • samples/nuxt/quickstart/app/app.vue
  • samples/nuxt/quickstart/app/assets/styles.css
  • samples/nuxt/quickstart/app/components/ConfigNotice.vue
  • samples/nuxt/quickstart/package.json
  • samples/nuxt/quickstart/scripts/prepare-dev.cjs
  • samples/react/quickstart/.env.example
  • samples/react/quickstart/README.md
  • samples/react/quickstart/src/App.css
  • samples/react/quickstart/src/components/ConfigNotice.jsx
  • samples/vue/quickstart/.env.example
  • samples/vue/quickstart/README.md
  • samples/vue/quickstart/src/components/ConfigNotice.vue
  • samples/vue/quickstart/src/style.css

Comment thread samples/nextjs/quickstart/README.md Outdated
Comment thread samples/nextjs/quickstart/README.md Outdated
Comment thread samples/nextjs/quickstart/scripts/prepare-dev.cjs
Comment thread samples/nuxt/quickstart/README.md Outdated
Comment thread samples/nuxt/quickstart/README.md Outdated
- Added support for redirect-based authentication flow in Next.js, Nuxt, React, and Vue samples.
- Updated environment variable handling to accommodate both native and redirect flows.
- Enhanced configuration notices to guide users through setting up redirect URIs and CORS.
- Improved styling for configuration steps and added documentation links for further assistance.
@brionmario
brionmario force-pushed the flexible-vendor-config branch from 4f5e699 to d922a46 Compare August 4, 2026 17:22
@brionmario
brionmario merged commit b89542b into thunder-id:main Aug 4, 2026
2 of 3 checks passed

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@samples/react/quickstart/src/components/ConfigNotice.jsx`:
- Around line 36-43: Update handleCopy to handle
navigator.clipboard.writeText(origin) failures visibly: set an error state that
the UI renders after a rejected copy attempt, or provide a manual-copy fallback
before attempting the Clipboard API. Ensure the copy button no longer silently
remains in its unchanged state when copying fails.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: f3520159-ea7b-406c-8b95-09d31c995c01

📥 Commits

Reviewing files that changed from the base of the PR and between 1b12d84 and d922a46.

📒 Files selected for processing (39)
  • samples/browser/quickstart/.env.example
  • samples/browser/quickstart/README.md
  • samples/browser/quickstart/scripts/prepare-dev.cjs
  • samples/browser/quickstart/src/main.js
  • samples/browser/quickstart/src/pages/home.js
  • samples/browser/quickstart/src/style.css
  • samples/express/quickstart/.env.example
  • samples/express/quickstart/README.md
  • samples/express/quickstart/index.mjs
  • samples/express/quickstart/public/styles.css
  • samples/express/quickstart/scripts/prepare-dev.cjs
  • samples/nextjs/quickstart/.env.example
  • samples/nextjs/quickstart/README.md
  • samples/nextjs/quickstart/app/components/ConfigNotice.tsx
  • samples/nextjs/quickstart/app/globals.css
  • samples/nextjs/quickstart/app/layout.tsx
  • samples/nextjs/quickstart/package.json
  • samples/nextjs/quickstart/scripts/prepare-dev.cjs
  • samples/node/quickstart/.env.example
  • samples/node/quickstart/README.md
  • samples/node/quickstart/lib/ui.mjs
  • samples/node/quickstart/scripts/prepare-dev.cjs
  • samples/nuxt/quickstart/.env.example
  • samples/nuxt/quickstart/README.md
  • samples/nuxt/quickstart/app/app.vue
  • samples/nuxt/quickstart/app/assets/styles.css
  • samples/nuxt/quickstart/app/components/ConfigNotice.vue
  • samples/nuxt/quickstart/package.json
  • samples/nuxt/quickstart/scripts/prepare-dev.cjs
  • samples/react/quickstart/.env.example
  • samples/react/quickstart/README.md
  • samples/react/quickstart/scripts/prepare-dev.cjs
  • samples/react/quickstart/src/App.css
  • samples/react/quickstart/src/components/ConfigNotice.jsx
  • samples/vue/quickstart/.env.example
  • samples/vue/quickstart/README.md
  • samples/vue/quickstart/scripts/prepare-dev.cjs
  • samples/vue/quickstart/src/components/ConfigNotice.vue
  • samples/vue/quickstart/src/style.css
🚧 Files skipped from review as they are similar to previous changes (33)
  • samples/vue/quickstart/.env.example
  • samples/node/quickstart/README.md
  • samples/node/quickstart/lib/ui.mjs
  • samples/express/quickstart/.env.example
  • samples/react/quickstart/README.md
  • samples/browser/quickstart/.env.example
  • samples/vue/quickstart/README.md
  • samples/express/quickstart/README.md
  • samples/browser/quickstart/README.md
  • samples/nuxt/quickstart/package.json
  • samples/express/quickstart/index.mjs
  • samples/nextjs/quickstart/app/layout.tsx
  • samples/nextjs/quickstart/package.json
  • samples/browser/quickstart/src/main.js
  • samples/express/quickstart/public/styles.css
  • samples/nuxt/quickstart/app/components/ConfigNotice.vue
  • samples/nextjs/quickstart/README.md
  • samples/nuxt/quickstart/.env.example
  • samples/nextjs/quickstart/app/globals.css
  • samples/nextjs/quickstart/.env.example
  • samples/node/quickstart/.env.example
  • samples/nuxt/quickstart/app/app.vue
  • samples/react/quickstart/.env.example
  • samples/nuxt/quickstart/app/assets/styles.css
  • samples/vue/quickstart/src/components/ConfigNotice.vue
  • samples/nextjs/quickstart/scripts/prepare-dev.cjs
  • samples/nextjs/quickstart/app/components/ConfigNotice.tsx
  • samples/browser/quickstart/src/pages/home.js
  • samples/nuxt/quickstart/scripts/prepare-dev.cjs
  • samples/react/quickstart/src/App.css
  • samples/vue/quickstart/src/style.css
  • samples/nuxt/quickstart/README.md
  • samples/browser/quickstart/src/style.css

Comment on lines +36 to +43
const handleCopy = async (field) => {
try {
await navigator.clipboard.writeText(origin)
setCopiedField(field)
setTimeout(() => setCopiedField(null), 1500)
} catch {
// Clipboard API unavailable (e.g. insecure context) — ignore.
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== locate file =="
fd -a 'ConfigNotice.jsx' . || true

echo "== file excerpt =="
if [ -f samples/react/quickstart/src/components/ConfigNotice.jsx ]; then
  nl -ba samples/react/quickstart/src/components/ConfigNotice.jsx | sed -n '1,120p'
fi

echo "== related search =="
rg -n "handleCopy|copied|copyText|Clipboard|copiedField|setCopiedField|Copy" samples/react/quickstart/src/components/ConfigNotice.jsx samples/react/quickstart/src -S || true

Repository: thunder-id/javascript-sdks

Length of output: 317


🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== file excerpt =="
nl -ba samples/react/quickstart/src/components/ConfigNotice.jsx | sed -n '1,120p'

Repository: thunder-id/javascript-sdks

Length of output: 223


🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== file excerpt =="
awk '{printf "%6d\t%s\n", NR, $0}' samples/react/quickstart/src/components/ConfigNotice.jsx | sed -n '1,140p'

echo "== related search =="
grep -nE "handleCopy|copied|copyText|Clipboard|copiedField|setCopiedField|Copy" samples/react/quickstart/src/components/ConfigNotice.jsx samples/react/quickstart/src -S || true

echo "== behavioral probe =="
python3 <<'PY'
from pathlib import Path
p = Path("samples/react/quickstart/src/components/ConfigNotice.jsx")
text = p.read_text()

checks = {
    "has_handleCopy": "handleCopy = async (field)" in text or "handleCopy" in text,
    "catch_block_ignores": "catch {\n      // Clipboard API unavailable" in text,
    "sets_error_state_in_catch": "setError" in text.split("catch {", 1)[1].split("}", 1)[0] if "catch {" in text else False,
    "provides_manual_fallback": any(term in text.split("catch {", 1)[1].split("}", 1)[0] for term in ["select", "manual", "fallback", "copy"]),
}
for k, v in checks.items():
    print(f"{k}: {v}")
PY

Repository: thunder-id/javascript-sdks

Length of output: 6871


Report clipboard failures to the user.

If navigator.clipboard.writeText(origin) rejects, handleCopy only ignores the error, so the copy button can remain Copy. Show an error state after the click or provide a manual-copy fallback before the copy attempt.

🧰 Tools
🪛 ast-grep (0.45.0)

[warning] 38-38: Avoid using the initial state variable in setState
Context: setCopiedField(field)
Note: [CWE-710] Improper Adherence to Coding Standards. Security best practice.

(setstate-same-var)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@samples/react/quickstart/src/components/ConfigNotice.jsx` around lines 36 -
43, Update handleCopy to handle navigator.clipboard.writeText(origin) failures
visibly: set an error state that the UI renders after a rejected copy attempt,
or provide a manual-copy fallback before attempting the Clipboard API. Ensure
the copy button no longer silently remains in its unchanged state when copying
fails.

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.

3 participants