diff --git a/src/app/admin/instagram/page.tsx b/src/app/admin/instagram/page.tsx index 76287cf..6a18111 100644 --- a/src/app/admin/instagram/page.tsx +++ b/src/app/admin/instagram/page.tsx @@ -15,13 +15,8 @@ interface InstagramPost { } const META_GRAPH_VERSION = 'v26.0' -const META_INSTAGRAM_SCOPES = [ - 'public_profile', - 'email', - 'pages_show_list', - 'pages_read_engagement', - 'instagram_basic', -].join(',') +const FACEBOOK_LOGIN_SCOPES = 'public_profile,email' +const INSTAGRAM_LOGIN_SCOPES = 'instagram_business_basic' export default function AdminInstagramPage() { const [posts, setPosts] = useState([]) @@ -29,12 +24,12 @@ export default function AdminInstagramPage() { const [syncing, setSyncing] = useState(false) const [saving, setSaving] = useState(false) const [message, setMessage] = useState('') - const [isConnected, setIsConnected] = useState(true) + const [isConnected, setIsConnected] = useState(false) // Instagram Graph API & Meta MCP Server Credentials const [instagramAccount, setInstagramAccount] = useState('sahad_____sha') const [appId, setAppId] = useState('1679398459977278') - const [authType, setAuthType] = useState<'meta_business' | 'instagram_basic' | 'direct_token'>('meta_business') + const [authType, setAuthType] = useState<'instagram_login' | 'direct_token'>('instagram_login') const [accessToken, setAccessToken] = useState('') const [syncInterval, setSyncInterval] = useState('6h') const [showSetupGuide, setShowSetupGuide] = useState(false) @@ -130,7 +125,8 @@ export default function AdminInstagramPage() { } }, [appId]) - // Official Facebook SDK Login Popup & Token Receiver + // Facebook Login verifies the Meta identity only. Instagram professional + // account access is authorized separately through Instagram Login. const handleFacebookSDKLogin = () => { // @ts-ignore if (typeof window !== 'undefined' && window.FB) { @@ -138,23 +134,12 @@ export default function AdminInstagramPage() { window.FB.login( (response: any) => { if (response.authResponse?.accessToken) { - const token = response.authResponse.accessToken - setAccessToken(token) - setIsConnected(true) - setMessage('✅ Official Facebook SDK Login Successful! Auto-syncing Instagram Posts...') - fetch(`/api/instagram-feed?token=${encodeURIComponent(token)}`) - .then((res) => res.json()) - .then((data) => { - if (data.success) { - setMessage(`⚡ Facebook SDK Auto-Synced ${data.count} Instagram posts from @${data.username}!`) - fetchPosts() - } - }) + setMessage('✅ Facebook identity verified. Use Authenticate Instagram to grant Instagram feed access.') } else { setMessage('⚠️ Facebook SDK Login cancelled or not authorized.') } }, - { scope: META_INSTAGRAM_SCOPES, return_scopes: true } + { scope: FACEBOOK_LOGIN_SCOPES, return_scopes: true } ) } else { handleConnectAccount() @@ -163,22 +148,6 @@ export default function AdminInstagramPage() { // Handle OAuth Connect Account with Vercel Connect & Real Callback const handleConnectAccount = async () => { - try { - // @ts-ignore - const vercelConnect = await import('@vercel/connect').catch(() => null) - if (vercelConnect?.startAuthorization) { - await vercelConnect.startAuthorization('instagram.com/instagram', { - subject: { type: 'user', id: instagramAccount }, - scopes: ['user_profile', 'user_media'], - }) - setIsConnected(true) - setMessage('🔗 Initiated Instagram Vercel Connect Authorization!') - return - } - } catch { - // Vercel Connect fallback to direct Instagram OAuth - } - const cleanAppId = appId.trim() if (!cleanAppId) { @@ -187,16 +156,19 @@ export default function AdminInstagramPage() { return } - const redirectUri = window.location.origin + '/api/instagram-callback' - let authUrl = '' - - if (authType === 'meta_business') { - authUrl = `https://www.facebook.com/${META_GRAPH_VERSION}/dialog/oauth?client_id=${cleanAppId}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(META_INSTAGRAM_SCOPES)}&response_type=code&state=facebook` - } else { - authUrl = `https://api.instagram.com/oauth/authorize?client_id=${cleanAppId}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=user_profile,user_media&response_type=code` + if (authType === 'direct_token') { + if (!accessToken.trim()) { + setMessage('⚠️ Paste an Instagram access token before connecting.') + return + } + await handleAutoSync() + return } - // Direct Full Page Redirect to avoid browser popup blockers + const redirectUri = window.location.origin + '/api/instagram-callback' + const authUrl = `https://www.instagram.com/oauth/authorize?enable_fb_login=0&force_authentication=1&client_id=${cleanAppId}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(INSTAGRAM_LOGIN_SCOPES)}&response_type=code` + + // Instagram Login is a separate use case from Facebook Login. window.location.href = authUrl } @@ -314,7 +286,7 @@ export default function AdminInstagramPage() { onClick={handleFacebookSDKLogin} className="flex items-center gap-2 rounded-xl bg-blue-600 border border-blue-400/40 px-4 py-2.5 text-xs font-bold text-white shadow-lg hover:bg-blue-500 transition" > - Login via Facebook SDK + Verify Facebook Login