Flutter and Firebase Twitter Authentication Issue :

Question

I am new to Flutter and recently started my new Flutter Project in which I am trying to integrate Twitter Login Authentication but I get stuck on the following issue.

Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared.

Below is the Login UI of my screen: .

After tapping the login button it is navigating to the following screen :

On tapping the Authorize app button it is showing the the following issue :

On getting the back from the above screen it is displaying the following screen with error :

I don't know what is going wrong. It is my humble request to please help me to resolve this issue. Thanks for the help.

Following is the code :

login_page.dart :

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:get/get.dart';
import 'package:tic_tac_toe/home_page/home_page.dart';
import 'package:twitter_login/twitter_login.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            twitterLogin();
            Get.to(HomePage());
          },
          child: const Text('Login With Twitter'),
        ),
      ),
    );
  }

  //twitter Login Authentication

  void twitterLogin() async {
    var apiKey = 'IJ4Dh20appLpoFOAgZ6Bj0IKu';
    var apiSecretKey = 'frBk5vaYkwekRWwsoEXgvtxtQQMFGKj0HhBNaLfu7ryknpdNbU';
    var redirectURI = 'https://tic-tac-toe-fb9aa.firebaseapp.com/__/auth/handler';

    final twitterLogin = TwitterLogin(
        apiKey: apiKey, apiSecretKey: apiSecretKey, redirectURI: redirectURI);
    await twitterLogin.login().then((value) async {
      final twitterAuthCredentials = TwitterAuthProvider.credential(
        accessToken: value.authToken!,
        secret: value.authTokenSecret!,
      );
      await FirebaseAuth.instance.signInWithCredential(twitterAuthCredentials);
    });

  }
}

Below is the AndroidManifest.xml file of the project :

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="tic_tac_toe"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:screenOrientation="portrait"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <!-- Accepts URIs that begin with "example://gizmos” -->
                <!-- Registered Callback URLs in TwitterApp -->
                <data android:scheme="https://tic-tac-toe-fb9aa.firebaseapp.com/__/auth/handler" /> <!-- host is option -->
            </intent-filter>

        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

Answer 1

I recently went through same issue with twitter login in flutter. So I tried all the packages available on pub.dev but none of them worked. So I decided to create my own flutter plugin for twitter login and publish on pub.dev so that others can also use it.

The plugin is twitter_auth_firebase

Just use this single line and you are done.

final Map<Object?, Object?>? result = await 
TwitterAuthFirebase.loginViaTwitter();

You will get this result:

final Map<Object?, Object?>? result = await 
TwitterAuthFirebase.loginViaTwitter();

bool? success = result["success"]; // Indicates success
String? message = result["message"]; // Message for success and error
Map<Object?, Object?>? profileData = result["profile"]; // User's Twitter 
profile data on success
String? idToken = result["idToken"]; // User's ID token
String? accessToken = result["accessToken"]; // User's access token
Map<Object?, Object?>? error = result["error"]; // Error object, if any

I have answered here in detail.