Instagram Basic Display API Error - Invalid scope: ['basic'] OR Invalid redirect_uri

Question

I'm using Magento 2.4.1, installed Social Login Extension and getting below error while login to Instagram, I'm using Hybrid auth libraries to login.

"error_type": "OAuthException", "code": 400, "error_message": "Invalid scope: ['basic']"}

You can check the screenshot below,

Instagram.php

<?php
/*!
* HybridAuth
* http://hybridauth.sourceforge.net | https://github.com/hybridauth/hybridauth
*  (c) 2009-2012 HybridAuth authors | http://hybridauth.sourceforge.net/licenses.html
*/
namespace Vendor\Module\Model\Providers;

/**
* Hybrid_Providers_Instagram (By Sebastian Lasse - https://github.com/sebilasse)
*/
class Instagram extends \Hybrid_Provider_Model_OAuth2
{
    // default permissions
    public $scope = "basic";

    /**
    * IDp wrappers initializer
    */
    public function initialize()
    {
        parent::initialize();

        // Provider api end-points
        $this->api->api_base_url  = "https://api.instagram.com/v1/";
        $this->api->authorize_url = "https://api.instagram.com/oauth/authorize/";
        $this->api->token_url     = "https://api.instagram.com/oauth/access_token";
    }

    /**
    * load the user profile from the IDp api client
    */
    public function getUserProfile()
    {
        $data = $this->api->api("users/self/");

        if ($data->meta->code != 200) {
            throw new \Exception("User profile request failed! {$this->providerId} returned an invalid response.", 6);
        }

        $this->user->profile->identifier  = $data->data->id;
        $this->user->profile->displayName = $data->data->full_name ? $data->data->full_name : $data->data->username;
        $this->user->profile->description = $data->data->bio;
        $this->user->profile->photoURL    = $data->data->profile_picture;

        $this->user->profile->webSiteURL  = $data->data->website;
        
        $this->user->profile->username    = $data->data->username;

        return $this->user->profile;
    }
    /**
    *
    */
    public function getUserContacts()
    {
        // refresh tokens if needed
        $this->refreshToken();

        //
        $response = array();
        $contacts = array();
        $profile = ((isset($this->user->profile->identifier))?($this->user->profile):($this->getUserProfile()));
        try {
            $response = $this->api->api("users/{$this->user->profile->identifier}/follows");
        } catch (\Exception $e) {
            throw new \Exception("User contacts request failed! {$this->providerId} returned an error: $e");
        }
        //

        if (isset($response) && $response->meta->code == 200) {
            foreach ($response->data as $contact) {
                try {
                    $contactInfo = $this->api->api("users/".$contact->id);
                } catch (\Exception $e) {
                    throw new \Exception("Contact info request failed for user {$contact->username}! {$this->providerId} returned an error: $e");
                }
                //
                $uc = new \Hybrid_User_Contact();
                //
                $uc->identifier     = $contact->id;
                $uc->profileURL     = "https://instagram.com/{$contact->username}";
                $uc->webSiteURL     = @$contactInfo->data->website;
                $uc->photoURL       = @$contact->profile_picture;
                $uc->displayName    = @$contact->full_name;
                $uc->description    = @$contactInfo->data->bio;
                //$uc->email          = ;
                //
                $contacts[] = $uc;
            }
        }
        return $contacts;
    }
}

Changing the scope "basic" to "user_profile,user_media", it shows different error

UPDATE

This is my Redirect URI

https://127.0.0.1/magento_241/sociallogin/social/callback/?hauth.done=Instagram

I'm not sure this could be the reason it's not working but green tick is not showing next to the Instagram Basic display as it is showing for Facebook Login.

But my app is live here it shows live,

Somehow if I managed to log in (after entering credentials) no matter what option do I choose in the below screenshot, it displays the error Oops, an error occurred. on this URL https://www.instagram.com/oauth/authorize/?client_id=MY_CLIENT_ID&redirect_uri=http%3A%2F%2F127.0.0.1%2Fmagento_241%2Fsociallogin%2Fsocial%2Fcallback%2F%3Fhauth.done&response_type=code&scope=basic

Let me know if anyone has a solution.

Answer 1

The API has changed. The Url for authorization now looks different:

https://api.instagram.com/oauth/authorize?client_id=XXXXXX&redirect_uri=XXXXXX&scope=user_profile,user_media&response_type=code

Just exchange it in your request and it will work just fine.

Answer 2

Scope "basic" is deprecated from what I've seen. I've solved this error in Laravel by setting scopes independently from package:

return Socialite::driver('instagram')
    ->setScopes(['user_profile'])
    ->redirect();

Maybe if you remove public $scope = "basic"; it could solve your issue

Answer 3

While your redirect_uri might be working properly, have you made sure to add that URI to your Instagram App settings list of Valid OAuth Redirect URIs? If not, you will encounter an invalid redirect uri message.

To add this URI, go to your Facebook App's dashboard, then click on the sidebar to Basic Display:

Then, scrolling down on the right side, you will see the space for adding Valid OAuth Redirect URIs.