Fix: Shopify Admin API access lost

The user is reporting that they no longer have access to the Shopify Admin API. This commit aims to investigate and resolve the issue causing this loss of access.

Author: lovable-dev[bot]

src/components/ShopifyDiagnostic.tsx

@@ -0,0 +1,226 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { AlertTriangle, CheckCircle, XCircle, RefreshCw } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/contexts/AuthContext';
+import { toast } from '@/hooks/use-toast';
+
+interface DiagnosticResult {
+  test: string;
+  status: 'success' | 'error' | 'warning';
+  message: string;
+  details?: string;
+}
+
+export const ShopifyDiagnostic: React.FC = () => {
+  const [results, setResults] = useState<DiagnosticResult[]>([]);
+  const [isRunning, setIsRunning] = useState(false);
+  const { user } = useAuth();
+
+  const runDiagnostic = async () => {
+    setIsRunning(true);
+    const diagnosticResults: DiagnosticResult[] = [];
+
+    try {
+      // Test 1: Vérifier l'authentification utilisateur
+      if (!user) {
+        diagnosticResults.push({
+          test: 'Authentification utilisateur',
+          status: 'error',
+          message: 'Utilisateur non connecté'
+        });
+      } else {
+        diagnosticResults.push({
+          test: 'Authentification utilisateur',
+          status: 'success',
+          message: 'Utilisateur connecté',
+          details: `UID: ${user.uid}`
+        });
+      }
+
+      // Test 2: Vérifier les intégrations Shopify existantes
+      try {
+        const { data: integrations, error: integrationsError } = await supabase
+          .from('shopify_integrations')
+          .select('*')
+          .eq('user_id', user?.uid)
+          .eq('active', true);
+
+        if (integrationsError) throw integrationsError;
+
+        if (!integrations || integrations.length === 0) {
+          diagnosticResults.push({
+            test: 'Intégrations Shopify',
+            status: 'warning',
+            message: 'Aucune intégration active trouvée'
+          });
+        } else {
+          diagnosticResults.push({
+            test: 'Intégrations Shopify',
+            status: 'success',
+            message: `${integrations.length} intégration(s) trouvée(s)`,
+            details: integrations.map(i => i.shop_domain).join(', ')
+          });
+
+          // Test 3: Vérifier les tokens pour chaque intégration
+          for (const integration of integrations) {
+            try {
+              // Test simple d'accès API via edge function
+              const { data: shopTest, error: shopTestError } = await supabase.functions.invoke('shopify-test-api', {
+                body: { 
+                  shopDomain: integration.shop_domain,
+                  accessToken: integration.access_token 
+                }
+              });
+
+              if (shopTestError) throw shopTestError;
+
+              if (shopTest?.success) {
+                diagnosticResults.push({
+                  test: `API Access - ${integration.shop_domain}`,
+                  status: 'success',
+                  message: 'Accès API fonctionnel'
+                });
+              } else {
+                diagnosticResults.push({
+                  test: `API Access - ${integration.shop_domain}`,
+                  status: 'error',
+                  message: 'Accès API bloqué',
+                  details: shopTest?.error || 'Token invalide ou expiré'
+                });
+              }
+            } catch (error) {
+              diagnosticResults.push({
+                test: `API Access - ${integration.shop_domain}`,
+                status: 'error',
+                message: 'Erreur de connexion API',
+                details: error.message
+              });
+            }
+          }
+        }
+      } catch (error) {
+        diagnosticResults.push({
+          test: 'Intégrations Shopify',
+          status: 'error',
+          message: 'Erreur accès base de données',
+          details: error.message
+        });
+      }
+
+      // Test 4: Vérifier les clés API Shopify
+      try {
+        const { data: configTest, error: configError } = await supabase.functions.invoke('shopify-config-test');
+        
+        if (configError) throw configError;
+
+        if (configTest?.apiKeyConfigured) {
+          diagnosticResults.push({
+            test: 'Configuration API Shopify',
+            status: 'success',
+            message: 'Clés API configurées'
+          });
+        } else {
+          diagnosticResults.push({
+            test: 'Configuration API Shopify',
+            status: 'error',
+            message: 'Clés API manquantes ou invalides'
+          });
+        }
+      } catch (error) {
+        diagnosticResults.push({
+          test: 'Configuration API Shopify',
+          status: 'error',
+          message: 'Impossible de vérifier la configuration',
+          details: error.message
+        });
+      }
+
+    } catch (error) {
+      console.error('Erreur diagnostic:', error);
+      toast({
+        title: "Erreur diagnostic",
+        description: "Impossible de terminer le diagnostic",
+        variant: "destructive"
+      });
+    }
+
+    setResults(diagnosticResults);
+    setIsRunning(false);
+  };
+
+  const getStatusIcon = (status: DiagnosticResult['status']) => {
+    switch (status) {
+      case 'success':
+        return <CheckCircle className="h-4 w-4 text-green-600" />;
+      case 'error':
+        return <XCircle className="h-4 w-4 text-red-600" />;
+      case 'warning':
+        return <AlertTriangle className="h-4 w-4 text-yellow-600" />;
+    }
+  };
+
+  const getStatusBadge = (status: DiagnosticResult['status']) => {
+    switch (status) {
+      case 'success':
+        return <Badge variant="default" className="bg-green-100 text-green-800">OK</Badge>;
+      case 'error':
+        return <Badge variant="destructive">ERREUR</Badge>;
+      case 'warning':
+        return <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">ATTENTION</Badge>;
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center space-x-2">
+            <AlertTriangle className="h-5 w-5 text-blue-600" />
+            <span>Diagnostic Shopify API</span>
+          </CardTitle>
+          <Button 
+            onClick={runDiagnostic} 
+            disabled={isRunning}
+            className="flex items-center space-x-2"
+          >
+            <RefreshCw className={`h-4 w-4 ${isRunning ? 'animate-spin' : ''}`} />
+            <span>Lancer diagnostic</span>
+          </Button>
+        </div>
+      </CardHeader>
+      
+      <CardContent>
+        {results.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            Cliquez sur "Lancer diagnostic" pour vérifier l'état de votre configuration Shopify
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {results.map((result, index) => (
+              <div key={index} className="flex items-start space-x-3 p-3 border rounded-lg">
+                <div className="flex-shrink-0 mt-0.5">
+                  {getStatusIcon(result.status)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-medium text-sm">{result.test}</h4>
+                    {getStatusBadge(result.status)}
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-1">{result.message}</p>
+                  {result.details && (
+                    <p className="text-xs text-muted-foreground mt-1 font-mono bg-gray-50 p-2 rounded">
+                      {result.details}
+                    </p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

src/pages/ShopifyTestPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ShopifyTestComponent } from '@/components/ShopifyTestComponent';
+import { ShopifyDiagnostic } from '@/components/ShopifyDiagnostic';
 import { ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useNavigate } from 'react-router-dom';
@@ -44,6 +45,8 @@ export const ShopifyTestPage: React.FC = () => {
             </CardContent>
           </Card>
 
+          <ShopifyDiagnostic />
+          
           <ShopifyTestComponent campaignId="test-campaign-123" />
         </div>
       </div>

supabase/config.toml

@@ -7,4 +7,13 @@ verify_jwt = false
 verify_jwt = false
 
 [functions.shopify-webhooks]
+verify_jwt = false
+
+[functions.shopify-test-api]
+verify_jwt = false
+
+[functions.shopify-config-test]
+verify_jwt = false
+
+[functions.shopify-private-app]
 verify_jwt = false

supabase/functions/shopify-config-test/index.ts

@@ -0,0 +1,52 @@
+import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+};
+
+serve(async (req) => {
+  if (req.method === 'OPTIONS') {
+    return new Response(null, { headers: corsHeaders });
+  }
+
+  try {
+    const shopifyApiKey = Deno.env.get('SHOPIFY_API_KEY');
+    const shopifyApiSecret = Deno.env.get('SHOPIFY_API_SECRET');
+
+    console.log('Test configuration Shopify:');
+    console.log('- API Key configurée:', !!shopifyApiKey);
+    console.log('- API Secret configurée:', !!shopifyApiSecret);
+
+    if (shopifyApiKey) {
+      console.log('- API Key (tronquée):', shopifyApiKey.substring(0, 8) + '...');
+    }
+
+    return new Response(
+      JSON.stringify({ 
+        apiKeyConfigured: !!shopifyApiKey,
+        apiSecretConfigured: !!shopifyApiSecret,
+        allConfigured: !!(shopifyApiKey && shopifyApiSecret),
+        apiKeyPreview: shopifyApiKey ? shopifyApiKey.substring(0, 8) + '...' : null
+      }),
+      { 
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+      }
+    );
+
+  } catch (error) {
+    console.error('Erreur test configuration:', error);
+    return new Response(
+      JSON.stringify({ 
+        error: error.message,
+        apiKeyConfigured: false,
+        apiSecretConfigured: false,
+        allConfigured: false
+      }),
+      { 
+        status: 500, 
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+      }
+    );
+  }
+});