![](https://hackernoon.com/hn-images/0*KcPEWa06RBI8PX8_.)

I decided to explore [flutter](https://hackernoon.com/tagged/flutter) by building a mobile app because I really like the learn by doing method.

If you’re not familiar with flutter, it is a cross Mobile development framework to build rich UI mobile applications for Android and iOS. At the moment it is an alfa release and It is open source. If you need an introduction with more details, I wrote a [post](http://developer-journey.com/2018/02/08/introduction-to-flutter/) about it here.

In this article we will build a simple app with [Instagram](https://hackernoon.com/tagged/instragram) authentication. For this application, we will use the [Model View Presenter](https://medium.com/@develodroid/flutter-iv-mvp-architecture-e4a979d9f47e) pattern.

Let’s build our UI.

### The Login screen

![](https://hackernoon.com/hn-images/0*mfwqgbZEk3eJAS-v.)

![](https://hackernoon.com/hn-images/0*HtlIQntJS3V9UtnD.)

The UI is built with a column of 3 elements: 2 Text Widgets and a Row Widget of 2 elements (an Image Widget and a Text Widget). For more details on building layout, you can read [this](https://flutter.io/tutorials/layout).

### The business logic

What happen if the user click on the Login Button ? The presenter class will take care of the login operation.

insta is a class which handles Instagram authtentication as documented in the API documentation [here](https://www.instagram.com/developer/authentication/) using OAuth.

Let’s take a look at the Instagram class.

This class is inspired by the post of [Kevin Segaud](https://medium.com/@segaud.kevin) about [Facebook authentication](https://medium.com/@segaud.kevin/facebook-oauth-login-flow-with-flutter-9adb717c9f2e).

We have 3 components: getToken function, the \_server function and the Token classs.

The getToken function follows the 3 step of the [oauth authentication standard](https://oauth.net/2/):

1\. Direct the user to the autorization page where he can log in with its credentials.

2\. The user approves the autorization request and we get the authorization code on the redirect url.

3\. Exchange the authorization code with the access Token.

To direct the user to the autorization page, we use the Flutter Web View Plugin.

The _\_server_ function create a server waiting on the redirect uri. When a client send a request with the parameter “_code_” the server takes that parameter and return it.

The Token class is just a plain dart object to contains the informations received in the access token.

You can find the whole project on [github](https://github.com/WillyShakes/flutter_auth).

This is it: The Instagram Authentication is now real!

![](https://hackernoon.com/hn-images/0*KpvAol_eKUpupMK_.)

Hope you enjoyed this article and until then my friend, may the {code} be with you!

If you want to try Flutter, I invite you to learn more here on the official [website](http://flutter.io).

I also invite you to the flutter community:

*   [Live chat with Flutter engineers and users](https://gitter.im/flutter/flutter)
*   [Discuss Flutter, best practices, app design, and more on our mailing list](https://groups.google.com/d/forum/flutter-dev)

**Resourses**

[flutter.io](http://flutter.io)

[https://www.instagram.com/developer](https://www.instagram.com/developer)

_Originally published at_ [_developer-journey.com_](http://developer-journey.com/2018/02/23/instagram-authentication-with-flutter/) _on February 23, 2018._

Flow

Facebook

Google

Instagram

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Instagram authentication with Flutter

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@be.betr.codr

RELATED STORIES