Membuat Login Flutter dengan API Laravel (Flutter Authentication with Laravel)

Halo semua!

In this article I will share tutorial How to make Flutter authentication with Laravel Rest API. This tutorial continues in part Membuat API Otentikasi Laravel (Laravel Rest API Authentication with Passport).

Tools

  • Flutter, definitely.
  • Laravel. (Here I will using Laravel 5.8)
  • VS Code
  • Postman

Setup Laravel Backend

Read this detailed article specially for building basic authentication Laravel Rest API. Once you are ready, move to the next step.

Create a Flutter Application

Create new project on VS Code

Install Flutter Packages

We are going to use some Flutter packages:

http package, to consume HTTP resources.

shared_preferences package, providing a local storage for simple data.

Add the packages to your pubspec.yaml

dependencies:
shared_preferences: ^0.5.12+4
http: ^0.12.2

Run the command flutter pub get

Note: You can use other versions of these packages according to the version of the Dart SDK you are using.

Project Structure

Create your project structure like below:

lib folder structure

Within the lib directory create 2 folders:

  • network ( create api.dart file )
  • screens ( create login.dart, home.dart, register.dart files )

network/api.dart

In the api.dart file, write a class that manages all API methods

Notice that, define String _url = ‘http://192.168.1.2/lara_passport/api/v1’ this is basically the base url for our Laravel API.

lara_passport is my laravel directory on XAMPP.

var token is a variable that will store API token for authentication and would be attached to every request that requires authentication.

We used SharedPreferences to allow us to store the logged in user to the local storage. Once the user has login to the application, does’nt have to login again.

main.dart

This is the first class that run in your application. Here we will check if the user is authenticated and return to the home screen or the login screen.

screens/login.dart

You can copy and paste from the code below or build a form for yourself.

Define a boolean _isLoading = false; is to change the state of the login button text.

Define email and password variables, their values from their respective form fields after validation.

void _login() is a process to send a login data with an API. The results obtained from the API are read in JSON form. If you are successfully login, SharedPreferences will be store your account data and redirect to the Home Screen. If you can’t log in, it will display a notification _showMsg()

screens/register.dart

this file is similar to login.dart, significant change is in the form name field, and in the API route ‘/register’ as screen below:

screens/home.dart

At the initState() method is the first initialization method that is executed when the page is loaded. We call _loadUserData which returns the user data during register/login.

Test Drive

Here is my git repository for the Flutter auth with Laravel Rest API.

rheadavin/flutter_auth: Flutter Authentication with Laravel API Passport (github.com)

Having some issues? Let me know, write on comment below, cheers!

Thank you very much! Terima Kasih!

--

--

--

IT Enthusiast | Developers

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JAVA, Platform independent??

Style a map on Android with your voice

How to turn a RC controlled Brilliant color lamp into an IoT device

Profiling with Spring Boot

Polkadex and OnFinality Strengthen Partnership

Are You Agile Enough?

AutoScaling CloudFormation Template with Lono

Being a software developer in Uganda

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store

Rheadavin Adhiskara

IT Enthusiast | Developers

More from Medium

Laravel Elasticsearch Integration Packages

Laravel with Packages | Laravel 8/7 Ckeditor Image Upload Example

How to manage your Materialize migrations with Laravel Zero?

Deploying Laravel to Heroku via Git (CD)