Flutter Web Heroku Google OAuth Fails

Question

I just deployed a Flutter Web App on Heroku.

I used https://github.com/diezep/heroku-buildpack-flutter as the buildpack and it deployed beautifully.

My Flutter app uses Google OAuth for logging in users. But apparently, OAuth fails on Heroku, it works perfectly on local.

I added heroku URL to google cloud console, and as suggested on https://medium.com/@wendreof/how-publish-flutter-web-app-on-heroku-github-pages-f4df95bdd385 I have also added <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> to my web/index.html

But still OAuth fails.

I am using the latest google_sign_in package https://pub.dev/packages/google_sign_in

I tried adding print statements in the catchError function for the GoogleSignIn and the error printed on the console was:

NoSuchMethodError: method not found: 'toString' on null

This seems a bit weird to me! (Maybe this error is because I cannot print the error variable directly?)

Here's my code for login:

void login() async {
    await GoogleSignIn().signIn().then((accountDetails) {
      accountDetails?.authentication.then((googleKey) {
        localStorageUtilities.setIdToken(googleKey.idToken ?? 'Invalid Token');
        Fluttertoast.showToast(
            msg: "Login Success!",
            toastLength: Toast.LENGTH_LONG,
            gravity: ToastGravity.BOTTOM,
            webBgColor: "#2ecc71",
            timeInSecForIosWeb: 2,
            textColor: Colors.white,
            webPosition: "center",
            fontSize: 16.0);
        Get.offAll(Dashboard());
      }).catchError((err) {
        print(err);
        Fluttertoast.showToast(
            msg: "Login Failed",
            toastLength: Toast.LENGTH_LONG,
            gravity: ToastGravity.BOTTOM,
            webBgColor: "#880808",
            timeInSecForIosWeb: 2,
            textColor: Colors.white,
            webPosition: "center",
            fontSize: 16.0);
      });
    }).catchError((onError) {
      print(onError);
      Fluttertoast.showToast(
          msg: "Login Failed",
          toastLength: Toast.LENGTH_LONG,
          gravity: ToastGravity.BOTTOM,
          webBgColor: "#880808",
          timeInSecForIosWeb: 2,
          textColor: Colors.white,
          webPosition: "center",
          fontSize: 16.0);
    });
  }

Any idea what could be reason for this?

Answer 1

Easiest Way:

I ended up deploying to Firebase Hosting which made the process a lot easier and smoother.