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.
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.
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.
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.
- Depending on the country sending a SMS can be expensive (Recently Firebase encountered some problems with this. Some abusers were spaming the service)
- It relies on the user's phone number. If the user changes his phone number, he won't be able to log in. Or you will have to handle this as a support case
- It makes it harder to login to your app for testing purpose. Of course firebase and other services have a way to bypass this. But it's still a bit annoying.
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.
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).
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.
