feat: refactor for linking

app/lib/account-linking.server.ts

@@ -0,0 +1,218 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { dirname } from 'path';
+
+export interface AccountLink {
+  githubUserId: string;
+  githubLogin: string;
+  huggingfaceUsername: string;
+  linkedAt: string;
+  lastUpdated: string;
+}
+
+export interface AccountLinksData {
+  links: AccountLink[];
+  metadata: {
+    version: string;
+    createdAt: string;
+    lastModified: string;
+  };
+}
+
+export class AccountLinkingService {
+  private filePath: string;
+
+  constructor() {
+    this.filePath = process.env.ACCOUNT_LINKS_FILE || './data/account-links.json';
+    this.ensureFileExists();
+  }
+
+  private ensureFileExists(): void {
+    const dir = dirname(this.filePath);
+    
+    // Create directory if it doesn't exist
+    if (!existsSync(dir)) {
+      mkdirSync(dir, { recursive: true });
+    }
+
+    // Create file if it doesn't exist
+    if (!existsSync(this.filePath)) {
+      const initialData: AccountLinksData = {
+        links: [],
+        metadata: {
+          version: '1.0.0',
+          createdAt: new Date().toISOString(),
+          lastModified: new Date().toISOString(),
+        },
+      };
+      this.writeData(initialData);
+    }
+  }
+
+  private readData(): AccountLinksData {
+    try {
+      const content = readFileSync(this.filePath, 'utf-8');
+      return JSON.parse(content);
+    } catch (error) {
+      console.error('Error reading account links file:', error);
+      // Return default structure if file is corrupted
+      return {
+        links: [],
+        metadata: {
+          version: '1.0.0',
+          createdAt: new Date().toISOString(),
+          lastModified: new Date().toISOString(),
+        },
+      };
+    }
+  }
+
+  private writeData(data: AccountLinksData): void {
+    try {
+      data.metadata.lastModified = new Date().toISOString();
+      writeFileSync(this.filePath, JSON.stringify(data, null, 2), 'utf-8');
+    } catch (error) {
+      console.error('Error writing account links file:', error);
+      throw new Error('Failed to save account links');
+    }
+  }
+
+  /**
+   * Create a new account link
+   */
+  createLink(githubUserId: string, githubLogin: string, huggingfaceUsername: string): AccountLink {
+    const data = this.readData();
+    const now = new Date().toISOString();
+
+    // Check for existing links
+    const existingGithubLink = data.links.find(link => link.githubUserId === githubUserId);
+    const existingHfLink = data.links.find(link => link.huggingfaceUsername === huggingfaceUsername);
+
+    if (existingGithubLink) {
+      throw new Error(`GitHub user ${githubLogin} is already linked to HuggingFace user ${existingGithubLink.huggingfaceUsername}`);
+    }
+
+    if (existingHfLink) {
+      throw new Error(`HuggingFace user ${huggingfaceUsername} is already linked to GitHub user ${existingHfLink.githubLogin}`);
+    }
+
+    const newLink: AccountLink = {
+      githubUserId,
+      githubLogin,
+      huggingfaceUsername,
+      linkedAt: now,
+      lastUpdated: now,
+    };
+
+    data.links.push(newLink);
+    this.writeData(data);
+
+    console.log(`✅ Created account link: ${githubLogin} ↔ ${huggingfaceUsername}`);
+    return newLink;
+  }
+
+  /**
+   * Find account link by GitHub user
+   */
+  findByGitHubUser(githubUserId: string): AccountLink | null {
+    const data = this.readData();
+    return data.links.find(link => link.githubUserId === githubUserId) || null;
+  }
+
+  /**
+   * Find account link by HuggingFace user
+   */
+  findByHuggingFaceUser(huggingfaceUsername: string): AccountLink | null {
+    const data = this.readData();
+    return data.links.find(link => link.huggingfaceUsername === huggingfaceUsername) || null;
+  }
+
+  /**
+   * Update an existing account link
+   */
+  updateLink(githubUserId: string, updates: Partial<Omit<AccountLink, 'githubUserId' | 'linkedAt'>>): AccountLink {
+    const data = this.readData();
+    const linkIndex = data.links.findIndex(link => link.githubUserId === githubUserId);
+
+    if (linkIndex === -1) {
+      throw new Error(`No account link found for GitHub user ID: ${githubUserId}`);
+    }
+
+    const existingLink = data.links[linkIndex];
+    const updatedLink: AccountLink = {
+      ...existingLink,
+      ...updates,
+      lastUpdated: new Date().toISOString(),
+    };
+
+    data.links[linkIndex] = updatedLink;
+    this.writeData(data);
+
+    console.log(`✅ Updated account link for GitHub user: ${existingLink.githubLogin}`);
+    return updatedLink;
+  }
+
+  /**
+   * Remove an account link
+   */
+  removeLink(githubUserId: string): boolean {
+    const data = this.readData();
+    const initialLength = data.links.length;
+    
+    data.links = data.links.filter(link => link.githubUserId !== githubUserId);
+    
+    if (data.links.length < initialLength) {
+      this.writeData(data);
+      console.log(`✅ Removed account link for GitHub user ID: ${githubUserId}`);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Get all account links
+   */
+  getAllLinks(): AccountLink[] {
+    const data = this.readData();
+    return data.links;
+  }
+
+  /**
+   * Get linking statistics
+   */
+  getStats(): { totalLinks: number; lastModified: string } {
+    const data = this.readData();
+    return {
+      totalLinks: data.links.length,
+      lastModified: data.metadata.lastModified,
+    };
+  }
+
+  /**
+   * Check if accounts can be linked (no conflicts)
+   */
+  canLink(githubUserId: string, huggingfaceUsername: string): { canLink: boolean; reason?: string } {
+    const data = this.readData();
+    
+    const existingGithubLink = data.links.find(link => link.githubUserId === githubUserId);
+    if (existingGithubLink) {
+      return {
+        canLink: false,
+        reason: `GitHub account is already linked to HuggingFace user: ${existingGithubLink.huggingfaceUsername}`,
+      };
+    }
+
+    const existingHfLink = data.links.find(link => link.huggingfaceUsername === huggingfaceUsername);
+    if (existingHfLink) {
+      return {
+        canLink: false,
+        reason: `HuggingFace account is already linked to GitHub user: ${existingHfLink.githubLogin}`,
+      };
+    }
+
+    return { canLink: true };
+  }
+}
+
+// Singleton instance
+export const accountLinkingService = new AccountLinkingService();

app/lib/huggingface-oauth.server.ts

@@ -0,0 +1,176 @@
+import { HuggingFaceUserInfo } from './session.server';
+
+const HF_OAUTH_BASE_URL = 'https://huggingface.co/oauth';
+const HF_API_BASE_URL = 'https://huggingface.co/api';
+
+export class HuggingFaceOAuthService {
+  private clientId: string;
+  private clientSecret: string;
+  private redirectUri: string;
+
+  constructor() {
+    this.clientId = process.env.HF_CLIENT_ID || '';
+    this.clientSecret = process.env.HF_CLIENT_SECRET || '';
+    // Support both variable names for backward compatibility
+    this.redirectUri = process.env.HF_REDIRECT_URI || process.env.HF_CALLBACK_URL || '';
+
+    if (!this.clientId || !this.clientSecret || !this.redirectUri) {
+      console.warn('⚠️ HuggingFace OAuth not fully configured. Missing environment variables:');
+      console.warn('- HF_CLIENT_ID:', this.clientId ? '✅ Set' : '❌ Missing');
+      console.warn('- HF_CLIENT_SECRET:', this.clientSecret ? '✅ Set' : '❌ Missing');
+      console.warn('- HF_REDIRECT_URI/HF_CALLBACK_URL:', this.redirectUri ? '✅ Set' : '❌ Missing');
+    } else {
+      console.log('✅ HuggingFace OAuth configuration:');
+      console.log('- Client ID:', this.clientId.substring(0, 4) + '...');
+      console.log('- Redirect URI:', this.redirectUri);
+    }
+  }
+
+  /**
+   * Check if HuggingFace OAuth is properly configured
+   */
+  isConfigured(): boolean {
+    return !!(this.clientId && this.clientSecret && this.redirectUri);
+  }
+
+  /**
+   * Generate authorization URL for HuggingFace OAuth
+   */
+  getAuthorizationUrl(state: string, codeChallenge: string): string {
+    if (!this.isConfigured()) {
+      throw new Error('HuggingFace OAuth is not properly configured');
+    }
+
+    // Directly use the URL constructor to avoid any serialization issues with URLSearchParams
+    let authUrl = new URL(`${HF_OAUTH_BASE_URL}/authorize`);
+    authUrl.searchParams.set('client_id', this.clientId);
+    authUrl.searchParams.set('response_type', 'code');
+    authUrl.searchParams.set('scope', 'profile'); // Explicitly use 'profile' as required by HF
+    authUrl.searchParams.set('redirect_uri', this.redirectUri);
+    authUrl.searchParams.set('state', state);
+    authUrl.searchParams.set('code_challenge', codeChallenge);
+    authUrl.searchParams.set('code_challenge_method', 'S256');
+
+    console.log('Debug - Auth URL:', authUrl.toString());
+    
+    return authUrl.toString();
+  }
+
+  /**
+   * Exchange authorization code for access token
+   */
+  async exchangeCodeForToken(code: string, codeVerifier: string): Promise<string> {
+    if (!this.isConfigured()) {
+      throw new Error('HuggingFace OAuth is not properly configured');
+    }
+
+    console.log('Debug - Token exchange parameters:');
+    console.log('- Code:', code.substring(0, 4) + '...');
+    console.log('- Code verifier length:', codeVerifier.length);
+    console.log('- Redirect URI:', this.redirectUri);
+
+    const formData = new URLSearchParams();
+    formData.append('grant_type', 'authorization_code');
+    formData.append('client_id', this.clientId);
+    formData.append('client_secret', this.clientSecret);
+    formData.append('code', code);
+    formData.append('redirect_uri', this.redirectUri);
+    formData.append('code_verifier', codeVerifier);
+
+    console.log('Debug - Request body:', formData.toString());
+
+    const response = await fetch(`${HF_OAUTH_BASE_URL}/token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Accept': 'application/json',
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('HuggingFace token exchange failed:', errorText);
+      console.error('Response status:', response.status);
+      console.error('Response headers:', Object.fromEntries(response.headers.entries()));
+      throw new Error(`Failed to exchange code for token: ${response.status} - ${errorText}`);
+    }
+
+    const tokenData = await response.json();
+    
+    if (!tokenData.access_token) {
+      throw new Error('No access token received from HuggingFace');
+    }
+
+    return tokenData.access_token;
+  }
+
+  /**
+   * Get user information from HuggingFace API
+   */
+  async getUserInfo(accessToken: string): Promise<HuggingFaceUserInfo> {
+    // First try the v2 endpoint
+    try {
+      const response = await fetch(`${HF_API_BASE_URL}/whoami-v2`, {
+        headers: {
+          'Authorization': `Bearer ${accessToken}`,
+          'Accept': 'application/json',
+        },
+      });
+
+      if (response.ok) {
+        const userData = await response.json();
+        console.log('Debug - User data keys:', Object.keys(userData));
+
+        return {
+          username: userData.name || '',
+          fullName: userData.fullname || userData.name || '',
+          email: userData.email || undefined,
+          avatarUrl: userData.avatarUrl || undefined,
+        };
+      }
+    } catch (error) {
+      console.log('Error with whoami-v2 endpoint, falling back to v1');
+    }
+
+    // Fall back to v1 endpoint
+    const response = await fetch(`${HF_API_BASE_URL}/whoami`, {
+      headers: {
+        'Authorization': `Bearer ${accessToken}`,
+        'Accept': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Failed to get HuggingFace user info:', errorText);
+      throw new Error(`Failed to get user info: ${response.status} - ${errorText}`);
+    }
+
+    const userData = await response.json();
+    console.log('Debug - User data keys (v1):', Object.keys(userData));
+
+    return {
+      username: userData.name || userData.user || '',
+      fullName: userData.fullname || userData.name || userData.user || '',
+      email: userData.email || undefined,
+      avatarUrl: userData.avatarUrl || userData.avatar_url || undefined,
+    };
+  }
+
+  /**
+   * Complete OAuth flow: exchange code and get user info
+   */
+  async completeOAuthFlow(code: string, codeVerifier: string): Promise<{
+    accessToken: string;
+    userInfo: HuggingFaceUserInfo;
+  }> {
+    const accessToken = await this.exchangeCodeForToken(code, codeVerifier);
+    const userInfo = await this.getUserInfo(accessToken);
+
+    return { accessToken, userInfo };
+  }
+}
+
+// Singleton instance
+export const huggingFaceOAuth = new HuggingFaceOAuthService();

app/lib/oauth-utils.server.ts

@@ -0,0 +1,43 @@
+import { createHash, randomBytes } from 'crypto';
+
+/**
+ * Generate a cryptographically secure random string
+ */
+export function generateRandomString(length: number): string {
+  const bytes = randomBytes(Math.ceil(length / 2));
+  return bytes.toString('hex').slice(0, length);
+}
+
+/**
+ * Create a code challenge for PKCE (Proof Key for Code Exchange)
+ */
+export async function createCodeChallenge(codeVerifier: string): Promise<string> {
+  const hash = createHash('sha256');
+  hash.update(codeVerifier);
+  const digest = hash.digest();
+  
+  // Convert to base64url (URL-safe base64 without padding)
+  return digest
+    .toString('base64')
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '');
+}
+
+/**
+ * Parse cookies from cookie header string
+ */
+export function parseCookies(cookieHeader: string): Record<string, string> {
+  const cookies: Record<string, string> = {};
+  
+  if (!cookieHeader) return cookies;
+  
+  cookieHeader.split(';').forEach(cookie => {
+    const [name, ...rest] = cookie.trim().split('=');
+    if (name && rest.length > 0) {
+      cookies[name] = rest.join('=');
+    }
+  });
+  
+  return cookies;
+}

app/lib/session.server.ts

@@ -2,7 +2,7 @@ import { createCookieSessionStorage } from "@remix-run/node";
 
 export { getSession, commitSession, destroySession };
 
-export interface UserSession {
+export interface GitHubUserInfo {
   userId: string;
   login: string;
   name?: string;
@@ -10,6 +10,20 @@ export interface UserSession {
   avatar_url?: string;
 }
 
+export interface HuggingFaceUserInfo {
+  username: string;
+  fullName?: string;
+  email?: string;
+  avatarUrl?: string;
+}
+
+export interface UserSession {
+  github?: GitHubUserInfo;
+  huggingface?: HuggingFaceUserInfo;
+  isLinked: boolean;
+  linkedAt?: string;
+}
+
 const sessionSecret = process.env.SESSION_SECRET;
 if (!sessionSecret) {
   throw new Error('SESSION_SECRET environment variable is required');

app/routes/_index.tsx

@@ -2,47 +2,76 @@ import type { MetaFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData, Link, useSearchParams } from "@remix-run/react";
 import { getUserSession } from "~/lib/session.server";
+import { accountLinkingService } from "~/lib/account-linking.server";
 
 export const meta: MetaFunction = () => {
   return [
-    { title: "HugeX GitHub App" },
-    { name: "description", content: "GitHub App with user authentication" },
+    { title: "GitHub + HuggingFace Account Linking" },
+    { name: "description", content: "Link your GitHub and HuggingFace accounts" },
   ];
 };
 
 export async function loader({ request }: LoaderFunctionArgs) {
-  const user = await getUserSession(request);
+  const userSession = 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, details, message });
+  // Get linking stats if available
+  let linkingStats = null;
+  if (userSession) {
+    linkingStats = accountLinkingService.getStats();
+  }
+  
+  return json({ 
+    userSession, 
+    error, 
+    details, 
+    message,
+    linkingStats
+  });
 }
 
 export default function Index() {
-  const { user, error, details, message } = useLoaderData<typeof loader>();
+  const { userSession, error, details, message, linkingStats } = useLoaderData<typeof loader>();
   const [searchParams] = useSearchParams();
 
+  // Determine authentication status
+  const hasGitHub = !!userSession?.github;
+  const hasHuggingFace = !!userSession?.huggingface;
+  const isLinked = userSession?.isLinked || false;
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <div className="flex h-screen items-center justify-center">
         <div className="flex flex-col items-center gap-8 max-w-2xl mx-auto px-4">
           <header className="flex flex-col items-center gap-6">
-            <div className="bg-white rounded-full p-4 shadow-lg">
-              <svg
-                className="w-16 h-16 text-blue-600"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-              </svg>
+            <div className="flex space-x-4">
+              <div className="bg-white rounded-full p-4 shadow-lg">
+                <svg
+                  className="w-16 h-16 text-blue-600"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+              </div>
+              <div className="bg-white rounded-full p-4 shadow-lg">
+                <svg
+                  className="w-16 h-16 text-yellow-500"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm0 2.25c2.387 0 4.5 1.773 4.5 4.5S14.387 13.5 12 13.5 7.5 11.727 7.5 9s2.113-4.5 4.5-4.5zm0 16.5a9.26 9.26 0 01-6.75-2.798c.042-2.233 4.5-3.452 6.75-3.452s6.708 1.219 6.75 3.452A9.26 9.26 0 0112 21z" />
+                </svg>
+              </div>
             </div>
             <h1 className="text-4xl font-bold text-gray-900">
-              HugeX GitHub App
+              Account Linking
             </h1>
             <p className="text-lg text-gray-600 text-center">
-              GitHub App with user authentication and webhook support
+              Link your GitHub and HuggingFace accounts in one place
             </p>
           </header>
 
@@ -66,23 +95,23 @@ export default function Index() {
                         {details && <p className="mt-1 font-mono text-xs">Details: {details}</p>}
                       </div>
                     )}
-                    {error === "no_code" && "No authorization code received from GitHub."}
+                    {error === "no_code" && "No authorization code received."}
                     {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" && (
+                    {error === "hf_oauth_not_configured" && (
                       <div>
-                        <p>The authorization code has expired or is invalid.</p>
-                        <p className="mt-1">Please try signing in again.</p>
+                        <p>HuggingFace OAuth is not properly configured.</p>
+                        <p className="mt-1">Please set up the required environment variables.</p>
                       </div>
                     )}
-                    {error === "invalid_client" && (
+                    {error === "hf_oauth_failed" && (
                       <div>
-                        <p>GitHub App configuration error.</p>
-                        <p className="mt-1">Please check the client ID and secret.</p>
+                        <p>HuggingFace authentication failed.</p>
+                        {details && <p className="mt-1 font-mono text-xs">Details: {details}</p>}
                       </div>
                     )}
                   </div>
@@ -91,106 +120,218 @@ export default function Index() {
             </div>
           )}
 
-          {/* Main Content */}
-          {user ? (
-            <div className="bg-white rounded-lg shadow-lg p-8 w-full">
-              <div className="text-center">
-                <div className="flex items-center justify-center mb-4">
-                  {user.avatar_url && (
-                    <img
-                      src={user.avatar_url}
-                      alt={user.login}
-                      className="w-16 h-16 rounded-full mr-4"
-                    />
-                  )}
-                  <div>
-                    <h2 className="text-2xl font-bold text-gray-900">
-                      Welcome back, {user.name || user.login}!
-                    </h2>
-                    <p className="text-gray-600">@{user.login}</p>
-                  </div>
-                </div>
-                <div className="mt-6 flex gap-4 justify-center">
-                  <Link
-                    to="/dashboard"
-                    className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          {/* Main Account Linking Interface */}
+          <div className="bg-white rounded-lg shadow-lg p-8 w-full">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+              Account Status
+            </h2>
+            
+            <div className="grid grid-cols-2 gap-8 mb-8">
+              {/* GitHub Authentication Status */}
+              <div className="border rounded-lg p-6 flex flex-col items-center">
+                <div className={`p-3 rounded-full ${hasGitHub ? 'bg-green-100' : 'bg-gray-100'} mb-4`}>
+                  <svg
+                    className={`w-8 h-8 ${hasGitHub ? 'text-green-600' : 'text-gray-400'}`}
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
                   >
-                    Go to Dashboard
-                  </Link>
-                  <Link
-                    to="/status"
-                    className="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                  </svg>
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">GitHub</h3>
+                
+                {hasGitHub ? (
+                  <div className="text-center">
+                    <div className="flex items-center justify-center mb-2">
+                      {userSession?.github?.avatar_url && (
+                        <img
+                          src={userSession.github.avatar_url}
+                          alt={userSession.github.login}
+                          className="w-12 h-12 rounded-full mr-3"
+                        />
+                      )}
+                      <div>
+                        <p className="font-medium text-gray-900">{userSession?.github?.name || userSession?.github?.login}</p>
+                        <p className="text-sm text-gray-600">@{userSession?.github?.login}</p>
+                      </div>
+                    </div>
+                    <div className="mt-4">
+                      <Link
+                        to="/auth/logout?service=github"
+                        className="text-sm text-red-600 hover:text-red-800"
+                      >
+                        Disconnect
+                      </Link>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="text-center">
+                    <p className="text-gray-500 mb-4">Not connected</p>
+                    <Link
+                      to="/auth/github"
+                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none"
+                    >
+                      <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                      </svg>
+                      Connect GitHub
+                    </Link>
+                  </div>
+                )}
+              </div>
+
+              {/* HuggingFace Authentication Status */}
+              <div className="border rounded-lg p-6 flex flex-col items-center">
+                <div className={`p-3 rounded-full ${hasHuggingFace ? 'bg-green-100' : 'bg-gray-100'} mb-4`}>
+                  <svg
+                    className={`w-8 h-8 ${hasHuggingFace ? 'text-green-600' : 'text-gray-400'}`}
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
                   >
-                    Check Status
-                  </Link>
+                    <path d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm0 2.25c2.387 0 4.5 1.773 4.5 4.5S14.387 13.5 12 13.5 7.5 11.727 7.5 9s2.113-4.5 4.5-4.5zm0 16.5a9.26 9.26 0 01-6.75-2.798c.042-2.233 4.5-3.452 6.75-3.452s6.708 1.219 6.75 3.452A9.26 9.26 0 0112 21z" />
+                  </svg>
                 </div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">HuggingFace</h3>
+                
+                {hasHuggingFace ? (
+                  <div className="text-center">
+                    <div className="flex items-center justify-center mb-2">
+                      {userSession?.huggingface?.avatarUrl && (
+                        <img
+                          src={userSession.huggingface.avatarUrl}
+                          alt={userSession.huggingface.username}
+                          className="w-12 h-12 rounded-full mr-3"
+                        />
+                      )}
+                      <div>
+                        <p className="font-medium text-gray-900">{userSession?.huggingface?.fullName || userSession?.huggingface?.username}</p>
+                        <p className="text-sm text-gray-600">@{userSession?.huggingface?.username}</p>
+                      </div>
+                    </div>
+                    <div className="mt-4">
+                      <Link
+                        to="/auth/logout?service=huggingface"
+                        className="text-sm text-red-600 hover:text-red-800"
+                      >
+                        Disconnect
+                      </Link>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="text-center">
+                    <p className="text-gray-500 mb-4">Not connected</p>
+                    <Link
+                      to="/auth/huggingface"
+                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none"
+                    >
+                      <svg 
+                        className="w-4 h-4 mr-2" 
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm0 2.25c2.387 0 4.5 1.773 4.5 4.5S14.387 13.5 12 13.5 7.5 11.727 7.5 9s2.113-4.5 4.5-4.5zm0 16.5a9.26 9.26 0 01-6.75-2.798c.042-2.233 4.5-3.452 6.75-3.452s6.708 1.219 6.75 3.452A9.26 9.26 0 0112 21z" />
+                      </svg>
+                      Connect HuggingFace
+                    </Link>
+                  </div>
+                )}
               </div>
             </div>
-          ) : (
-            <div className="bg-white rounded-lg shadow-lg p-8 w-full">
-              <div className="text-center">
-                <h2 className="text-2xl font-bold text-gray-900 mb-4">
-                  Get Started
-                </h2>
-                <p className="text-gray-600 mb-6">
-                  Authenticate with GitHub to enable user-specific actions when webhooks are triggered.
-                </p>
-                <Link
-                  to="/auth/github"
-                  className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-                >
-                  <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                  </svg>
-                  Sign in with GitHub
-                </Link>
-                <div className="mt-4">
-                  <Link
-                    to="/status"
-                    className="text-sm text-blue-600 hover:text-blue-700 font-medium"
-                  >
-                    Check Environment Status
-                  </Link>
+
+            {/* Account Linking Status */}
+            <div className="border rounded-lg p-6 mb-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-semibold text-gray-900">Account Linking Status</h3>
+                <div className={`px-3 py-1 rounded-full text-sm font-medium ${isLinked ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
+                  {isLinked ? 'Linked' : 'Not Linked'}
                 </div>
               </div>
+
+              {isLinked ? (
+                <div className="text-center bg-green-50 p-4 rounded-md">
+                  <svg className="w-10 h-10 text-green-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                  <p className="text-green-800 font-medium">Your GitHub and HuggingFace accounts are linked!</p>
+                  <p className="text-sm text-green-700 mt-1">Linked on: {new Date(userSession?.linkedAt || '').toLocaleString()}</p>
+                  
+                  <div className="mt-4">
+                    <button
+                      onClick={() => {
+                        if (confirm("Are you sure you want to unlink your accounts?")) {
+                          window.location.href = "/auth/logout?unlink=true";
+                        }
+                      }}
+                      className="text-sm text-red-600 hover:text-red-800 underline"
+                    >
+                      Unlink Accounts
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center">
+                  {hasGitHub && hasHuggingFace ? (
+                    <div className="bg-yellow-50 p-4 rounded-md">
+                      <svg className="w-10 h-10 text-yellow-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                      </svg>
+                      <p className="text-yellow-800 font-medium">Your accounts are not linked</p>
+                      <p className="text-sm text-yellow-700 mt-1">You have both accounts connected but they couldn't be linked automatically.</p>
+                      <p className="text-sm text-yellow-700 mt-1">This may be because one of these accounts is already linked to another account.</p>
+                      
+                      <div className="mt-4">
+                        <button
+                          onClick={() => {
+                            if (confirm("Try to link your accounts? This will refresh your authentication.")) {
+                              window.location.href = "/auth/github?link=true";
+                            }
+                          }}
+                          className="text-sm text-blue-600 hover:text-blue-800 underline"
+                        >
+                          Try Manual Linking
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="bg-gray-50 p-4 rounded-md">
+                      <p className="text-gray-700">
+                        Connect both your GitHub and HuggingFace accounts to link them.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
-          )}
 
-          {/* Features */}
-          <div className="grid md:grid-cols-3 gap-6 w-full mt-8">
-            <div className="bg-white rounded-lg shadow p-6">
-              <div className="text-blue-600 mb-3">
-                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-                </svg>
+            {/* Stats */}
+            {linkingStats && (
+              <div className="text-center text-sm text-gray-500 mt-4">
+                <p>Total linked accounts: {linkingStats.totalLinks}</p>
+                <p>Last updated: {new Date(linkingStats.lastModified).toLocaleString()}</p>
               </div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">User Authentication</h3>
+            )}
+          </div>
+
+          {/* Quick Info */}
+          <div className="grid md:grid-cols-3 gap-6 w-full">
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Why Link Accounts?</h3>
               <p className="text-gray-600 text-sm">
-                Authenticate users with GitHub OAuth to perform actions on their behalf.
+                Linking your GitHub and HuggingFace accounts enables seamless integration between the two platforms.
               </p>
             </div>
 
             <div className="bg-white rounded-lg shadow p-6">
-              <div className="text-green-600 mb-3">
-                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">Webhook Support</h3>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">How It Works</h3>
               <p className="text-gray-600 text-sm">
-                Handle GitHub webhooks and associate them with authenticated users.
+                Simply connect both accounts and we'll automatically link them for you. Your data is stored securely.
               </p>
             </div>
 
             <div className="bg-white rounded-lg shadow p-6">
-              <div className="text-purple-600 mb-3">
-                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">API Integration</h3>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Privacy</h3>
               <p className="text-gray-600 text-sm">
-                Use authenticated user sessions to make GitHub API calls.
+                We only store the minimum required information to link your accounts. No sensitive data is kept.
               </p>
             </div>
           </div>
@@ -198,6 +339,4 @@ export default function Index() {
       </div>
     </div>
   );
-}
-
-
+}

app/routes/auth.github.callback.tsx

@@ -2,6 +2,7 @@ import { redirect } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { githubApp } from "~/lib/github-app.server";
 import { getSession, commitSession } from "~/lib/session.server";
+import { accountLinkingService } from "~/lib/account-linking.server";
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
@@ -11,7 +12,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const installation_id = url.searchParams.get("installation_id");
   const setup_action = url.searchParams.get("setup_action");
 
-  console.log('🔄 OAuth callback received');
+  console.log('🔄 GitHub OAuth callback received');
   if (error) {
     console.log('- Error:', error);
   }
@@ -33,18 +34,53 @@ export async function loader({ request }: LoaderFunctionArgs) {
   try {
     // Exchange code for access token and get user info
     const userAuth = await githubApp.handleCallback(code, state || undefined);
+    console.log('✅ GitHub OAuth successful for user:', userAuth.login);
     
-    // Create user session
+    // Get existing session
     const session = await getSession(request.headers.get("Cookie"));
-    session.set("user", {
+    let userSession = session.get('user') || { isLinked: false };
+
+    // Add GitHub info to session
+    userSession.github = {
       userId: userAuth.id.toString(),
       login: userAuth.login,
       name: userAuth.name,
       email: userAuth.email,
       avatar_url: userAuth.avatar_url,
-    });
+    };
+
+    // Check if we can link accounts (if HuggingFace auth exists)
+    if (userSession.huggingface) {
+      const linkCheck = accountLinkingService.canLink(
+        userAuth.id.toString(),
+        userSession.huggingface.username
+      );
+
+      if (linkCheck.canLink) {
+        // Create account link
+        const accountLink = accountLinkingService.createLink(
+          userAuth.id.toString(),
+          userAuth.login,
+          userSession.huggingface.username
+        );
+
+        userSession.isLinked = true;
+        userSession.linkedAt = accountLink.linkedAt;
+        
+        console.log(`🔗 Accounts automatically linked: ${userAuth.login} ↔ ${userSession.huggingface.username}`);
+      } else {
+        console.warn('⚠️ Cannot link accounts:', linkCheck.reason);
+        userSession.isLinked = false;
+      }
+    } else {
+      console.log('ℹ️ No HuggingFace authentication found, GitHub auth saved for later linking');
+      userSession.isLinked = false;
+    }
+
+    // Save updated session
+    session.set('user', userSession);
 
-    const redirectUrl = installation_id ? "/install" : "/dashboard";
+    const redirectUrl = installation_id ? "/install" : "/";
 
     return redirect(redirectUrl, {
       headers: {

app/routes/auth.huggingface.callback.tsx

@@ -0,0 +1,160 @@
+import { redirect } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { huggingFaceOAuth } from "~/lib/huggingface-oauth.server";
+import { parseCookies } from "~/lib/oauth-utils.server";
+import { getSession, commitSession } from "~/lib/session.server";
+import { accountLinkingService } from "~/lib/account-linking.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  console.log("🔥 HuggingFace OAuth callback route hit");
+
+  const url = new URL(request.url);
+  const code = url.searchParams.get("code");
+  const state = url.searchParams.get("state");
+  const error = url.searchParams.get("error");
+  const errorDescription = url.searchParams.get("error_description");
+
+  console.log("Callback params:", {
+    code: code ? `${code.substring(0, 4)}...` : null,
+    state: state ? `${state.substring(0, 4)}...` : null,
+    error,
+    errorDescription
+  });
+
+  // Handle OAuth errors
+  if (error) {
+    console.error("HuggingFace OAuth error:", error);
+    if (errorDescription) {
+      console.error("Error description:", errorDescription);
+    }
+    
+    const redirectUrl = `/?error=hf_oauth_failed&details=${encodeURIComponent(
+      errorDescription ? `${error}: ${errorDescription}` : error
+    )}`;
+    
+    console.log("Redirecting to:", redirectUrl);
+    return redirect(redirectUrl);
+  }
+
+  if (!code || !state) {
+    console.error("Missing code or state in HuggingFace OAuth callback");
+    return redirect("/?error=hf_missing_params");
+  }
+
+  // Get stored PKCE data from cookies
+  const cookieHeader = request.headers.get("Cookie");
+  const cookies = parseCookies(cookieHeader || "");
+
+  console.log("Cookie keys available:", Object.keys(cookies));
+
+  const storedState = cookies.hf_oauth_state;
+  const codeVerifier = cookies.hf_oauth_code_verifier;
+  const returnTo = cookies.hf_oauth_return_to
+    ? decodeURIComponent(cookies.hf_oauth_return_to)
+    : "/";
+
+  console.log("Cookie values:", {
+    storedState: storedState ? `${storedState.substring(0, 4)}...` : null,
+    codeVerifier: codeVerifier ? `length: ${codeVerifier.length}` : null,
+    returnTo
+  });
+
+  // Verify state parameter (CSRF protection)
+  if (!storedState || storedState !== state) {
+    console.error("HuggingFace OAuth state mismatch");
+    console.error("Stored state:", storedState ? storedState.substring(0, 10) + "..." : "null");
+    console.error("Received state:", state ? state.substring(0, 10) + "..." : "null");
+    return redirect("/?error=hf_state_mismatch");
+  }
+
+  if (!codeVerifier) {
+    console.error("Missing code verifier for HuggingFace OAuth");
+    return redirect("/?error=hf_missing_verifier");
+  }
+
+  try {
+    console.log("🔄 Attempting to complete OAuth flow with code and verifier");
+    
+    // Complete OAuth flow
+    const { accessToken, userInfo } = await huggingFaceOAuth.completeOAuthFlow(
+      code,
+      codeVerifier
+    );
+    
+    console.log("✅ HuggingFace OAuth successful for user:", userInfo.username);
+
+    // Get existing session
+    const session = await getSession(request.headers.get("Cookie"));
+    let userSession = session.get("user") || { isLinked: false };
+
+    // Add HuggingFace info to session
+    userSession.huggingface = userInfo;
+
+    // Check if we can link accounts (if GitHub auth exists)
+    if (userSession.github) {
+      const linkCheck = accountLinkingService.canLink(
+        userSession.github.userId,
+        userInfo.username
+      );
+
+      if (linkCheck.canLink) {
+        // Create account link
+        const accountLink = accountLinkingService.createLink(
+          userSession.github.userId,
+          userSession.github.login,
+          userInfo.username
+        );
+
+        userSession.isLinked = true;
+        userSession.linkedAt = accountLink.linkedAt;
+
+        console.log(
+          `🔗 Accounts automatically linked: ${userSession.github.login} ↔ ${userInfo.username}`
+        );
+      } else {
+        console.warn("⚠️ Cannot link accounts:", linkCheck.reason);
+        userSession.isLinked = false;
+      }
+    } else {
+      console.log(
+        "ℹ️ No GitHub authentication found, HuggingFace auth saved for later linking"
+      );
+      userSession.isLinked = false;
+    }
+
+    // Save updated session
+    session.set("user", userSession);
+
+    // Create response with updated session cookie
+    const response = redirect(returnTo);
+
+    // Clear OAuth temporary cookies
+    const clearCookieOptions = "Path=/; HttpOnly; SameSite=Lax; Max-Age=0";
+    response.headers.append(
+      "Set-Cookie",
+      `hf_oauth_state=; ${clearCookieOptions}`
+    );
+    response.headers.append(
+      "Set-Cookie",
+      `hf_oauth_code_verifier=; ${clearCookieOptions}`
+    );
+    response.headers.append(
+      "Set-Cookie",
+      `hf_oauth_return_to=; ${clearCookieOptions}`
+    );
+
+    // Set session cookie
+    response.headers.append("Set-Cookie", await commitSession(session));
+
+    console.log("✅ Redirecting to:", returnTo);
+    return response;
+  } catch (error: any) {
+    console.error("HuggingFace OAuth callback error:", error);
+    const errorMessage = error.message || "Unknown error";
+    console.error("Error details:", errorMessage);
+    
+    return redirect(
+      `/?error=hf_callback_failed&message=${encodeURIComponent(errorMessage)}`
+    );
+  }
+}

app/routes/auth.huggingface.tsx

@@ -0,0 +1,57 @@
+import { redirect } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { huggingFaceOAuth } from "~/lib/huggingface-oauth.server";
+import { generateRandomString, createCodeChallenge } from "~/lib/oauth-utils.server";
+import { getUserSession } from "~/lib/session.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  console.log('🔥 HuggingFace OAuth login route hit');
+
+  // Check if HuggingFace OAuth is configured
+  if (!huggingFaceOAuth.isConfigured()) {
+    console.error('❌ HuggingFace OAuth not configured');
+    return redirect('/?error=hf_oauth_not_configured');
+  }
+
+  const url = new URL(request.url);
+  const returnTo = url.searchParams.get('returnTo') || '/';
+
+  // Check for existing user session to see if account linking is in progress
+  const userSession = await getUserSession(request);
+  if (userSession?.huggingface) {
+    console.log('ℹ️ User already has HuggingFace auth in session');
+    
+    // Check if this is an account linking flow
+    if (returnTo.includes('link=true')) {
+      console.log('🔄 Re-authenticating for account linking purposes');
+    } else {
+      // Already authenticated with HF, redirect to return URL
+      console.log('✅ Already authenticated with HuggingFace, redirecting');
+      return redirect(returnTo);
+    }
+  }
+
+  // Generate PKCE parameters for security
+  const state = generateRandomString(32);
+  const codeVerifier = generateRandomString(128);
+  const codeChallenge = await createCodeChallenge(codeVerifier);
+
+  // Get authorization URL
+  const authUrl = huggingFaceOAuth.getAuthorizationUrl(state, codeChallenge);
+
+  console.log('🔄 Redirecting to HuggingFace OAuth authorization URL');
+
+  // Create response with redirect and secure cookies for PKCE
+  const response = redirect(authUrl);
+
+  // Store PKCE data and return URL in secure HttpOnly cookies
+  const cookieOptions = 'Path=/; HttpOnly; SameSite=Lax; Max-Age=600'; // 10 minutes
+
+  response.headers.append('Set-Cookie', `hf_oauth_state=${state}; ${cookieOptions}`);
+  response.headers.append('Set-Cookie', `hf_oauth_code_verifier=${codeVerifier}; ${cookieOptions}`);
+  response.headers.append('Set-Cookie', `hf_oauth_return_to=${encodeURIComponent(returnTo)}; ${cookieOptions}`);
+
+  console.log('✅ HuggingFace OAuth cookies set');
+
+  return response;
+}

app/routes/auth.logout.tsx

@@ -1,17 +1,95 @@
 import { redirect } from "@remix-run/node";
-import type { ActionFunctionArgs } from "@remix-run/node";
-import { getSession, destroySession } from "~/lib/session.server";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { getSession, commitSession, destroySession } from "~/lib/session.server";
+import { accountLinkingService } from "~/lib/account-linking.server";
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const service = url.searchParams.get("service");
+  const unlink = url.searchParams.get("unlink") === "true";
+  
   const session = await getSession(request.headers.get("Cookie"));
+  const userSession = session.get("user");
   
+  // If no user session, just redirect to home
+  if (!userSession) {
+    return redirect("/");
+  }
+
+  // Handle account unlinking
+  if (unlink && userSession.isLinked && userSession.github) {
+    console.log(`🔄 Unlinking accounts for GitHub user: ${userSession.github.login}`);
+    try {
+      // Remove the link from storage
+      accountLinkingService.removeLink(userSession.github.userId);
+      
+      // Update session to reflect unlinked status
+      userSession.isLinked = false;
+      delete userSession.linkedAt;
+      
+      // Save updated session
+      session.set("user", userSession);
+      
+      return redirect("/?message=accounts_unlinked", {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
+    } catch (error) {
+      console.error("Error unlinking accounts:", error);
+      return redirect("/?error=unlink_failed");
+    }
+  }
+
+  // Handle selective logout by service
+  if (service) {
+    console.log(`🔄 Logging out of ${service} service`);
+    
+    if (service === "github" && userSession.github) {
+      // Remove GitHub info but keep HuggingFace if present
+      delete userSession.github;
+      
+      // If linked, update linking status
+      if (userSession.isLinked) {
+        userSession.isLinked = false;
+        delete userSession.linkedAt;
+      }
+      
+      // Save updated session
+      session.set("user", userSession);
+      
+      return redirect("/", {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
+    }
+    
+    if (service === "huggingface" && userSession.huggingface) {
+      // Remove HuggingFace info but keep GitHub if present
+      delete userSession.huggingface;
+      
+      // If linked, update linking status
+      if (userSession.isLinked) {
+        userSession.isLinked = false;
+        delete userSession.linkedAt;
+      }
+      
+      // Save updated session
+      session.set("user", userSession);
+      
+      return redirect("/", {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
+    }
+  }
+
+  // Full logout (destroy entire session)
   return redirect("/", {
     headers: {
       "Set-Cookie": await destroySession(session),
     },
   });
-}
-
-export async function loader() {
-  return redirect("/");
-}
+}