fix: adjust auth flow

app/lib/github-app.server.ts

@@ -1,6 +1,7 @@
 import { App } from "@octokit/app";
 import { createAppAuth } from "@octokit/auth-app";
 import jwt from "jsonwebtoken";
+import { createHmac } from "crypto";
 
 // GitHub App configuration - these should be environment variables in production
 const GITHUB_APP_ID = process.env.GITHUB_APP_ID;
@@ -9,9 +10,21 @@ const GITHUB_APP_CLIENT_ID = process.env.GITHUB_APP_CLIENT_ID;
 const GITHUB_APP_CLIENT_SECRET = process.env.GITHUB_APP_CLIENT_SECRET;
 
 if (!GITHUB_APP_ID || !GITHUB_APP_PRIVATE_KEY || !GITHUB_APP_CLIENT_ID || !GITHUB_APP_CLIENT_SECRET) {
+  console.error('❌ Missing required GitHub App environment variables:');
+  console.error('- GITHUB_APP_ID:', GITHUB_APP_ID ? '✅ Set' : '❌ Missing');
+  console.error('- GITHUB_APP_PRIVATE_KEY:', GITHUB_APP_PRIVATE_KEY ? '✅ Set' : '❌ Missing');
+  console.error('- GITHUB_APP_CLIENT_ID:', GITHUB_APP_CLIENT_ID ? '✅ Set' : '❌ Missing');
+  console.error('- GITHUB_APP_CLIENT_SECRET:', GITHUB_APP_CLIENT_SECRET ? '✅ Set' : '❌ Missing');
   throw new Error('Missing required GitHub App environment variables. Please check your .env file.');
 }
 
+// Log startup info (safe - no secrets)
+console.log('🚀 GitHub App Configuration:');
+console.log('- App ID:', GITHUB_APP_ID);
+console.log('- Client ID:', GITHUB_APP_CLIENT_ID);
+console.log('- App Name:', process.env.GITHUB_APP_NAME);
+console.log('- Callback URL:', process.env.GITHUB_CALLBACK_URL);
+
 // For now, we'll hardcode a simple in-memory store
 // In production, you'd use a database
 const userAuthStore = new Map<string, any>();
@@ -58,6 +71,9 @@ export class GitHubAppAuth {
       throw new Error('GITHUB_CALLBACK_URL environment variable is required');
     }
     
+    console.log('🔗 Generating OAuth URL with client ID:', GITHUB_APP_CLIENT_ID);
+    console.log('🔗 Callback URL:', callbackUrl);
+    
     const params = new URLSearchParams({
       client_id: GITHUB_APP_CLIENT_ID,
       redirect_uri: callbackUrl,
@@ -65,7 +81,10 @@ export class GitHubAppAuth {
       state: state || '',
     });
 
-    return `https://github.com/login/oauth/authorize?${params.toString()}`;
+    const url = `https://github.com/login/oauth/authorize?${params.toString()}`;
+    console.log('🔗 Generated OAuth URL:', url);
+    
+    return url;
   }
 
   /**
@@ -73,11 +92,15 @@ export class GitHubAppAuth {
    */
   async handleCallback(code: string, state?: string) {
     try {
+      console.log('🔄 Starting OAuth callback with code:', code.substring(0, 8) + '...');
+      console.log('🔄 Using client ID:', GITHUB_APP_CLIENT_ID);
+      
       const { data } = await this.app.oauth.createToken({
         code,
       });
 
       const { token } = data;
+      console.log('✅ Successfully obtained OAuth token');
 
       // Get user information
       const userOctokit = await this.app.oauth.getUserOctokit({
@@ -85,6 +108,7 @@ export class GitHubAppAuth {
       });
 
       const { data: user } = await userOctokit.rest.users.getAuthenticated();
+      console.log('✅ Successfully obtained user info for:', user.login);
       
       // Store user auth info (in production, save to database)
       const userAuth = {
@@ -99,10 +123,26 @@ export class GitHubAppAuth {
       };
 
       userAuthStore.set(user.login, userAuth);
+      console.log('✅ User authentication stored for:', user.login);
 
       return userAuth;
-    } catch (error) {
-      console.error('GitHub callback error:', error);
+    } catch (error: any) {
+      console.error('❌ GitHub callback error details:');
+      console.error('- Error type:', error.constructor.name);
+      console.error('- Error message:', error.message);
+      console.error('- Error status:', error.status);
+      
+      if (error.request) {
+        console.error('- Request details:');
+        console.error('  - URL:', error.request.url);
+        console.error('  - Method:', error.request.method);
+        console.error('  - Client ID used:', error.request.client_id);
+      }
+      
+      if (error.response?.data) {
+        console.error('- Response data:', error.response.data);
+      }
+      
       throw new Error('Failed to authenticate with GitHub');
     }
   }
@@ -152,12 +192,16 @@ export class GitHubAppAuth {
       return true;
     }
 
-    const expectedSignature = `sha256=${require('crypto')
-      .createHmac('sha256', webhookSecret)
-      .update(payload, 'utf8')
-      .digest('hex')}`;
+    try {
+      const expectedSignature = `sha256=${createHmac('sha256', webhookSecret)
+        .update(payload, 'utf8')
+        .digest('hex')}`;
 
-    return signature === expectedSignature;
+      return signature === expectedSignature;
+    } catch (error) {
+      console.error('Error verifying webhook signature:', error);
+      return false;
+    }
   }
 }
 

app/routes/_index.tsx

@@ -14,12 +14,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const user = await getUserSession(request);
   const url = new URL(request.url);
   const error = url.searchParams.get("error");
+  const details = url.searchParams.get("details");
+  const message = url.searchParams.get("message");
   
-  return json({ user, error });
+  return json({ user, error, details, message });
 }
 
 export default function Index() {
-  const { user, error } = useLoaderData<typeof loader>();
+  const { user, error, details, message } = useLoaderData<typeof loader>();
   const [searchParams] = useSearchParams();
 
   return (
@@ -58,9 +60,31 @@ export default function Index() {
                     Authentication Error
                   </h3>
                   <div className="mt-2 text-sm text-red-700">
-                    {error === "oauth_failed" && "OAuth authentication failed. Please try again."}
+                    {error === "oauth_failed" && (
+                      <div>
+                        <p>OAuth authentication failed.</p>
+                        {details && <p className="mt-1 font-mono text-xs">Details: {details}</p>}
+                      </div>
+                    )}
                     {error === "no_code" && "No authorization code received from GitHub."}
-                    {error === "callback_failed" && "Failed to complete authentication. Please try again."}
+                    {error === "callback_failed" && (
+                      <div>
+                        <p>Failed to complete authentication.</p>
+                        {message && <p className="mt-1 font-mono text-xs">Error: {message}</p>}
+                      </div>
+                    )}
+                    {error === "expired_code" && (
+                      <div>
+                        <p>The authorization code has expired or is invalid.</p>
+                        <p className="mt-1">Please try signing in again.</p>
+                      </div>
+                    )}
+                    {error === "invalid_client" && (
+                      <div>
+                        <p>GitHub App configuration error.</p>
+                        <p className="mt-1">Please check the client ID and secret.</p>
+                      </div>
+                    )}
                   </div>
                 </div>
               </div>

app/routes/auth.github.callback.tsx

@@ -8,11 +8,20 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const code = url.searchParams.get("code");
   const state = url.searchParams.get("state");
   const error = url.searchParams.get("error");
+  const installation_id = url.searchParams.get("installation_id");
+  const setup_action = url.searchParams.get("setup_action");
+
+  console.log('🔄 OAuth callback received:');
+  console.log('- Code:', code ? code.substring(0, 8) + '...' : 'Missing');
+  console.log('- State:', state);
+  console.log('- Error:', error);
+  console.log('- Installation ID:', installation_id);
+  console.log('- Setup Action:', setup_action);
 
   // Handle OAuth errors
   if (error) {
     console.error("GitHub OAuth error:", error);
-    return redirect("/?error=oauth_failed");
+    return redirect(`/?error=oauth_failed&details=${encodeURIComponent(error)}`);
   }
 
   if (!code) {
@@ -34,13 +43,25 @@ export async function loader({ request }: LoaderFunctionArgs) {
       avatar_url: userAuth.avatar_url,
     });
 
-    return redirect("/dashboard", {
+    const redirectUrl = installation_id ? "/install" : "/dashboard";
+    console.log('✅ OAuth success, redirecting to:', redirectUrl);
+
+    return redirect(redirectUrl, {
       headers: {
         "Set-Cookie": await commitSession(session),
       },
     });
-  } catch (error) {
+  } catch (error: any) {
     console.error("GitHub callback error:", error);
-    return redirect("/?error=callback_failed");
+    
+    // Provide more specific error information
+    let errorCode = "callback_failed";
+    if (error.message?.includes("bad_verification_code") || error.message?.includes("incorrect or expired")) {
+      errorCode = "expired_code";
+    } else if (error.message?.includes("client_id")) {
+      errorCode = "invalid_client";
+    }
+    
+    return redirect(`/?error=${errorCode}&message=${encodeURIComponent(error.message)}`);
   }
 }

app/routes/debug.tsx

@@ -0,0 +1,36 @@
+import { json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  // Only allow this in development or if a special debug header is set
+  const isDev = process.env.NODE_ENV === "development";
+  const debugHeader = request.headers.get("x-debug-token");
+  const debugToken = process.env.DEBUG_TOKEN;
+  
+  if (!isDev && (!debugToken || debugHeader !== debugToken)) {
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  // Safe environment info (no secrets)
+  const envInfo = {
+    NODE_ENV: process.env.NODE_ENV,
+    GITHUB_APP_ID: process.env.GITHUB_APP_ID ? '✅ Set' : '❌ Missing',
+    GITHUB_APP_NAME: process.env.GITHUB_APP_NAME ? '✅ Set' : '❌ Missing',
+    GITHUB_APP_PRIVATE_KEY: process.env.GITHUB_APP_PRIVATE_KEY ? '✅ Set' : '❌ Missing',
+    GITHUB_APP_CLIENT_ID: process.env.GITHUB_APP_CLIENT_ID ? `✅ Set (${process.env.GITHUB_APP_CLIENT_ID?.substring(0, 8)}...)` : '❌ Missing',
+    GITHUB_APP_CLIENT_SECRET: process.env.GITHUB_APP_CLIENT_SECRET ? '✅ Set' : '❌ Missing',
+    GITHUB_WEBHOOK_SECRET: process.env.GITHUB_WEBHOOK_SECRET ? '✅ Set' : '❌ Missing',
+    GITHUB_CALLBACK_URL: process.env.GITHUB_CALLBACK_URL || '❌ Missing',
+    SESSION_SECRET: process.env.SESSION_SECRET ? '✅ Set' : '❌ Missing',
+  };
+
+  return json({
+    timestamp: new Date().toISOString(),
+    environment: envInfo,
+    request: {
+      url: request.url,
+      method: request.method,
+      headers: Object.fromEntries(request.headers.entries()),
+    }
+  });
+}

app/routes/webhook.github.tsx

@@ -7,21 +7,30 @@ export async function action({ request }: ActionFunctionArgs) {
     return json({ error: "Method not allowed" }, { status: 405 });
   }
 
+  let payload: string;
+  let eventData: any;
+
   try {
-    const payload = await request.text();
+    payload = await request.text();
     const signature = request.headers.get("x-hub-signature-256") || "";
     const event = request.headers.get("x-github-event") || "";
     const delivery = request.headers.get("x-github-delivery") || "";
 
+    console.log(`📥 Received GitHub webhook: ${event} (${delivery})`);
+
     // Verify webhook signature
     if (!githubApp.verifyWebhookSignature(payload, signature)) {
       console.error("Invalid webhook signature");
       return json({ error: "Invalid signature" }, { status: 401 });
     }
 
-    const eventData = JSON.parse(payload);
+    try {
+      eventData = JSON.parse(payload);
+    } catch (parseError) {
+      console.error("Failed to parse webhook payload:", parseError);
+      return json({ error: "Invalid JSON payload" }, { status: 400 });
+    }
     
-    console.log(`📥 Received GitHub webhook: ${event} (${delivery})`);
     console.log("Event data:", JSON.stringify(eventData, null, 2));
 
     // Handle different webhook events