[DRAFT] Update React LLM Prompt #1111
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
brionmario
requested review from
DonOmalVindula and
jeradrutnam
as code owners
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the LLM prompt for React application integration in the Thunder Developer Console. The prompt provides AI-generated code integration instructions for developers using the Asgardeo React SDK with Thunder authentication.
Changes:
- Restructured and significantly expanded the LLM prompt content with more explicit configuration rules, code examples, and implementation guidance
- Added detailed "CRITICAL" sections emphasizing exact provider configuration and component usage patterns
- Included complete file structure examples (main.jsx and App.jsx) to guide LLM-based code generation
Comments suppressed due to low confidence (2)
frontend/apps/thunder-develop/src/features/applications/data/application-templates/technology-based/react.json:1
- The prompt states 'DO NOT use any other hooks from @asgardeo/react', but the sample application (
samples/apps/react-sdk-sample/src/App.tsxand README.md) demonstrates usinguseAsgardeo()hook successfully. The prompt should clarify that hooks likeuseAsgardeo()are available for advanced use cases, even if declarative components are the recommended approach for simple integrations. The current blanket prohibition contradicts the actual SDK capabilities and sample implementations.
{
frontend/apps/thunder-develop/src/features/applications/data/application-templates/technology-based/react.json:1
- The prompt states 'DO NOT use
scope... unless explicitly needed', but it's listed in the 'unless explicitly needed' exception. However, the thunder-develop app's own implementation (frontend/apps/thunder-develop/src/AppWithConfig.tsx) usesscopesandafterSignInUrlprops, which are marked as 'DO NOT use' in this prompt. This creates a confusing message about which props are acceptable. Consider revising to clearly distinguish between minimal required props and optional but valid props likeafterSignInUrlandscopes.
{
| "type": "llm", | ||
| "icon": "sparkles", | ||
| "content": "# Integrate Thunder Authentication in React Application (Inbuilt Mode)\n\n## Context\nI have a React application and I want to integrate Thunder's authentication system using the Asgardeo React SDK with Thunder-hosted login pages.\n\n## Requirements\n- Use @asgardeo/react SDK for authentication\n- Configure Thunder-hosted login, registration, and account management UIs\n- Implement sign-in and sign-out functionality using prebuilt components\n- Display signed-in user's profile information\n- Handle authentication state automatically\n\n## Configuration\n- **Client ID**: {{clientId}}\n- **Base URL**: https://localhost:8090 (or your Thunder instance URL)\n- **SDK**: @asgardeo/react\n\n## IMPORTANT Configuration Rules\n- DO NOT create a separate config object - pass all configuration as individual props directly to <AsgardeoProvider>\n- Required props: `clientId`, `baseUrl`, `platform=\"AsgardeoV2\"`, and `tokenValidation={{ idToken: { validate: false } }}`\n- The tokenValidation prop is STRICTLY required for Thunder\n- Optional props: `afterSignInUrl`, `afterSignOutUrl`, `scope`\n- NEVER use property names like `signInRedirectURL` or `signOutRedirectURL`\n- Example: <AsgardeoProvider clientId=\"xxx\" baseUrl=\"xxx\" platform=\"AsgardeoV2\" tokenValidation={{ idToken: { validate: false } }}>\n\n## Implementation Steps\n1. Create a React app using Vite by running: `npm create vite@latest react-demo -- --template react --rolldown --no-interactive`\n2. Navigate into the project directory: `cd react-demo`\n3. Install dependencies: `npm install`\n4. Install @asgardeo/react package: `npm install @asgardeo/react`\n5. Wrap your app with <AsgardeoProvider /> and configure clientId, baseUrl, platform=\"AsgardeoV2\", and tokenValidation={{ idToken: { validate: false } }}\n6. Add <SignInButton /> for signed-out users and <SignOutButton /> for signed-in users\n7. Use <SignedIn> and <SignedOut> components to conditionally render UI\n8. Display user profile with <UserDropdown /> component\n9. Run the development server: `npm run dev`\n\nPlease provide complete, working code with proper configuration for Thunder authentication using Asgardeo SDK." | ||
| "content": "# Integrate Thunder Authentication in React Application (Inbuilt Mode)\n\n## Context\nI have a React application and I want to integrate Thunder's authentication system using the Asgardeo React SDK with Thunder-hosted login pages.\n\n## Configuration Details\n- **Client ID**: {{clientId}}\n- **Base URL**: https://localhost:8090 (or your Thunder instance URL)\n- **SDK**: @asgardeo/react\n\n## CRITICAL: Provider Configuration Rules\nThe provider configuration MUST follow this EXACT structure - NO variations allowed:\n\n```jsx\nimport { AsgardeoProvider } from '@asgardeo/react'\n\n<AsgardeoProvider\n clientId=\"<clientId>\"\n baseUrl=\"https://localhost:8090\"\n platform=\"AsgardeoV2\"\n tokenValidation={{ idToken: { validate: false } }}\n>\n <App />\n</AsgardeoProvider>\n```\n\n### Configuration Rules:\n- ✅ Use ONLY these 4 props: `clientId`, `baseUrl`, `platform`, `tokenValidation`\n- ✅ `platform` must be exactly `\"AsgardeoV2\"`\n- ✅ `tokenValidation` must be exactly `{{ idToken: { validate: false } }}`\n- ❌ DO NOT add config objects, hooks, or additional props\n- ❌ DO NOT use `signInRedirectURL`, `signOutRedirectURL`, `scope`, or other props unless explicitly needed\n- ❌ DO NOT create separate config variables\n\n## CRITICAL: Component Usage Rules\nUse ONLY the prebuilt declarative components from @asgardeo/react - DO NOT use hooks:\n\n### ✅ CORRECT Implementation in App.jsx:\n```jsx\nimport { SignedIn, SignedOut, SignInButton, SignOutButton, UserDropdown } from '@asgardeo/react'\n\nfunction App() {\n return (\n <header>\n <SignedIn>\n <UserDropdown />\n <SignOutButton />\n </SignedIn>\n <SignedOut>\n <SignInButton />\n </SignedOut>\n </header>\n )\n}\n```\n\n### ❌ INCORRECT - DO NOT USE:\n- `useAuthContext()` hook\n- `useAuth()` hook \n- Any other hooks from @asgardeo/react\n- Manual authentication state management\n- Custom token handling\n\n## Available Components\nImport and use these prebuilt components directly:\n- `<SignedIn>` - Wraps content shown only when user is authenticated\n- `<SignedOut>` - Wraps content shown only when user is NOT authenticated\n- `<SignInButton />` - Button that triggers Thunder login flow\n- `<SignOutButton />` - Button that signs out the user\n- `<UserDropdown />` - Shows user profile information\n\n## Implementation Steps\n1. Create React app: `npm create vite@latest react-demo -- --template react --rolldown --no-interactive`\n2. Navigate: `cd react-demo`\n3. Install dependencies: `npm install`\n4. Install SDK: `npm install @asgardeo/react`\n5. Update `main.jsx` to wrap App with AsgardeoProvider using ONLY the 4 required props\n6. Update `App.jsx` to use the declarative components (SignedIn, SignedOut, etc.)\n7. Run: `npm run dev`\n\n## Expected File Structure\n\n### main.jsx (or index.jsx):\n```jsx\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport './index.css'\nimport App from './App.jsx'\nimport { AsgardeoProvider } from '@asgardeo/react'\n\ncreateRoot(document.getElementById('root')).render(\n <StrictMode>\n <AsgardeoProvider\n clientId=\"{{clientId}}\"\n baseUrl=\"https://localhost:8090\"\n platform=\"AsgardeoV2\"\n tokenValidation={{ idToken: { validate: false } }}\n >\n <App />\n </AsgardeoProvider>\n </StrictMode>\n)\n```\n\n### App.jsx:\n```jsx\nimport { SignedIn, SignedOut, SignInButton, SignOutButton, UserDropdown } from '@asgardeo/react'\nimport './App.css'\n\nfunction App() {\n return (\n <>\n <header>\n <SignedIn>\n <UserDropdown />\n <SignOutButton />\n </SignedIn>\n <SignedOut>\n <SignInButton />\n </SignedOut>\n </header>\n <main>\n {/* Your app content here */}\n </main>\n </>\n )\n}\n\nexport default App\n```\n\nPlease implement EXACTLY as shown above. Do not add hooks, custom configuration, or deviate from this structure." |
There was a problem hiding this comment.
The prompt states that tokenValidation is STRICTLY required and lists it as one of 4 mandatory props, but the actual sample implementation in samples/apps/react-sdk-sample/src/main.tsx does not include this prop in the AsgardeoProvider configuration. This inconsistency could confuse LLM-generated code. Verify if tokenValidation is truly required for Thunder integration, and if not, update the prompt to mark it as optional or remove the strict requirement language.
Suggested change
| "content": "# Integrate Thunder Authentication in React Application (Inbuilt Mode)\n\n## Context\nI have a React application and I want to integrate Thunder's authentication system using the Asgardeo React SDK with Thunder-hosted login pages.\n\n## Configuration Details\n- **Client ID**: {{clientId}}\n- **Base URL**: https://localhost:8090 (or your Thunder instance URL)\n- **SDK**: @asgardeo/react\n\n## CRITICAL: Provider Configuration Rules\nThe provider configuration MUST follow this EXACT structure - NO variations allowed:\n\n```jsx\nimport { AsgardeoProvider } from '@asgardeo/react'\n\n<AsgardeoProvider\n clientId=\"<clientId>\"\n baseUrl=\"https://localhost:8090\"\n platform=\"AsgardeoV2\"\n tokenValidation={{ idToken: { validate: false } }}\n>\n <App />\n</AsgardeoProvider>\n```\n\n### Configuration Rules:\n- ✅ Use ONLY these 4 props: `clientId`, `baseUrl`, `platform`, `tokenValidation`\n- ✅ `platform` must be exactly `\"AsgardeoV2\"`\n- ✅ `tokenValidation` must be exactly `{{ idToken: { validate: false } }}`\n- ❌ DO NOT add config objects, hooks, or additional props\n- ❌ DO NOT use `signInRedirectURL`, `signOutRedirectURL`, `scope`, or other props unless explicitly needed\n- ❌ DO NOT create separate config variables\n\n## CRITICAL: Component Usage Rules\nUse ONLY the prebuilt declarative components from @asgardeo/react - DO NOT use hooks:\n\n### ✅ CORRECT Implementation in App.jsx:\n```jsx\nimport { SignedIn, SignedOut, SignInButton, SignOutButton, UserDropdown } from '@asgardeo/react'\n\nfunction App() {\n return (\n <header>\n <SignedIn>\n <UserDropdown />\n <SignOutButton />\n </SignedIn>\n <SignedOut>\n <SignInButton />\n </SignedOut>\n </header>\n )\n}\n```\n\n### ❌ INCORRECT - DO NOT USE:\n- `useAuthContext()` hook\n- `useAuth()` hook \n- Any other hooks from @asgardeo/react\n- Manual authentication state management\n- Custom token handling\n\n## Available Components\nImport and use these prebuilt components directly:\n- `<SignedIn>` - Wraps content shown only when user is authenticated\n- `<SignedOut>` - Wraps content shown only when user is NOT authenticated\n- `<SignInButton />` - Button that triggers Thunder login flow\n- `<SignOutButton />` - Button that signs out the user\n- `<UserDropdown />` - Shows user profile information\n\n## Implementation Steps\n1. Create React app: `npm create vite@latest react-demo -- --template react --rolldown --no-interactive`\n2. Navigate: `cd react-demo`\n3. Install dependencies: `npm install`\n4. Install SDK: `npm install @asgardeo/react`\n5. Update `main.jsx` to wrap App with AsgardeoProvider using ONLY the 4 required props\n6. Update `App.jsx` to use the declarative components (SignedIn, SignedOut, etc.)\n7. Run: `npm run dev`\n\n## Expected File Structure\n\n### main.jsx (or index.jsx):\n```jsx\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport './index.css'\nimport App from './App.jsx'\nimport { AsgardeoProvider } from '@asgardeo/react'\n\ncreateRoot(document.getElementById('root')).render(\n <StrictMode>\n <AsgardeoProvider\n clientId=\"{{clientId}}\"\n baseUrl=\"https://localhost:8090\"\n platform=\"AsgardeoV2\"\n tokenValidation={{ idToken: { validate: false } }}\n >\n <App />\n </AsgardeoProvider>\n </StrictMode>\n)\n```\n\n### App.jsx:\n```jsx\nimport { SignedIn, SignedOut, SignInButton, SignOutButton, UserDropdown } from '@asgardeo/react'\nimport './App.css'\n\nfunction App() {\n return (\n <>\n <header>\n <SignedIn>\n <UserDropdown />\n <SignOutButton />\n </SignedIn>\n <SignedOut>\n <SignInButton />\n </SignedOut>\n </header>\n <main>\n {/* Your app content here */}\n </main>\n </>\n )\n}\n\nexport default App\n```\n\nPlease implement EXACTLY as shown above. Do not add hooks, custom configuration, or deviate from this structure." | |
| "content": "# Integrate Thunder Authentication in React Application (Inbuilt Mode)\n\n## Context\nI have a React application and I want to integrate Thunder's authentication system using the Asgardeo React SDK with Thunder-hosted login pages.\n\n## Configuration Details\n- **Client ID**: {{clientId}}\n- **Base URL**: https://localhost:8090 (or your Thunder instance URL)\n- **SDK**: @asgardeo/react\n\n## CRITICAL: Provider Configuration Rules\nThe provider configuration MUST follow this EXACT structure - NO variations allowed:\n\n```jsx\nimport { AsgardeoProvider } from '@asgardeo/react'\n\n<AsgardeoProvider\n clientId=\"<clientId>\"\n baseUrl=\"https://localhost:8090\"\n platform=\"AsgardeoV2\"\n>\n <App />\n</AsgardeoProvider>\n```\n\n### Configuration Rules:\n- ✅ Use ONLY these required props: `clientId`, `baseUrl`, `platform`\n- ✅ `platform` must be exactly `\"AsgardeoV2\"`\n- ❌ DO NOT add config objects, hooks, or additional props unless explicitly needed\n- ❌ DO NOT use `signInRedirectURL`, `signOutRedirectURL`, `scope`, or other props unless explicitly needed\n- ❌ DO NOT create separate config variables\n\n## CRITICAL: Component Usage Rules\nUse ONLY the prebuilt declarative components from @asgardeo/react - DO NOT use hooks:\n\n### ✅ CORRECT Implementation in App.jsx:\n```jsx\nimport { SignedIn, SignedOut, SignInButton, SignOutButton, UserDropdown } from '@asgardeo/react'\n\nfunction App() {\n return (\n <header>\n <SignedIn>\n <UserDropdown />\n <SignOutButton />\n </SignedIn>\n <SignedOut>\n <SignInButton />\n </SignedOut>\n </header>\n )\n}\n```\n\n### ❌ INCORRECT - DO NOT USE:\n- `useAuthContext()` hook\n- `useAuth()` hook \n- Any other hooks from @asgardeo/react\n- Manual authentication state management\n- Custom token handling\n\n## Available Components\nImport and use these prebuilt components directly:\n- `<SignedIn>` - Wraps content shown only when user is authenticated\n- `<SignedOut>` - Wraps content shown only when user is NOT authenticated\n- `<SignInButton />` - Button that triggers Thunder login flow\n- `<SignOutButton />` - Button that signs out the user\n- `<UserDropdown />` - Shows user profile information\n\n## Implementation Steps\n1. Create React app: `npm create vite@latest react-demo -- --template react --rolldown --no-interactive`\n2. Navigate: `cd react-demo`\n3. Install dependencies: `npm install`\n4. Install SDK: `npm install @asgardeo/react`\n5. Update `main.jsx` to wrap App with AsgardeoProvider using ONLY the required props (`clientId`, `baseUrl`, `platform`)\n6. Update `App.jsx` to use the declarative components (SignedIn, SignedOut, etc.)\n7. Run: `npm run dev`\n\n## Expected File Structure\n\n### main.jsx (or index.jsx):\n```jsx\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport './index.css'\nimport App from './App.jsx'\nimport { AsgardeoProvider } from '@asgardeo/react'\n\ncreateRoot(document.getElementById('root')).render(\n <StrictMode>\n <AsgardeoProvider\n clientId=\"{{clientId}}\"\n baseUrl=\"https://localhost:8090\"\n platform=\"AsgardeoV2\"\n >\n <App />\n </AsgardeoProvider>\n </StrictMode>\n)\n```\n\n### App.jsx:\n```jsx\nimport { SignedIn, SignedOut, SignInButton, SignOutButton, UserDropdown } from '@asgardeo/react'\nimport './App.css'\n\nfunction App() {\n return (\n <>\n <header>\n <SignedIn>\n <UserDropdown />\n <SignOutButton />\n </SignedIn>\n <SignedOut>\n <SignInButton />\n </SignedOut>\n </header>\n <main>\n {/* Your app content here */}\n </main>\n </>\n )\n}\n\nexport default App\n```\n\nPlease implement EXACTLY as shown above. Do not add hooks, custom configuration, or deviate from this structure." |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1111 +/- ##
==========================================
- Coverage 87.22% 87.09% -0.13%
==========================================
Files 535 535
Lines 36114 36152 +38
Branches 1611 1611
==========================================
- Hits 31501 31488 -13
- Misses 2978 3012 +34
- Partials 1635 1652 +17
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
DonOmalVindula
approved these changes
Jan 18, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Purpose
Approach
Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks