Fix OAuth Errors and Integrate Credits Display#437
Conversation
…display - Improved error logging in auth callback to diagnose 401 Unauthorized issues. - Integrated CreditsDisplay component into the history sidebar. - Fixed the upgrade button in PurchaseCreditsPopup to redirect to Stripe checkout. - Added required Supabase environment variables to .env.example. - Installed the stripe package to support payment processing. - Ensured successful production build and clean repository state.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the Comment |
|
|
PR Compliance Guide 🔍Below is a summary of compliance checks for this PR:
Compliance status legend🟢 - Fully Compliant🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label |
|||||||||||||||||||||||||
ngoiyaeric
merged commit d6165e8
into
feature/standard-tier-implementation
PR Code Suggestions ✨Explore these optional code suggestions:
|
||||||||||||
![charliecreates[bot]](https://avatars.githubusercontent.com/in/1140780?s=60&v=4){kind=small}
There was a problem hiding this comment.
The OAuth callback now logs/propagates sensitive details: partial auth codes and provider error messages should not be logged or placed into redirect query strings. The Stripe upgrade flow is hard-coded and uses window.open without noopener,noreferrer, creating security and maintainability issues. The added stripe dependency appears unused in this diff and could become a client-bundling footgun unless kept strictly server-side.
Additional notes (1)
- Maintainability |
package.json:91-97
Addingstripeincreases bundle/install surface area. If it’s not yet used, consider adding it when server-side webhook/checkout session code lands, or ensure it’s only imported in server-only routes to prevent accidental client bundling.
As written, nothing in this diff shows usage, so this is potentially dead weight and a future footgun (someone might import it in a client component).
Summary of changes
Summary
This PR improves auth debuggability and integrates credit UI + payment plumbing:
- Supabase env docs: Adds
NEXT_PUBLIC_SUPABASE_URLandNEXT_PUBLIC_SUPABASE_ANON_KEYto.env.example. - OAuth callback handling: In
app/auth/callback/route.ts, logs richer details whenexchangeCodeForSessionfails and redirects to/auth/auth-code-errorwith an encoded error message. - Credits in sidebar: Injects
<CreditsDisplay />into the History sheet (components/history.tsx). - Upgrade flow: Changes
PurchaseCreditsPopupto open a Stripe Checkout URL and closes the dialog. - Stripe dependency: Adds
stripetopackage.json(with corresponding lockfile change).
| const { error } = await supabase.auth.exchangeCodeForSession(code) | ||
| if (!error) { | ||
| if (error) { | ||
| console.error('[Auth Callback] Exchange code error:', { | ||
| message: error.message, | ||
| status: error.status, | ||
| name: error.name, | ||
| code: code?.substring(0, 10) + '...' | ||
| }) | ||
| return NextResponse.redirect(`${origin}/auth/auth-code-error?error=${encodeURIComponent(error.message)}`) | ||
| } else { |
There was a problem hiding this comment.
The error log includes a derived code value (first 10 chars). Even partial authorization codes are sensitive and can end up in centralized logs (and potentially be replayable depending on provider/settings). This increases blast radius during incident triage.
Also, redirecting with the raw error.message in the query string can leak internal/provider details to the browser history, analytics, and referrers. Consider using a generic user-facing message (and keep details server-side), or pass a short error key/correlation id instead.
Suggestion
Consider removing the auth code from logs entirely and avoid placing error.message in the redirect URL. Example:
if (error) {
const errorId = crypto.randomUUID();
console.error('[Auth Callback] exchangeCodeForSession failed', {
errorId,
message: error.message,
status: error.status,
name: error.name,
});
return NextResponse.redirect(`${origin}/auth/auth-code-error?errorId=${errorId}`);
}Then have the error page display a generic message and optionally show errorId for support.
Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this suggestion.
| const handleUpgrade = (tier: string) => { | ||
| // Placeholder for upgrade logic | ||
| // In a real app, this would likely redirect to Stripe Checkout | ||
| console.log(`Upgrading to ${tier}`); | ||
| // Redirect to Stripe checkout | ||
| const stripeUrl = 'https://buy.stripe.com/3cIaEX3tRcur9EM7ss'; | ||
| window.open(stripeUrl, '_blank'); | ||
| setIsOpen(false); |
There was a problem hiding this comment.
handleUpgrade ignores the tier parameter and uses a hard-coded Stripe URL. That makes the UI misleading (different tiers can’t map to different checkout sessions) and hard to change across environments.
Also, window.open(..., '_blank') without noopener,noreferrer enables reverse-tabnabbing. Some browsers mitigate this, but you shouldn’t rely on it.
Suggestion
- Remove the unused
tierarg or actually use it to pick the correct destination. - Prefer a same-tab navigation (
window.location.assign) or setnoopener,noreferrer. - Avoid hard-coding: fetch a Checkout URL from your backend (creates a Stripe Checkout Session per user) or at least use an env var.
Example (minimal safer client-side change):
const handleUpgrade = () => {
const stripeUrl = process.env.NEXT_PUBLIC_STRIPE_CHECKOUT_URL;
if (!stripeUrl) return;
window.open(stripeUrl, '_blank', 'noopener,noreferrer');
setIsOpen(false);
};Better: call /api/stripe/checkout to create a session and redirect to the returned URL.
Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this suggestion.
2 participants
User description
This pull request addresses the reported OAuth authentication errors and integrates the credit management UI.
Key changes:
app/auth/callback/route.tsto log detailed error information whenexchangeCodeForSessionfails. It now also redirects to an error page with the error message as a query parameter for better visibility and debugging.CreditsDisplaycomponent to theHistorysidebar (components/history.tsx), allowing users to see their remaining credits directly in the interface.PurchaseCreditsPopupto correctly handle the "Upgrade to Standard" action by redirecting users to the Stripe checkout URL..env.exampleto includeNEXT_PUBLIC_SUPABASE_URLandNEXT_PUBLIC_SUPABASE_ANON_KEY, ensuring that developers are aware of these critical requirements for authentication.stripepackage as a dependency to support future webhook and payment handling integrations.bun run buildand ensured that auto-generated or temporary files likedev_server.logand unintended changes tonext-env.d.tsandtsconfig.jsonwere excluded or reverted.PR created automatically by Jules for task 2704938752808797816 started by @ngoiyaeric
PR Type
Bug fix, Enhancement
Description
Enhanced OAuth error handling with detailed logging and error page redirect
Integrated CreditsDisplay component into history sidebar for user visibility
Fixed upgrade button to redirect to Stripe checkout URL
Added Supabase environment variables documentation to .env.example
Installed stripe package for payment processing support
Diagram Walkthrough
File Walkthrough
route.ts
Enhanced OAuth error logging and error page redirectapp/auth/callback/route.ts
prefix
parameter
purchase-credits-popup.tsx
Implemented Stripe checkout redirect for upgradescomponents/credits/purchase-credits-popup.tsx
.env.example
Added Supabase environment variables documentation.env.example
placeholders
history.tsx
Integrated CreditsDisplay into history sidebarcomponents/history.tsx
package.json
Added stripe package dependencypackage.json