Troubleshooting to Setup Twitter Login for Flutter

I’m currently in the learning phase of Flutter. I decided to create simple app using Twitter’s API. I did a simple tweets retrieval based on Twitter public screenname using the app’s access token, but obviously I can’t retrieve Twitter protected screenname, which requires to use user’s access token that already followed the protected screenname. So the next project for me is to create user Twitter authentication in the app. I thought it would be straightforward process, just like the other Twitter API. But unfortunately (I hit a roadblock where all of authentication request immediately fail. After some hairpulling search around, I come with a set of troubleshooter steps of how to setup the Twitter authentication.

Note: these steps will be written from the Flutter platform point of view, but most of the parts are actually Twitter app configurations, so it might help you to overcome some of your situations.

1. Make sure you have created the app in the Twitter developer

This is an obvious step. You need to have something that your Flutter code can refer to when making that authentication request. Otherwise, Twitter API is bound to get wild authentication spam request from all over the world. Here’s the link to get started:

https://developer.twitter.com/en/apply-for-access

It’s a fairly straightforward process. If you just apply for the basic dev access without the bells and whistles, your sign up application should be approved immediately without the need for you to wait for approval process.

Once you have sign up and sign in, create the app on:

https://developer.twitter.com/en/apps

2. Make sure you have take note of the consumer key and consumer secret key

After you created your app, you will notice there’s a tab called “Keys and Tokens”. Open the tab, generate the keys, and copy paste the API key and API secret keys somewhere. You will need these for two purposes later.

3. Make sure you have added these URLs on the app callback

This is the most cryptic part of this troubleshooting. Long story short, you need to add these URLs on the app callback in order so that the three-legged authentication process is not rejected immediately by Twitter.

Open the “app details” tab. Tap on “Edit”. Scroll down, and find the callback field. Make sure you have these URLs listed:

twitterkit-<API key>://
twittersdk://

So for example, if the API key (do not confuse it with API secret key) I copied from step #2 is “asdfasdfasdf”, then I will have to add these two URLs on callback:

twitterkit-asdfasdfasdf://
twittersdk://

The first one is for iOS, and the second one is for Android. So add whichever one suits your needs.

Fail to do this step properly will resulted in Twitter reject your authentication request with message, wrapped in XML tags:

“Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings” — this is if you have entered any URL except those two URLs.

4. Use third-party package to handle the three-legged authentication

Writing code for the three-legged authentication may involve some pretty cumbersome coding. So I advise to use a flutter package called flutter_twitter_login, which already handled the in app browser call for you. All you have to do is just implement the code to call authentication, which is also given nicely in the package pub.dev website.

https://pub.dev/packages/flutter_twitter_login

Add the dependency for the package on your .yaml file.

dependencies:
    flutter_twitter_login: ^1.1.0

(It was at version 1.1.0 at the time this post is written)

Call the pub get. If you’re using the Android Studio, you can usually find an instant button at the Flutter command bar on top of your edit area, below the document tab, when you’re opening the .yaml file.

Then add this code to do the authentication, which I took straight from the package example. Change it to suit your needs. You will need to supply the API key and API secret key to the TwitterLogin constructor here.

import 'package:flutter_twitter_login/flutter_twitter_login.dart';
...
// in your widget method
var twitterLogin = new TwitterLogin(
    consumerKey: '',
    consumerSecret: '', 
); 
final TwitterLoginResult result = await twitterLogin.authorize(); 
switch (result.status) {
    case TwitterLoginStatus.loggedIn:
      var session = result.session;
      _sendTokenAndSecretToServer(session.token, session.secret);
      break;
    case TwitterLoginStatus.cancelledByUser:
      _showCancelMessage();
      break;
    case TwitterLoginStatus.error:
      _showErrorMessage(result.error);
      break; 
 }

5. Make sure you already use the user’s token and secret on the app’s call

This is a common mistake. Devs usually try to make requests using the app’s API key and API secret key to get the app’s access token to make sure the request works using the app’s access token. And then they added the user authentication to get the user’s access token. But then, they forgot to switch into using the user’s access token instead of the app’s access token, which you will get from the session data from step #4.

There it is, troubleshooter for Twitter login using Flutter. Hope it helps to make your day! If you have some question, ask away. I hope I can help solve it. If I can’t, well, stackoverflow is your best friend. 😊

How to add “Application Entry Point” in Kotlin

Coming from iOS developer perspective, I’m accustomed with the fact that when I create new project, there’s this file/class called AppDelegate automatically created for me. Code inside AppDelegate function didFinishLaunchingWithOptions: is guaranteed to be run ahead first before any other code except global variable initializations. Putting code in the AppDelegate is crucial because you can just put code there without care about which ViewController class gets displayed as root.

When developing Kotlin, I missed this feature. Turns out, it exists, but it doesn’t created for you automatically. You have to make it yourself. Luckily, it’s not hard. Unluckily, if you don’t use it frequently, you may forget about this. When you do forget, sometimes searching on the internet for “Kotlin Application Entry” does not lead you to what you’re searching for. So, here I am, making this short note, to remind me and you visitors about this. Something like main(). But what I’m about to show you is not main(), but something similar.

I assume you already have created a new project for this, in Kotlin. But this is actually can be done in Java too.

1. Create the file

Switch the navigation into Android. Go to your project files, and create a new file. Name it whatever. I named it ApplicationEntry.

2. Create the class

The application entry class must be a descendant of class Application. Don’t forget to make necessary import by pressing CMD+Enter or CTRL+Enter.

import android.app.Application

class ApplicationEntry() : Application() {
    
}

3. Create the initializer block

Using this, you can treat the class like any other class. That means, you can add initializer block on the class, which guaranteed will get called before any other code in your app (well, except global variable initializations, of course).

import android.app.Application

class ApplicationEntry() : Application() {

    init {
        // put any initialization here
    }
    
}

4. Reference this class in Android Manifest

Without referencing this class in Android Manifest, Android wouldn’t even know that this class need to be run first.

You’ll see something like this on your code editor.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.myapplication">

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

Add android:name=".ApplicationEntry" attribute to the application block, so it will looks like this: (make note of the dot sign before the name)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.myapplication">

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:name=".ApplicationEntry"
            android:theme="@style/AppTheme">
        <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

The autocomplete will help you to accomplish this.

So that’s it. I know this is trivia, but if you’re new to Kotlin and Android programming, sometimes your search doesn’t lead you to what you’re searching for. Thus I hope you stumbled upon this article and end your endless quest.

MPAndroidChart Explained in Kotlin

I am new to Kotlin and Android programming, and somehow I have a hard time to find a really basic MPAndroidChart plugin explanation. Finally, I found the tutorial from the plugin writer himself. You can read it here.

But I want to rewrite the tutorial from a different point of view, and hope that it can help you (especially all the Android dev beginners) to understand about the concept in a better flow.