usarfoss · Aryan1296 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/instagram-fixed.js b/instagram-fixed.js
@@ -0,0 +1,117 @@
+// Fixed Instagram module for hello.js
+// This addresses the Instagram Basic Display API requirements
+
+(function(hello) {
+
+    hello.init({
+
+        instagram: {
+
+            name: 'Instagram',
+
+            oauth: {
+                // Updated to use Instagram Basic Display API
+                version: 2,
+                auth: 'https://api.instagram.com/oauth/authorize',
+                grant: 'https://api.instagram.com/oauth/access_token'
+            },
+
+            // Refresh the access_token once expired
+            refresh: true,
+
+            scope: {
+                basic: 'user_profile,user_media',
+                photos: 'user_media',
+                email: '', // Not available in Basic Display API
+                publish: '', // Not available in Basic Display API
+                share: '',
+                publish_files: '',
+                files: '',
+                videos: '',
+                offline_access: ''
+            },
+
+            scope_delim: ',', // Instagram uses comma-separated scopes
+
+            base: 'https://graph.instagram.com/',
+
+            get: {
+                me: 'me?fields=id,username,account_type,media_count',
+                'me/photos': 'me/media?fields=id,media_type,media_url,thumbnail_url,caption,timestamp',
+                'me/media': 'me/media?fields=id,media_type,media_url,thumbnail_url,caption,timestamp'
+            },
+
+            wrap: {
+                me: function(o) {
+                    if (o.error) {
+                        return o;
+                    }
+
+                    // Format response to match hello.js expected format
+                    if (o.id) {
+                        o.name = o.username;
+                        o.thumbnail = o.profile_picture_url || '';
+                    }
+
+                    return o;
+                },
+
+                'me/photos': function(o) {
+                    if (o.error) {
+                        return o;
+                    }
+
+                    if (o.data) {
+                        o.data = o.data.filter(function(item) {
+                            return item.media_type === 'IMAGE';
+                        }).map(function(item) {
+                            return {
+                                id: item.id,
+                                name: item.caption || '',
+                                picture: item.media_url,
+                                thumbnail: item.thumbnail_url || item.media_url,
+                                created_time: item.timestamp
+                            };
+                        });
+                    }
+
+                    return o;
+                },
+
+                'me/media': function(o) {
+                    if (o.error) {
+                        return o;
+                    }
+
+                    if (o.data) {
+                        o.data = o.data.map(function(item) {
+                            return {
+                                id: item.id,
+                                name: item.caption || '',
+                                picture: item.media_url,
+                                thumbnail: item.thumbnail_url || item.media_url,
+                                created_time: item.timestamp,
+                                type: item.media_type
+                            };
+                        });
+                    }
+
+                    return o;
+                },
+
+                'default': function(o) {
+                    return o;
+                }
+            },
+
+            // Instagram Basic Display API supports CORS
+            xhr: function(p, qs) {
+                return false; // Use direct XHR, no proxy needed
+            },
+
+            // No form support
+            form: false
+        }
+    });
+
+})(hello);
diff --git a/instagram-login-fix.html b/instagram-login-fix.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Instagram Login Fix</title>
+    <script src="src/hello.polyfill.js"></script>
+    <script src="src/hello.js"></script>
+    <script src="src/modules/instagram.js"></script>
+</head>
+<body>
+    <h1>Instagram Login Fix</h1>
+    <button id="loginBtn" onclick="loginInstagram()">Login with Instagram</button>
+    <div id="result"></div>
+
+    <script>
+        // Replace with your actual Instagram client ID
+        const INSTAGRAM_CLIENT_ID = 'your_instagram_client_id_here';
+        const REDIRECT_URI = window.location.origin + '/redirect.html';
+
+        // Initialize hello.js with Instagram configuration
+        hello.init({
+            instagram: INSTAGRAM_CLIENT_ID
+        }, {
+            redirect_uri: REDIRECT_URI,
+            oauth_proxy: 'https://auth-server.herokuapp.com/proxy'
+        });
+
+        function loginInstagram() {
+            console.log('Starting Instagram login...');
+
+            // Clear any existing auth
+            hello('instagram').logout();
+
+            // Perform login with correct scope format
+            hello('instagram').login({
+                scope: 'basic' // Use space-separated scopes, not comma-separated
+            }).then(function(auth) {
+                console.log('Login successful:', auth);
+
+                // Get the auth response
+                const authResponse = hello('instagram').getAuthResponse();
+                console.log('Auth response:', authResponse);
+
+                if (authResponse && authResponse.access_token) {
+                    document.getElementById('result').innerHTML = 
+                        '<p>Login successful!</p>' +
+                        '<p>Access Token: ' + authResponse.access_token + '</p>';
+
+                    // Now you can make API calls
+                    getUserProfile();
+                } else {
+                    document.getElementById('result').innerHTML = 
+                        '<p>Login failed - no access token received</p>';
+                }
+
+            }).catch(function(error) {
+                console.error('Login failed:', error);
+                document.getElementById('result').innerHTML = 
+                    '<p>Login failed: ' + (error.error ? error.error.message : error.message) + '</p>';
+            });
+        }
+
+        function getUserProfile() {
+            hello('instagram').api('me').then(function(profile) {
+                console.log('Profile:', profile);
+                document.getElementById('result').innerHTML += 
+                    '<p>Welcome ' + profile.name + '!</p>' +
+                    '<img src="' + profile.thumbnail + '" alt="Profile picture">';
+            }).catch(function(error) {
+                console.error('Profile fetch failed:', error);
+            });
+        }
+
+        // Check if user is already logged in
+        hello.on('auth.login', function(auth) {
+            console.log('User logged in:', auth);
+        });
+
+        hello.on('auth.logout', function() {
+            console.log('User logged out');
+            document.getElementById('result').innerHTML = '';
+        });
+    </script>
+</body>
+</html>
diff --git a/instagram-setup-guide.md b/instagram-setup-guide.md
@@ -0,0 +1,104 @@
+# Instagram Login Fix Guide
+
+## Problem Analysis
+
+The original code had several issues:
+
+1. **Outdated Instagram API**: The old Instagram API was deprecated. You need to use Instagram Basic Display API.
+2. **Incorrect scope format**: Used `'basic, publish'` instead of proper format.
+3. **Missing initialization**: hello.js wasn't properly initialized before login.
+4. **Wrong OAuth endpoints**: The module was using old Instagram OAuth URLs.
+
+## Solution Steps
+
+### 1. Update Instagram App Configuration
+
+1. Go to [Facebook Developers](https://developers.facebook.com/)
+2. Create a new app or use existing one
+3. Add "Instagram Basic Display" product
+4. Configure OAuth Redirect URIs to include your domain + `/redirect.html`
+5. Get your Instagram App ID
+
+### 2. Fixed Code Implementation
+
+```javascript
+// Correct initialization
+hello.init({
+    instagram: 'YOUR_INSTAGRAM_APP_ID'
+}, {
+    redirect_uri: window.location.origin + '/redirect.html'
+});
+
+// Correct login call
+hello('instagram').login({
+    scope: 'user_profile,user_media' // Correct scope format
+}).then(function(auth) {
+    console.log('Login successful');
+    const authResponse = hello('instagram').getAuthResponse();
+
+    if (authResponse && authResponse.access_token) {
+        console.log('Access token:', authResponse.access_token);
+        // Make API calls here
+    }
+}).catch(function(error) {
+    console.error('Login failed:', error);
+});
+```
+
+### 3. Key Changes Made
+
+1. **Updated OAuth URLs**: Changed to use `https://api.instagram.com/oauth/authorize`
+2. **Correct Scopes**: Use `user_profile,user_media` instead of `basic, publish`
+3. **Proper API Base**: Updated to use `https://graph.instagram.com/`
+4. **CORS Support**: Instagram Basic Display API supports CORS, no proxy needed
+
+### 4. Available Scopes
+
+- `user_profile`: Access to user's profile info
+- `user_media`: Access to user's media (photos/videos)
+
+Note: The old `publish` scope is not available in Basic Display API. For publishing, you need Instagram Content Publishing API which requires business verification.
+
+### 5. Redirect URI Setup
+
+Make sure you have a `redirect.html` file in your project root:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Redirecting...</title>
+</head>
+<body>
+    <script src="src/hello.js"></script>
+    <script>
+        hello.redirect();
+    </script>
+</body>
+</html>
+```
+
+### 6. Testing
+
+1. Replace `YOUR_INSTAGRAM_APP_ID` with your actual Instagram App ID
+2. Ensure your domain is added to Instagram app's OAuth redirect URIs
+3. Test the login flow
+
+## Common Issues and Solutions
+
+### Issue: "undefined" tokens
+**Solution**: Make sure you're using the correct scope format and that your app is properly configured.
+
+### Issue: Direct redirect without authorization
+**Solution**: Check that your redirect URI matches exactly what's configured in your Instagram app.
+
+### Issue: CORS errors
+**Solution**: Use the updated module that properly handles Instagram Basic Display API CORS support.
+
+## Migration Notes
+
+If you're migrating from the old Instagram API:
+1. Update your app to use Instagram Basic Display
+2. Update scopes to new format
+3. Note that publishing features require separate Instagram Content Publishing API
+4. User permissions may need to be re-granted
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "oauth1.0",
     "oauth2",
     "api",
-    "facebooks",
+    "facebook",
     "google",
     "windows",
     "linkedin",

diff --git a/redirect-fixed.html b/redirect-fixed.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Instagram Login Redirect</title>
+    <meta charset="utf-8">
+</head>
+<body>
+    <script src="src/hello.polyfill.js"></script>
+    <script src="src/hello.js"></script>
+    <script>
+        // This handles the OAuth redirect callback
+        hello.redirect();
+    </script>
+</body>
+</html>