5 login screens and methods for your next app

Published on

A nice login page is most of the time one of the first things your users will see when they open your app. It is therefore important to make a good impression and to make sure that the user experience is as good as possible. In our development team, we always try to make the login page as simple as possible, while keeping it beautiful and functional.

In this article, we will explore 5 login page possibilities that we have implemented using Flutter. They all have different pros and cons. As this article is not technical, we will not explain how to implement them.

We hope that they will inspire you to create your own login page.

Login page using email authentication

Email authentication is the most common way since it's the easiest to implement. It's also the most common way to log in to a website as we nearly all have an email address.

flutter login page example using email authentication

This version is a simple form with an email input and a password input. The user can then click on the "Login" button to log in.

flutter login page example using email authentication

This version is a bit more complex. It's a long form with an email input, a password input and a confirmation password input. The user can then click on the "Login" button to log in.

We also added a "Contact support" button to help the user if he has any problem. his app shows that making a login page on a mobile app is a little bit harder than on a website.

You can't make a long form with too many inputs as it would be too hard to fill on a mobile device. It's better to make a simple form with only the necessary inputs. And if needed split the form into multiple pages.

Why email authentication is not the best?

Email authentication force us to enter our email address and password every time we want to log in. Many people forgets their password and have to reset it every time they want to log in. Also some people have many email and always forget which one they used to create their account.

That's why social authentication is really popular. It's easier to log in with a social account as we don't have to remember our password.

Passwordless authentication with email

A good alternative to the email and password authentication is the passwordless authentication. The user enter his email address and then receive a link by email. He can then click on the link to log in.

The main problem is that the user has to open his email app to click on the link. At this steps he can be distracted by other emails and forget to click on the link. That's why I don't really like this method. But it's still a good alternative to the email and password authentication.

Login page using phone authentication

It's now really common to use phone authentication to log in to an app. It's a great way to make the login process easier for your users. Using firebase or any other backend service, you can easily implement this feature in your app.

Here is an app we made for a dieteticians french company.

flutter login page example using phone authentication

As you can see, we have used a simple form with a phone number input. The user can then click on the "Continue" button to receive a code by SMS. Then he can enter the code to log in

This is the most common way to implement phone authentication.

Disadvantages of phone authentication

Phone authentication is not perfect. It has some disadvantages.

Anonymous login page

Sometimes you don't need to know who is using your app. Many games prefer let you play without creating an account. So you directly start playing without having to log in. They just ask for a pseudo to identify you, and that's it.

For example this game "Limite limite" let you play without creating an account. This is an online game where you can play with your friends or with random people.

flutter anonymous login page example authentication

Social logins

Social logins are really popular. They allows you to log in to an app using your social account. The only downside of this is that your social network will track you and know which apps you are using. That's why some people prefer not to use social logins.

When you provide social logins, you should always provide a way to log in without it. (Most of the time with email authentication).

example using social authentication with flutter

Conclusion

Every login methods have their advantages and disadvantages. It's up to you to choose the one that fits the best your app. I hope that this article inspired you to create your own login page for your next mobile app.

Create a 5 stars app using our Flutter templates

Check our flutter boilerplate
kickstarter for flutter apps
Read more
You may also be interested in
Our Flutter Template is Here!  blog card image
Our Flutter Template is Here!
Published on 2023-10-10
Flutter theme made easy  blog card image
Flutter theme made easy
Published on 2023-10-23
FlutterKit by Apparence.io © 2023. All rights reserved