google_sign_in_web on first interaction will trigger a popup alert in Firefox, but not in Chrome #54768
Description
In Firefox or Safari, click the "sign in" button. This calls googleSignIn.signIn(), but triggers a popup warning banner. Have to click popup blocked warning to enable the showing of Google Sign In oauth screen.
After signing in, it doesn't detect the user change. Have to click "sign in" again, to bring up the oauth screen. It will sign in automatically and then it detects the user.
Note this only happens if clicking "sign in" is the first user interaction. By clicking "sign out" first (expected to do nothing since user isn't signed in yet), then clicking "sign in", it would not trigger the popup alert.
Works as expected in Chrome, click "sign in", popup shows up, enter credentials, and the user change detected in app.
Using:
google_sign_in: ^4.1.0
Tested on:
Windows, Firefox 75.0
Windows, Chrome 81.0.4044.92
Mac, Firefox 75.0
Mac, Safari 13.0.4
index.html
<html>
<head>
<meta name="google-signin-client_id" content="XXXXXXXXXXXXXX.apps.googleusercontent.com">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="google_web_sign_in_spike">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>google_web_sign_in_spike</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
main.dart
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sign In Demo',
home: MyHomePage(title: 'Sign In Demo'),
);
}
}
class Test extends StatefulWidget {
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GoogleSignIn _googleSignIn;
GoogleSignInAccount _googleSignInAccount;
@override
void initState() {
_googleSignIn = GoogleSignIn(
scopes: ['https://www.googleapis.com/auth/contacts'],
clientId:
"XXXXXXXXXXXXXX.apps.googleusercontent.com");
_googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount account) {
setState(() {
_googleSignInAccount = account;
});
});
super.initState();
}
void _signIn() async {
try {
print("SignIn");
GoogleSignInAccount account = await _googleSignIn.signIn();
GoogleSignInAuthentication authentication = await account.authentication;
print("Id: ${account?.id}");
print("Display name: ${account?.displayName}");
print("Email: ${account?.email}");
print("AccessToken: ${authentication?.accessToken}");
} catch (error) {
print(error);
}
}
void _signOut() async {
print("SignOut");
await _googleSignIn.signOut();
}
void _disconnect() async {
print("Disconnect");
await _googleSignIn.disconnect();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Is signed in: ${_googleSignInAccount != null}"),
Text("Signed in as: ${_googleSignInAccount?.email ?? ''}"),
RaisedButton(
onPressed: _signIn,
child: Text("Sign In"),
),
RaisedButton(
onPressed: _signOut,
child: Text("Sign Out"),
),
RaisedButton(
onPressed: _disconnect,
child: Text("Disconnect"),
),
],
),
),
);
}
}