Enhance ThunderID quickstart samples - #52
Conversation
📝 WalkthroughWalkthroughQuickstart samples now show structured configuration steps, copyable browser origins, sanitized ChangesBrowser configuration guidance
Server and framework quickstart guidance
Native and redirect flow support
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
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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
samples/browser/quickstart/scripts/prepare-dev.cjsESLint 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.jsESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. samples/browser/quickstart/src/pages/home.jsESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.
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. Comment |
|
@coderabbitai, review |
|
✅ Action performedReview finished.
|
There was a problem hiding this comment.
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
📒 Files selected for processing (34)
samples/browser/quickstart/.env.examplesamples/browser/quickstart/README.mdsamples/browser/quickstart/src/main.jssamples/browser/quickstart/src/pages/home.jssamples/browser/quickstart/src/style.csssamples/express/quickstart/.env.examplesamples/express/quickstart/README.mdsamples/express/quickstart/index.mjssamples/express/quickstart/public/styles.csssamples/nextjs/quickstart/.env.examplesamples/nextjs/quickstart/README.mdsamples/nextjs/quickstart/app/components/ConfigNotice.tsxsamples/nextjs/quickstart/app/globals.csssamples/nextjs/quickstart/app/layout.tsxsamples/nextjs/quickstart/package.jsonsamples/nextjs/quickstart/scripts/prepare-dev.cjssamples/node/quickstart/.env.examplesamples/node/quickstart/README.mdsamples/node/quickstart/lib/ui.mjssamples/nuxt/quickstart/.env.examplesamples/nuxt/quickstart/README.mdsamples/nuxt/quickstart/app/app.vuesamples/nuxt/quickstart/app/assets/styles.csssamples/nuxt/quickstart/app/components/ConfigNotice.vuesamples/nuxt/quickstart/package.jsonsamples/nuxt/quickstart/scripts/prepare-dev.cjssamples/react/quickstart/.env.examplesamples/react/quickstart/README.mdsamples/react/quickstart/src/App.csssamples/react/quickstart/src/components/ConfigNotice.jsxsamples/vue/quickstart/.env.examplesamples/vue/quickstart/README.mdsamples/vue/quickstart/src/components/ConfigNotice.vuesamples/vue/quickstart/src/style.css
- 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.
4f5e699 to
d922a46
Compare
There was a problem hiding this comment.
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
📒 Files selected for processing (39)
samples/browser/quickstart/.env.examplesamples/browser/quickstart/README.mdsamples/browser/quickstart/scripts/prepare-dev.cjssamples/browser/quickstart/src/main.jssamples/browser/quickstart/src/pages/home.jssamples/browser/quickstart/src/style.csssamples/express/quickstart/.env.examplesamples/express/quickstart/README.mdsamples/express/quickstart/index.mjssamples/express/quickstart/public/styles.csssamples/express/quickstart/scripts/prepare-dev.cjssamples/nextjs/quickstart/.env.examplesamples/nextjs/quickstart/README.mdsamples/nextjs/quickstart/app/components/ConfigNotice.tsxsamples/nextjs/quickstart/app/globals.csssamples/nextjs/quickstart/app/layout.tsxsamples/nextjs/quickstart/package.jsonsamples/nextjs/quickstart/scripts/prepare-dev.cjssamples/node/quickstart/.env.examplesamples/node/quickstart/README.mdsamples/node/quickstart/lib/ui.mjssamples/node/quickstart/scripts/prepare-dev.cjssamples/nuxt/quickstart/.env.examplesamples/nuxt/quickstart/README.mdsamples/nuxt/quickstart/app/app.vuesamples/nuxt/quickstart/app/assets/styles.csssamples/nuxt/quickstart/app/components/ConfigNotice.vuesamples/nuxt/quickstart/package.jsonsamples/nuxt/quickstart/scripts/prepare-dev.cjssamples/react/quickstart/.env.examplesamples/react/quickstart/README.mdsamples/react/quickstart/scripts/prepare-dev.cjssamples/react/quickstart/src/App.csssamples/react/quickstart/src/components/ConfigNotice.jsxsamples/vue/quickstart/.env.examplesamples/vue/quickstart/README.mdsamples/vue/quickstart/scripts/prepare-dev.cjssamples/vue/quickstart/src/components/ConfigNotice.vuesamples/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
| 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. | ||
| } |
There was a problem hiding this comment.
🎯 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 || trueRepository: 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}")
PYRepository: 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.
Purpose
Approach
N/A
Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks
Summary by CodeRabbit
New Features
Documentation
.env.Bug Fixes
.envfiles.