Flutter Web: Twitch OAuth2 authentication flow implementation

Currently, it is difficult to implement authentication flow such as OAuth2 on Flutter Web. One of the difficulties encountered is to be able to grab the authentication token from the URL redirection as you don’t have access to URL listener or any ways to follow changes inside an external Navigation tab.

I had a hard time figuring how to implement this kind of authentication flow while a solution was actually quite simple. Today I am going to explain it using Twitch’s API as an example.

Prerequisites

• Create your initial Flutter Web application
• Having a valid Twitch and Twitch Developer account

Set Up

First of all, you will need to register an app in the Twitch Developer Console you can name it however you want and you will define as a redirection URL: http://localhost:8080 (or any other port you want). I am using a localhost URL as the example will not be hosted online but feel free to also add the URL on which your application will be deployed.

Now that you have created your application on the console you should have obtained a client id. You can already copy-paste it inside your main.dart .

const String clientId = "YOUR_CLIENT_ID";

Manage the authentication flow

Now that you have your client id the next step is to fetch the authentication token from Twitch’s API using OAuth implicit code flow.

By referring to the documentation the code is returned inside the redirect URL after identification and authorization.

If you did not change the structure of the base project generated by Flutter you should have a MyHomePage class which is a StatefulWidget . Inside the class _MyHomePageState you are going to add a variable :

/// To save the OAuth2 token.
String _token;

Now you are going to implement the initState method inside your widget’s State :

Let me explain what is happening inside this method.

First things first, you are grabbing the current URL of your Flutter application using Uri.base . Then by referring to Twitch’s documentation you know that the token is returned in the URL as follows: https://<your registered redirect URI>#access_token=<an access token> which means that if your URL contains access_token= you have been redirected by Twitch.

Now you have 2 scenarios:

1. You don’t have the token inside your URL so, you need to authenticate. To do this we are using the dart:htmlmethod window.location(url) which will change the URL of our current tab to the Twitch authorization.
2. You have been redirected by Twitch and have the token inside your URL so you need to parse it to get your token and save it inside your _token variable.

Launch the app

At this point you should be ready, you can add a print(token) to ensure it has been correctly fetched and you simply need to run the command :

flutter run -d chrome --web-port=8080

This command will run your application inside a Google Chrome browser and the added parameter will force the host on localhost port 8080. Note that I am using chrome, but it also works with any other compatible argument you might pass. And of course, if you have registered a port different than 8080 in the Twitch Developer Console then use this one.

Result

Conclusion

And here it is you are done ! As you can see it is actually quite easy, the redirection does everything for you and Flutter is smart enough to not be disturbed by the fact of having the authorization response inside its URL. By using this implementation you don’t need any WebView or listening to URL changes. While it might not work for every use case I think it can still help a lot.

You can find the entire source code I used for this article here :

TesteurManiak/flutter_web_twitch_auth