How To Store Login Credentials, The Right Way in Flutter. (2023 Update) - by Carlo Loguercio - System Weakness

20/06/2023 10:29 How to store login credentials, the right way in Flutter.
How to store login credentials, the right way in Flutter. [2023 Update] | by Carlo Loguercio | System Weakness
Sign up Sign In
Search Medium Write
You have 2 free member-only stories left this month. Sign up for Medium and get an extra one.
Member-only story
How to store login credentials, the

right way in Flutter. [2023 Update]
If you have used shared preferences to save login credentials or
access tokens, well, this article is for you.
Carlo Loguercio · Follow

Published in System Weakness · 6 min read · Mar 20, 2022
411 6
https://systemweakness.com/how-to-store-login-credentials-the-right-way-in-flutter-857ba6e7e96d 1/23
20/06/2023 10:29 How to store login credentials, the right way in Flutter. [2023 Update] | by Carlo Loguercio | System Weakness
UPDATE 2023
I’ve updated this article to Flutter 3.7, Dart 2.19, and flutter_secure_storage
8.0.0. Check out the repository! ⭐️
When we are asked to develop a login screen and there is a “remember me"
check box or an auto-login feature, all we have to do is to save the login
credentials, or some kind of token, into a local storage. So, the next time we
come back into the app, we find the form already filled with our credentials
or, better, an auto-login saves us from the boring login screen.
It’s awesome, yes. But what about security?
If we store the user’s credentials into SharedPreferences, we potentially

expose this data to an attacker that, potentially, can steal them.
Fortunately, the Flutter community is big enough to create a package that

covers this scenario.
There is a package, called flutter_secure_storage and created by GitHub user

mogol, that stores data into Keychains for iOS and uses AES encryption with
Keystore for Android. Android version, from v5.0.0, supports
EncryptedSharedPreferences, too.
When upgrading from 4.2.1 to 5.0.0 you can migrate to

EncryptedSharedPreferences by setting the encryptedSharedPreference
parameter to true as explained below. This will automatically migrate all
preferences. This however can’t be undone. If you try to disable

encryptedSharedPreference after this, you won’t be able to read the values. You
can only read those with encryptedSharedPreference enabled.
There is a note for Android: this plugin is compatible only with Android SDK
18+ when Keystore was introduced.
Now see how we can use this plugin for a login screen.
This is the login page we’re going to create.
When you fill out the form with credentials and push the Sign In button, you
will store them in secure storage. When you come back in app you will find
your credentials auto-filled in the form.
This is a simple login UI, with any kind of login business logic behind it. I
won’t use any kind of state management, only the old good setState (). It’s only
a simple code sample to show the usage of the package.
Ok, let’s code.
First of all, we need to add the package into the pubspec.yaml file.
flutter_secure_storage: ^8.0.0
Yes, but.. How flutter_secure_storage works?
As reported in the README.md , all we have to do is:
It’s an extremely easy package, yes.
As you can see, at line 4, we create a storage that enables us to read and store
data.
At line 7, we read and decrypt a String value identified by the key label, or
null if key is not in the storage. Remember: the key shouldn’t be null.
At line 19, we store and encrypt a value object identified by the key label. If
the key was already in the storage, its associated value is changed. If the
value is null, deletes associated value for the given key .
For our use case we need:
the FlutterSecureStorage storage instance;
two TextEditingController associated with two TextInputField
widgets to gather user credentials;
a method to write data into storage;
a method to read data from storage;
So let’s define the first two points :)
Then, we define the method _onFormSubmit() to store the user credentials.

This method is the action associated with the Sign In button. The method
will take care of saving the data in the storage only if the form is validated.
Then, we define the method _readFromStorage() . We call this method from

the initState() , in this way the information in the storage will be retrieved
before the construction of our UI.
The initState() method is called from the framework when the State is created.
(so it’s called only one time, before the UI is draw).
In this way, we get the behavior shown in the following screenshots.

At the first login, the user enters their credentials and presses the Sign In
button.
Later, when he opens the app again, he will find his credentials already
entered in the form.
Login Screen at the first and second access
You will find the link to the repository on GitHub with the complete code
below.
Congratulations! 🎉
Well done! These simple directions will allow you to add auto-login
functionality to your app, but most importantly, the stored information will
be encrypted in secure storage.
With these simple steps, your app will level up. :D
Conclusion
flutter_secure_storage is a very simple package that, in a few simple steps

enables us to save user's data, encrypted, in a secure storage.
What’s next? You should extend this simple sample by storing other user
information, for example the first name, so you can customize the “Welcome
back” message.
After the 2023 update consideration
An important thing I noted when I upgraded to Flutter 3.7 is that I don’t need
anymore to specify the ToolBar property for the password EditText. In fact,
the right behavior is implemented by default by Flutter itself. So I simply
removed this deprecated code:
TextFormField(
toolbarOptions: const ToolbarOptions(
copy: false,
paste: false,
cut: false,
selectAll: false,
),
),
It’s also important to note that the plugin now has full support for all the
platforms: Android, iOS, Windows, Linux, macOS, and Web. Note that for
Web, flutter_secure_storage only works on HTTPS or localhost
environments.
You can find the full example code on my GitHub repo:
GitHub - CarloDotLog/flutter_login_screen at blog_post_branch

A new Flutter project. This project is a starting point for a Flutter
application. A few resources to get you started…
github.com
Thank you so much for reading my article. Consider clicking the “clap”
button to show me your interest and to encourage me to go on in my new
adventure ^^
If you are interested in other Flutter Security Tips, you can read my other
articles I’ve published here on Medium.
Carlo Loguercio
Flutter Security Tips
View list 5 stories
What about me?
I’m Carlo and I’m a passionate Italian coder since 2009. I’m Java native
speaker and I’ve never left the JAVA_HOME since I met Dart and Flutter in
late 2019.
Follow me here on Medium to read more articles about Flutter and mobile
development.
You can find me also on Twitter and GitHub.
See you around and happy coding.
Flutter Security Flutter App Development
Written by Carlo Loguercio Follow
195 Followers · Writer for System Weakness
I’m Carlo and I’m a passionate Italian coder since 2009. I’m Java native speaker and I’ve
never left the JAVA_HOME since I’ve met Dart and Flutter in late 2019.
More from Carlo Loguercio and System Weakness
Carlo Loguercio in Flutter Community John B. in System Weakness
Biometric authentication with Hacking a Windows Machine by

Flutter Hiding a RAT Inside an Image
Charge your Flutter apps with superpowers. Introduction
· 5 min read · Apr 22, 2022 · 9 min read · May 3
176 2 284 5
Mr Jokar in System Weakness Carlo Loguercio in Flutter Community
Track Anyone with just a Phone Creating inclusive apps with

Number | OSINT Investigation Flutter: Best practices for…
You can be an OSINT Investigator, CTF Player An overview of built-in features and best
or simply someone who is getting spam call… practices
3 min read · May 14 · 9 min read · Jan 8
100 1 113 1
See all from Carlo Loguercio See all from System Weakness
Recommended from Medium
Marco Galetta in InfoSec Write-ups FlutterTech
Bypass Jailbreak Detection in 5 main lessons for everyone new to

Flutter apps Flutter
If you ever worked on a mobile Flutter Last week, I finished my first professional
application for a big company, or if you ever… Flutter project. I had the honour to build a…
· 7 min read · Jan 29 · 6 min read · Jan 17
289 1 137
Lists
Now in AI: Handpicked by marketing

Better Programming 100 stories · 3 saves
248 stories · 9 saves
Max Zimmermann 💡 Maneesha Erandi
What is the difference between Change the theme of Flutter using

MVC and MVVM (for Flutter)? Provider and Shared Preferences
If you ask n people about the difference In this article I will create a demo, to change
between MVC (Model-View-Controller) and… app theme with provider and…
· 7 min read · Feb 13 · 3 min read · Feb 6
708 10 139
Maneesha Erandi in Mobile App Circular FlutterTech
Flutter note editor with enhanced A responsive design masterclass in

html editor Flutter
html_editor_enhanced is a popular and cool If you’re a developer new to Flutter, chances
text editor for Android, iOS and Web to help… are you’ve struggled to get your app to look…
· 3 min read · Feb 3 · 9 min read · Jan 10
36 324 3
See more recommendations

How To Store Login Credentials, The Right Way in Flutter. (2023 Update) - by Carlo Loguercio - System Weakness

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Store Login Credentials, The Right Way in Flutter. (2023 Update) - by Carlo Loguercio - System Weakness

Uploaded by

Copyright:

Available Formats

20/06/2023 10:29 How to store login credentials, the right way in Flutter.

Search Medium Write

How to store login credentials, the

Carlo Loguercio · Follow

It’s awesome, yes. But what about security?

If we store the user’s credentials into SharedPreferences, we potentially

Fortunately, the Flutter community is big enough to create a package that

There is a package, called flutter_secure_storage and created by GitHub user

When upgrading from 4.2.1 to 5.0.0 you can migrate to

preferences. This however can’t be undone. If you try to disable

This is the login page we’re going to create.

Ok, let’s code.

Yes, but.. How flutter_secure_storage works?

As reported in the README.md , all we have to do is:

It’s an extremely easy package, yes.

For our use case we need:

the FlutterSecureStorage storage instance;

two TextEditingController associated with two TextInputField

widgets to gather user credentials;

a method to write data into storage;

a method to read data from storage;

So let’s define the first two points :)

Then, we define the method _onFormSubmit() to store the user credentials.

Then, we define the method _readFromStorage() . We call this method from

In this way, we get the behavior shown in the following screenshots.

Login Screen at the first and second access

With these simple steps, your app will level up. :D

flutter_secure_storage is a very simple package that, in a few simple steps

After the 2023 update consideration

You can find the full example code on my GitHub repo:

GitHub - CarloDotLog/flutter_login_screen at blog_post_branch

Flutter Security Tips

View list 5 stories

What about me?

You can find me also on Twitter and GitHub.

See you around and happy coding.

Flutter Security Flutter App Development

Written by Carlo Loguercio Follow

195 Followers · Writer for System Weakness

More from Carlo Loguercio and System Weakness

Carlo Loguercio in Flutter Community John B. in System Weakness

Biometric authentication with Hacking a Windows Machine by

· 5 min read · Apr 22, 2022 · 9 min read · May 3

Mr Jokar in System Weakness Carlo Loguercio in Flutter Community

Track Anyone with just a Phone Creating inclusive apps with

3 min read · May 14 · 9 min read · Jan 8

Recommended from Medium

Marco Galetta in InfoSec Write-ups FlutterTech

Bypass Jailbreak Detection in 5 main lessons for everyone new to

· 7 min read · Jan 29 · 6 min read · Jan 17

Now in AI: Handpicked by marketing

Max Zimmermann 💡 Maneesha Erandi

What is the difference between Change the theme of Flutter using

· 7 min read · Feb 13 · 3 min read · Feb 6

Maneesha Erandi in Mobile App Circular FlutterTech

Flutter note editor with enhanced A responsive design masterclass in

· 3 min read · Feb 3 · 9 min read · Jan 10

See more recommendations

You might also like