Dont use across async gap

Question

I have a AuthGate listening to : authStateChanges(),

and I have a login page where I would like to show a Circular progress indicator (inside the button) while waiting for firebase sign in and when it finishes the AuthGate will go to homepage or it will show error, the current solution I have is telling me not to use across async gaps:

My login Page:

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import '../services/auth/db_handler.dart';

class LoginPage extends StatefulWidget {
  final void Function()? onTap;
  const LoginPage({super.key, required this.onTap});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  final dbhandler = DBHandler();
  @override
  void dispose() {
    emailController.dispose();
    passwordController.dispose();

    super.dispose();
  }

  Future signIn() async {
    //laoding circle
    showDialog(
        context: context,
        builder: (context) {
          return Center(child: CircularProgressIndicator());
        });
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
          email: emailController.text.trim(),
          password: passwordController.text.trim());
      Navigator.of(context).pop();
    } catch (e) {
      setState(() {
        loginfail = true; //loginfail is bool
      });
      Navigator.of(context).pop(); //popping l
    }
  }

  bool loginfail = false;
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      body: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(
                Icons.login,
                size: 100,
              ),
              const SizedBox(
                height: 50,
              ),
              TextField(
                controller: emailController,
                cursorColor: Colors.white,
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                    labelText: 'Email', errorText: loginfail ? '' : null),
              ),
              const SizedBox(
                height: 5,
              ),
              TextField(
                controller: passwordController,
                cursorColor: Colors.white,
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                    labelText: 'Password',
                    errorText: loginfail
                        ? 'Incorrect username or password. Please try again'
                        : null),
              ),
              const SizedBox(
                height: 20,
              ),
              CupertinoButton.filled(
                onPressed: () {
                  signIn();
                },
                child: const Text(
                  'Sign in',
                  style: TextStyle(fontSize: 19),
                ),
              ),
              const SizedBox(
                height: 24,
              ),
              //not a memeber register now
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('Not a member?'),
                  const SizedBox(
                    width: 4,
                  ),
                  GestureDetector(
                    onTap: widget.onTap,
                    child: const Text(
                      'Register Now',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}