Can't get pass login screen flutter web

flutter google-cloud-firestore firebase-authentication flutter-web

317

so the solution is, you need to update dependencies, my pubscpec now :

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.18.0+1
  firebase_auth_web: ^0.3.0+1
  cloud_firestore: ^0.14.0+2
  firebase: ^7.3.0
  
  firebase_core: ^0.5.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

317

Author by

Paul Cbt

Updated on December 24, 2022

Comments

Paul Cbt over 1 year

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>

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

alexandrum over 3 years

Hi, for security reasons, you should remove the apiKey value you posted. And is there any errors you get? Please offer more details about the issue.
Frank van Puffelen over 3 years

There is no login screen in the code you shared. Please make sure that your question contains the minimal, complete/standalone code that reproduces the problem, as it drastically increases the chances that someone can help.
Paul Cbt over 3 years

@FrankvanPuffelen thanks, i added the codes
Paul Cbt over 3 years

@alexandrum, thanks for the advice, i sometimes get an error, i added it in the post
alexandrum over 3 years

@PaulCbt Could you please also add the versions of SDK and firebase are you using? I suspect the versions are not compatible.
Paul Cbt over 3 years

@alexandrum do you mean in pubscpec.yaml ? if so : 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
alexandrum over 3 years

I had a look over pub.dev and it seems your versions are kinda behind, try to update them (if it is possible). As you can see on the link, you have the latest firebase core but not on auth and others.
Paul Cbt over 3 years

@alexandrum, thanks a lot, that was it! everything working now
alexandrum over 3 years

You welcome mate. You should always look for the latest versions or version compatibilities between used libraries. ;)