Android WebView not loading Instagram Authorization

Question

I'm currently trying to learn how to use the Instagram api to authorize instagram accounts and get basic info within my app.

I'm using a simple WebView to load the authorization URL. But when I press the button to load the WebView, it shows the instagram login page: https://i.imgur.com/rM9NBYJ.jpg within the webview, as opposed to the authorization page which should look like https://i.imgur.com/ez80umn.jpg .

The link works fine when I plug it into my chrome browser(which is how I got the screenshot) but not in the WebView.

How can I get it to display the Authorization page?

public class MainActivity extends AppCompatActivity {
private WebView webView;
Button loginButton;
String url = "https://api.instagram.com/oauth/authorize/?client_id=" +
        "xxxxxxxxxxx&redirect_uri=https://www.google.com/&response_type=code";
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = findViewById(R.id.webView);
    loginButton = findViewById(R.id.instagramButton);

    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    loginButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            initializeWebView();
        }
    });
}
private void initializeWebView(){

     webView.loadUrl(url);
     webView.setWebViewClient(new WebViewClient(){
         String access_token;
         boolean authComplete;

         @Override
         public void onPageStarted(WebView view, String url, Bitmap favicon) {
             super.onPageStarted(view, url, favicon);
         }

         @Override
         public void onPageFinished(WebView view, String url) {
             super.onPageFinished(view, url);
             if (url.contains("#access_token=") && !authComplete) {
                 Uri uri = Uri.parse(url);
                 access_token = uri.getEncodedFragment();
                 access_token = access_token.substring(access_token.lastIndexOf("=") + 1);
                 Log.e("access_token", access_token);
                 authComplete = true;
             } else if (url.contains("?error")) {
                 Log.e("access_token", "errir fetching access token");
             }
         }
     });
}
}

(Yes I am replacing the x's in the url with the proper client ID)

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="300dp">
</WebView>
<Button
    android:id="@+id/instagramButton"
    android:layout_below="@id/webView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="Instagram login"/>

</RelativeLayout>

Answer 1

I'm a bit late but just for anyone else who may run into this problem:

WebSettings settings = wv.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);

With this, my instagram login shows fine.

And regarding the two images you posted, I see that the first one is in case you're not logged in, while the second is asking you authorization to your account because you have already logged in. So, just enter your email and password (?).