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. 😊