I've been working with Firebase auth and Firestore and everything works on Android emu, but when I lunch in Chrome, I can't get pass login, I've imported all the code Firebase gave me for index.html :
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.21.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.21.1/firebase-auth.js"></script>
<script src="/__/firebase/7.21.1/firebase-firestore.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCtfc......IstukN0Ci_mc",
authDomain: "prettya1..91e.firebaseapp.com",
databaseURL: "https://prettya.com",
projectId: "prettyan..",
storageBucket: "prettyanki-....com",
messagingSenderId: "17870...",
appId: "....."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<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>
login :
import 'package:PrettyAnki/services/auth.dart';
import 'package:PrettyAnki/shared/constants.dart';
import 'package:PrettyAnki/shared/loading.dart';
import 'package:flutter/material.dart';
class Register extends StatefulWidget {
final Function toggleView;
Register({this.toggleView});
@override
_RegisterState createState() => _RegisterState();
}
class _RegisterState extends State<Register> {
List<Color> gradientcolors = [Color(0xFFcb2d3e), Color(0xFFef473a)];
final AuthService _auth = AuthService();
final _formkey = GlobalKey<FormState>();
bool loading = false;
//text field sate
String email = "";
String password = "";
String error = "";
@override
Widget build(BuildContext context) {
return loading
? Loading()
: Scaffold(
appBar: AppBar(
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: gradientcolors)),
),
centerTitle: true,
elevation: 0.0,
title: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Pretty",
style: TextStyle(
color: Colors.white,
fontFamily: "Courgette",
fontSize: 25),
),
TextSpan(text: "Anki", style: TextStyle(color: Colors.white))
]),
),
),
body: Container(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
child: Form(
key: _formkey,
child: Column(
children: [
SizedBox(
height: 20,
),
Text(
"Welcome,",
style:
TextStyle(fontSize: 40, color: Colors.redAccent),
),
SizedBox(
height: 20,
),
TextFormField(
decoration:
textInputDecoration.copyWith(hintText: "email"),
validator: (val) =>
val.isEmpty ? "Enter an email" : null,
style: TextStyle(color: Colors.white),
onChanged: (val) {
setState(() {
email = val;
});
},
),
SizedBox(
height: 20,
),
TextFormField(
decoration: textInputDecoration.copyWith(
hintText: "password"),
validator: (val) => val.length < 6
? "Enter a password 6+ characters long"
: null,
style: TextStyle(color: Colors.white),
obscureText: true,
onChanged: (val) {
setState(() {
password = val;
});
},
),
SizedBox(
height: 20,
),
TextFormField(
decoration: textInputDecoration.copyWith(
hintText: "confirm password"),
validator: (val) {
if (val != password) {
return "Passwords don't match";
} else {
return null;
}
},
style: TextStyle(color: Colors.white),
obscureText: true,
onChanged: (val) {
setState(() {
password = val;
});
},
),
SizedBox(
height: 20,
),
RaisedButton(
color: Color(0xFFcb2d3e),
child: Text(
"Sign Up",
style: TextStyle(color: Colors.white),
),
onPressed: () async {
if (_formkey.currentState.validate()) {
setState(() {
loading = true;
});
dynamic result =
await _auth.registerWithEmailAndPassword(
email, password, "");
if (result == null) {
setState(() {
error = "please supply a valid email";
loading = false;
});
}
}
}),
SizedBox(
height: 20,
),
Text(
error,
style: TextStyle(color: Colors.white),
),
SizedBox(
height: 20,
),
FlatButton(
onPressed: () {
widget.toggleView();
},
child: Text(
"Already have an account ? Sign In",
style: TextStyle(color: Colors.red[400]),
))
],
))),
);
}
}
I searched on internet but there are very few tutorials for Firebase Flutter web and they don't seem to have this problem.
sometimes i get this error :
Error: MissingPluginException(No implementation found for method
startListeningAuthState on channel plugins.flutter.io/firebase_auth)
at Object.throw_ [as throw] (http://localhost:55251/dart_sdk.js:4465:11)
at MethodChannel._invokeMethod
(http://localhost:55251/packages/flutter/src/services/platform_channel.dart.lib.js:
409:21)
at _invokeMethod.next (<anonymous>)
at http://localhost:55251/dart_sdk.js:37106:33
at _RootZone.runUnary (http://localhost:55251/dart_sdk.js:36960:58)
at _FutureListener.thenAwait.handleValue
(http://localhost:55251/dart_sdk.js:32047:29)
at handleValueCallback (http://localhost:55251/dart_sdk.js:32594:49)
at Function._propagateToListeners (http://localhost:55251/dart_sdk.js:32632:17)
at _Future.new.[_completeWithValue] (http://localhost:55251/dart_sdk.js:32475:23)
at async._AsyncCallbackEntry.new.callback
(http://localhost:55251/dart_sdk.js:32497:35)
at Object._microtaskLoop (http://localhost:55251/dart_sdk.js:37221:13)
at _startMicrotaskLoop (http://localhost:55251/dart_sdk.js:37227:13)
at http://localhost:55251/dart_sdk.js:32849:9
pubspec :
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3
firebase_auth: ^0.14.0+5
cloud_firestore: ^0.12.9+4
firebase: ^7.3.0
firebase_core: ^0.4.0
provider: ^3.1.0
curved_navigation_bar: ^0.3.3
flutter_spinkit: ^4.0.0
json_annotation: ^3.0.1
flip_card: ^0.4.4
carousel_slider: ^2.2.1