Why does the code execute without waiting for await to return in dart/flutter?

Question

I am working on a mobile app. I am using cloud functions for completing the registration process. Following is a simplified reproducible example of my code:- the dart File:-

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:cloud_functions/cloud_functions.dart';

void main() => runApp(MaterialApp(home: Test()));

class Test extends StatefulWidget {
  const Test({
    Key key,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => TestState();
}

class TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text('Hi,',style: GoogleFonts.pacifico(fontSize: 25),),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget> [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children:<Widget>[
              Padding(padding:const EdgeInsets.all(8)),
              ElevatedButton(
                onPressed:(){
                  enroll.call("Password", "email@gmail.com", "name");
                },
                child:Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Text('TEST',style: TextStyle(fontSize: 20.0),)
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
  Future<void> enroll(String pass,String email,String name) async {
    HttpsCallable register = FirebaseFunctions.instanceFor(region: 'asia-south1').httpsCallable('Register');
    final funcCall = await register.call(
        <String, dynamic>{
          'pass': pass,
          'email': email,
          'Name': name,
        });
    String result = funcCall.data;
    print(result);
  }
}

Firebase function code is:-

import * as functions from "firebase-functions";
const admin = require('firebase-admin');
admin.initializeApp();
exports.Register = functions.region('asia-south1').https.onCall(async (data,context)=>{
    const pass = data.pass;
    const Name = data.name;
    const email = data.email;
    await admin.auth()
        .createUser({
            email: email,
            emailVerified: false,
            password: pass,
            displayName: Name,
            disabled: false,
        })
        .then(() => {
            console.log("done")
            return "done"
          })
        .catch((error: any) => {
            console.error(error.code);
            return error.code
        });
                        
});

The firebase console logs were the following during last execution:-

->10:54:37.099 AM
  Register
  Function execution took 662 ms, finished with status code: 200
->10:54:37.095 AM
  Register
  auth/email-already-exists
->10:54:36.438 AM
  Register
  Function execution started

The debug logs were:-

I/ViewRootImpl@3af8d1b[MainActivity]( 5889): ViewPostIme pointer 0
I/ViewRootImpl@3af8d1b[MainActivity]( 5889): ViewPostIme pointer 1
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/ConscryptEngineSocket;->setUseSessionTickets(Z)V (greylist-max-q,core-platform-api, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/OpenSSLSocketImpl;->setUseSessionTickets(Z)V (greylist-max-q,core-platform-api, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/AbstractConscryptSocket;->setUseSessionTickets(Z)V (greylist-max-q, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/ConscryptEngineSocket;->setHostname(Ljava/lang/String;)V (greylist-max-q,core-platform-api, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/OpenSSLSocketImpl;->setHostname(Ljava/lang/String;)V (greylist-max-q,core-platform-api, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/AbstractConscryptSocket;->setHostname(Ljava/lang/String;)V (greylist-max-q, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/OpenSSLSocketImpl;->setAlpnProtocols([B)V (greylist-max-q,core-platform-api, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/AbstractConscryptSocket;->setAlpnProtocols([B)V (greylist-max-q, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/OpenSSLSocketImpl;->getAlpnSelectedProtocol()[B (greylist-max-q,core-platform-api, reflection, denied)
W/ckerbin.atchec( 5889): Accessing hidden method Lcom/android/org/conscrypt/AbstractConscryptSocket;->getAlpnSelectedProtocol()[B (greylist-max-q, reflection, denied)
I/flutter ( 5889): null

Both the codes are simplified versions of the actual code so please don't say why using cloud function for this..

I have changed the complete question with reproducible codes. — Nimesh Garg, Mar 30 '21 at 05:30
Hi there, instead of `await admin.auth()` have you tried `return admin.auth()` in the firebase function? This is how the docs set an example to return a promise. https://firebase.google.com/docs/functions/callable#sending_back_the_result — Antonio Ramirez, Apr 09 '21 at 21:47
have you tried adding `onPressed:() async { await enroll.call}`? Can you clarify what is the piece of code that is executing before time? — Antonio Ramirez, Apr 13 '21 at 23:01
I don't think the problem is with flutter code, since if I just return a string from the cloud function, then it is successfully displayed in the flutter app. — Nimesh Garg, Apr 15 '21 at 05:31
the cloud function does not return anything upon execution whereas cloud logs confirm that it was executed correctly and should have returned a value — Nimesh Garg, Apr 15 '21 at 05:33

Antonio Ramirez · Accepted Answer · 2021-04-16T23:05:35.673

Taking a closer look at your Firebase function, I was able to identify two issues:

Usage of both await and then keywords in the same function. These two statements do the same thing. Quoting this accepted answer.

await is just an internal version of .then() (doing basically the same thing). The reason to choose one over the other has to do with desired coding style or coding convenience. Certainly, the interpreter has a few more opportunities to optimize things internally with await, but it's unlikely that should be how you decide which to use.

In other words, it is an overhead to use both of them.

The next piece of code returns results only in the context of the then nested Promise which is not the same context of the Cloud Function Register. In other words, you receive a null value in flutter because the Cloud Function is not returning anything in its running context.

.then(() => {
        console.log("done")
        return "done"
      })
.catch((error: any) => {
        console.error(error.code);
        return error.code

As I mentioned earlier, then and await are used for the same purpose, so you have two options to correct the code.

You can use await:

exports.Register = functions.https.onCall(async (data, context) => {
[...]
 try {
      await admin.auth()
        .createUser({
            email: email,
            emailVerified: false,
            password: pass,
            displayName: Name,
            disabled: false,
        });
        return "user successfully registered";

      
    } catch (error) {
      console.log(error);
      return "the function failed;check Cloud Logging for the reason";
    }
}

Or you can use then:

exports.RegisterThen = functions.https.onCall((data, context) => {
[...]
return admin.auth()
      .createUser({
            email: email,
            emailVerified: false,
            password: pass,
            displayName: Name,
            disabled: false,
        })
          .then(() => {return  "user successfully registered"})
          .catch(error => {
            console.log(error);
            return "the function failed;check Cloud Logging for the reason";
          });
}

Please notice how the function is defined with async when I use await and how async is not used if I am using the then function from Promises.

I hope you find this useful

it worked! I would keep that in mind from now on – Nimesh Garg Apr 20 '21 at 12:00 — Nimesh Garg, Apr 20 '21 at 12:00

Why does the code execute without waiting for await to return in dart/flutter?

1 Answers1