Flutter Thursday 13: Building a User Registration and Login Process with provider and external API

4 min readJul 23, 2020

This episode will build a user registration and authentication system that will interface with a backend system. It will cover the following flows: registration, login, auto-login, and logout. We will use the provider package to maintain state and the backend will be a Phoenix application (you can use any web service of your choice).

Start

Let’s create a new flutter project called jada

flutter create jadacd jada

We would need the provider package; add the following to your pubsec.yaml file

dependencies:   
  provider: ^4.3.1

Install the package using flutter pub get and we can subsequently use it in our project as import ‘package:provider/provider.dart’; We would talk more about the provider later in the article.

We would also need to make HTTP calls and persist data locally, so add two additional packages to pubsec.yaml as well.

http: ^0.12.1
shared_preferences: ^0.5.8

Then install using flutter pub get

The Screens

To register a user we would limit the requirements to email and password. We will have the following screens welcome, register, login, dashboard, and logout screens. The dashboard will only be accessible by authenticated users.

The Data Model

Our user model will be simple and will consist of the following fields: id, email, password, access token and refresh token. We can include expiring date and status as well but will not be using those. This will map our json response. And domains/user.dart

Service Layer

Let’s make some fields to represent our API endpoints

The login request/response payload from the api is in the format:

The request/response payload the api for registration

Next, write the functions to call our endpoints. We will create a ChangeNotifier, a class that extends ChangeNotifier. It provides a change notification to its listeners, when we update state or modify any data it will notify the corresponding widgets or screens of the changes.

Also, we would define some status represented by an Enum and initial states for login and registration status. So at each stage of progression, we will update these values and the ChangeNotifier will notify the dependent widgets. Below is the code:

We added two methods: login and register. The previous takes an email and password and authenticates the information using the endpoint.

When the request is made the _loggedInStatus changes to Status.Authenticating, you will see the impact of this as the text on the login button will now to authenticating. For successful request we will set _loggedInStatus to Status.NotLoggedIn and then call the notifyListeners(); Similarly, we will use the same approach during the user registration process.

Add another ChangeNotifier to manage user state.

Local Persistence

We will use share preference persist data locally. Let’s create a new class that would contain the following methods saveUser(User user), getUser(), removeUser() and getToken(args). These will be used to access the device’s shared storage.

The Entry Point

The entry point for our application is the main file, We would employ FutureBuilder widget in this case. We will check the shared preference if a user exists then redirects to login and dashboard if the token is valid or redirects to the login page.

The screens

The welcome page will consist of a simple widget,

Login

The login page has a form with an email and password fields. When a user provides a username and password, the inputs need to be validated. We will add some validation functions to the fields.

When a user clicks on the login button. The _loggedInStatus changes to Status.Authenticating; The login widget gets replaced with CircularProgressIndicator() and Text(“ Authenticating … Please wait”)

Dashboard

On successful login, it will redirect to a dashboard that simply displays the username of currently logged in user

Register

The register page has of a form with an email password, and password confirmation fields. We will add some validation to the fields. This works quite similarly like the login page above