How to create an Authentication middleware for a Flutter app?

Question

This is my home.dart code and I want to write an Authentication Middleware for my app. At the moment my main.dart code looks like this:

void main() {
  Get.put(MenuController());
  Get.put(NavigationController());
  Get.put(AuthController());
  Get.put(AuthCard);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Obx(() => GetMaterialApp(
          initialRoute: AuthController.instance.isAuth
              ? homeScreenRoute
              : authenticationScreenRoute,
          unknownRoute: GetPage(
              name: '/not-found',
              page: () => PageNotFound(),
              transition: Transition.fadeIn),
          getPages: [
            GetPage(
                name: rootRoute,
                page: () {
                  return SiteLayout();
                }),
            GetPage(
                name: authenticationScreenRoute,
                page: () => const AuthenticationScreen()),
            GetPage(name: homeScreenRoute, page: () => const HomeScreen()),
          ],
          debugShowCheckedModeBanner: false,
          title: 'BasicCode',
          theme: ThemeData(
            scaffoldBackgroundColor: light,
            textTheme: GoogleFonts.mulishTextTheme(Theme.of(context).textTheme)
                .apply(bodyColor: Colors.black),
            pageTransitionsTheme: const PageTransitionsTheme(builders: {
              TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
              TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
            }),
            primarySwatch: Colors.blue,
          ),
        ));
  }
}

And the isAuth variable that I checking at the initialRoute part of the code comes from the following line of codes, inside the auth_controller file that extends GetXController:

final _isAuth = false.obs;

bool get isAuth {
 _isAuth.value= token != null;
 return _isAuth.value;
}

  String? get token {
    if (_expiryDate != null &&
        _expiryDate!.isAfter(DateTime.now()) &&
        _token != null) {
      return _token;
    }
    return null;
  } 

Everything seems good but the application sticks at the authentication page and won't move to home screen after the isAuth's value changed to true!

I searched for that and found another way by creating an authentication middleware. So I added the following code bellow the above code inside the main.dart file:

class AuthMiddlware extends GetMiddleware {
  @override
  RouteSettings? redirect(String route) => !AuthController.instance.isAuth
      ? const RouteSettings(name: authenticationScreenRoute)
      : null;
}

But I get a red line under the redirect word with no error decription and don't know how to complete the middleware and make it work?

Answer 1

Example of how to implement an AuthGuard with FirebaseAuth and Getx.

(If not using FirebaseAuth, swap it to your preferred authentication provider in AuthGuardMiddleware.)

middleware.dart

import 'auth.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class AuthGuardMiddleware extends GetMiddleware {
  var authService = Get.find<AuthService>();

  @override
  RouteSettings? redirect(String? route) {
    return authService.isLoggedIn() ? null : RouteSettings(name: '/login');
  }
}

auth.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:get/get.dart';

class AuthService extends GetxService {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  bool isLoggedIn() {
    return _firebaseAuth.currentUser != null;
  }

  // IMPLEMENT additional FirebaseAuth methods here.
}

main.dart

import 'package:get/get.dart';
import 'middleware.dart';
...
GetPage(  
  name: '/protected',
  page: () => Protected()),
  middlewares: [
    AuthGuardMiddleware(),
  ]),
...

Answer 2

Copy paste :)

class AuthMiddlware extends GetMiddleware {
      @override
      RouteSettings? redirect(String? route) => !AuthController.instance.isAuth
          ? const RouteSettings(name: authenticationScreenRoute)
          : null;
    }