A few days ago I’ve published this article:

While it might have been helpful to some readers I have found a much better way to manage authentication on Flutter Web. Thanks to my friend and colleague

Meï M.

for his help.Usually when you are authenticating on a website or a web application using 3rd party services you connect your account through an external window. This process avoid the website you were on to reload entirely after the redirection. It is the main issue implied with the method described in my previous article.

So today let’s fix that and implement OAuth2 flow using an external authentication window. Still by using Twitch’s API so people who followed the previous article won’t be too lost.

Prerequisites

• Create your initial Flutter application
• A valid Twitch and Twitch Developer account
• Some basic HTML and JS knowledge

Set Up

Before we start coding let me explain what will be our authentication flow. We are going to open Twitch authentication URL in a new window by passing as parameters in the URL our client_id and the redirect_uri . The main difference compared to the previous article is that our redirect_uri will not be used to redirect to our application after the authentication process but to a static HTML page which sole purpose will be to send to our main application window the data we are looking for. In this case it will be the OAuth token contained in our URL.

#flutter #flutter-web #flutter-app-development