Flutter Authentication with Rest API Symfony Backend PHP

I want to show you how to create a blog app with flutter and symfony as a back-end API for a mobile app. In this step, I will show basic authentication for a flutter app using a Symfony Backend. I will try to make it as simple as possible. In this step you will learn the login flutter with symfony back-end.

4 min readJan 23, 2023

What we need for our symfony backend;

Symfony 6.1

PHP 8.1

firstly i installed api platform with composer require api

composer require api

# api/config/packages/security.yaml

for user instead of creating the user entity with symfony console make:entity use symfony console make:user command

symfony console make:user

symfony console doctrine:database:create

symfony console make:migration
symfony console doctrine:migrations:migrate

PostgreSQL is the database engine we will use. and .env as below

DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=14&charset=utf8"

pgAdmin is the most popular and Open Source administration

LexikJWTAuthenticationBundle provides JWT (Json Web Token) authentication for our Symfony API. with composer require lexik/jwt-authentication-bundle

composer require lexik/jwt-authentication-bundle

php bin/console lexik:jwt:generate-keypair

I created user entity then hashed with Symfony Password Hash symfony console security:hash-password my password then directly enter password, email using by pgadmin.

symfony console security:hash-password

Test our API with curl;

curl -X POST -H "Content-Type: application/json" http://localhost:8000/authentication -d '{"email":"admin@localhost","password":"123456"}'

curl -X GET http://localhost:8000/users/1 -H "Authorization: Bearer token"

FLUTTER

What we need for flutter;

environment:
  sdk: '>=2.18.4 <3.0.0'

Shared preferences

flutter pub add shared_preferences

http : A composable, Future-based library for making HTTP requests.

 flutter pub add http

Our flutter structure as below;

# main.dart

import 'package:blog_app/home_screen.dart';
import 'package:blog_app/sign_in.dart';
import 'package:flutter/material.dart';

void main() {
 // HttpOverrides.global = new MyHttpOverrides();
  runApp(MaterialApp(home: MyApp()));
}

/*
How to solve Flutter CERTIFICATE_VERIFY_FAILED error while performing a POST request?
This should be used while in development mode,
do NOT do this when you want to release to production,
the aim of this answer is to make the development a bit easier for you,
for production, you need to fix your certificate issue and use it properly.

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}
*/
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Blog app Symfony Backend ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        SignIn.route: (context) => const SignIn(),
        HomeScreen.route: (context) => const HomeScreen()
      },
      initialRoute: SignIn.route,
    );
  }
}

# sign_in.dart

# service/api.dart

# home_screen.dart

First, the app sends a sign-in request. In this step, essentially email, password sign-in credentials. Once verified, the API will create a JSON Web Token and sign it using a secret key. Then, the API will return that token back to the app.

If the user gives correct credentials then the authentication process will be successful.
After successful authentication, the users will be allowed to the system as authenticated users.