firebase authenticaton code

import 'dart:async';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:pdtpronewweb/Screens/landingpage.dart';
import 'package:pdtpronewweb/Screens/responsive.dart';
import 'package:pdtpronewweb/Utils/colorUtils.dart';
import 'package:pdtpronewweb/Utils/customWidget.dart';
import 'package:pdtpronewweb/Utils/stringUtils.dart';
import 'package:pdtpronewweb/Utils/validationUtils.dart';
import 'package:pdtpronewweb/size_helpers/screenSize.dart';

class LoginPageWeb extends StatefulWidget {
  @override
  _LoginPageWebState createState() => _LoginPageWebState();
}

class _LoginPageWebState extends State<LoginPageWeb> {
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  bool showOTPTextField = false;
  Timer _timer;
  int _start =30;
  String phoneNo;
  String smsCode;
  String verificationId;
  bool _validate = false;

  Future<void> verifyPhone() async {
    final PhoneCodeAutoRetrievalTimeout autoRetrieve =(String verId) {
      this.verificationId = verId;
    };
    final PhoneCodeSent smsCodeSent = (String verId, [int forceCodeResend]) {
      this.verificationId = verId;
      enableOtpTextField().then((value){
        print('Signed IN');
      })
      ;
    };
    final  PhoneVerificationCompleted verifiedSuccess = (AuthCredential user) {
      print('verified');
    };

    final PhoneVerificationFailed veriFailed = (AuthException exception) {
      print('${exception.message}');
    };

    await FirebaseAuth.instance.verifyPhoneNumber(
        phoneNumber: this.phoneNo,
        timeout: Duration(seconds: 5),
        verificationCompleted: verifiedSuccess,
        verificationFailed: veriFailed,
        codeSent: smsCodeSent,
        codeAutoRetrievalTimeout: autoRetrieve);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    startTimer();

  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  void startTimer()
  {
    const timeSecond =Duration(seconds: 1);
    _timer =Timer.periodic(timeSecond, (Timer time) => setState(
            (){
          if(_start < 1){
            time.cancel();
          }else if(showOTPTextField==true){
            _start = _start - 1;
          }
        }
    ));
  }

  @override
  Widget build(BuildContext context) {
    return ResponsiveWidget(
      largeScreen: Scaffold(
        body: Center(
          child: Container(
              width: displayWidth(context) * 0.3,

              padding: EdgeInsets.only(top: 25.0,right: 50.0,left:50.0 ,bottom: 20.0),
              child:ListView(
                children: <Widget>[
                  Form(
                    key: _formKey,

                    child: Center(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Container(
                              height: 150,
                              child: Image.asset('Assets/Images/Logo.png',scale: 0.2,)),
                          SizedBox(
                            height: 15.0,
                          ),
                          CustomWidget.getText(StringUtils.verifyWithPhoneNumber,
                              style: TextStyle(color: Colors.orange[500]),
                              fontSize: 25,
                              fontWeight: FontWeight.bold),
                          SizedBox(
                            height: 10.0,
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: <Widget>[
                              TextFormField(
                                onChanged: (value) {
                                  this.phoneNo = value;
                                },
                                initialValue: "+91",
                                validator: ValidationUtils.validateMobile,
                                decoration: InputDecoration(
                                    hintText: '+91-9988776655',
                                    hintStyle: TextStyle(color: Colors.grey[300] , fontSize: 12.0),
                                    labelText: "Phone",
                                    labelStyle: TextStyle(color: Colors.grey[300],),
                                    enabledBorder: UnderlineInputBorder(
                                      borderSide: BorderSide(color: Colors.grey[400]),
                                    ),
                                    focusedBorder: UnderlineInputBorder(
                                      borderSide: BorderSide(color: Colors.grey[400]),
                                    )
                                ),
                                keyboardType: TextInputType.phone,
                              ),
                              showOTPTextField==false?disableOtpTextField():enableOtpTextField(),
                              SizedBox(height: 30.0,),
                              Container(
                                height: 50,
                                child: RaisedButton(
                                    onPressed: (){
                                      showOTPTextField==true?
                                      FirebaseAuth.instance.currentUser().then((user) {
                                        if(_formKey.currentState.validate()){
                                          if (user != null) {
                                            Navigator.pushReplacement(context, MaterialPageRoute(builder: (ctx)=>LandingPage()));
                                          } else {
                                            signIn();
                                          }
                                        }
                                      }):
                                      _validatorOTP();

                                      //otpVerificationDailog();
                                    },
                                    color: ColorUtils.buttonLightOrangeColor,
                                    child: showOTPTextField == false ?
                                    CustomWidget.getText(
                                      StringUtils.sendOtp,
                                      style: TextStyle(color: Colors.white),):
                                    CustomWidget.getText(
                                      StringUtils.verify,
                                      style: TextStyle(color: Colors.white),),

                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(5.0),)
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 30.0,),
                          Column(
                            children: <Widget>[
                              CustomWidget.getText(
                                  StringUtils.byContinuing,
                                  style: TextStyle(color: ColorUtils.frontLightGreyColor,fontSize: 13.0),
                                  textAlign: TextAlign.center
                              ),
                              RichText(
                                  text:
                                  TextSpan(
                                      children: [
                                        TextSpan(text: "I accept the  ",style: TextStyle(color: ColorUtils.frontLightGreyColor),),
                                        TextSpan(text: "terms and conditions" ,
                                          style: TextStyle(color: Colors.black54,fontSize: 13.0),
                                        )
                                      ]))
                            ],
                          ),
                          SizedBox(height: 30,),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              // Text('00:00 sec',style: TextStyle(color: Colors.grey)),
                              showOTPTextField == true? Text("00.$_start sec", style:TextStyle(color: Colors.grey)):
                              Text('00:00 sec',style: TextStyle(color: Colors.grey,fontSize: 13.0)),
                              GestureDetector(
                                onTap: (){},
                                child: Text('Re-send OTP',style: TextStyle(color: Colors.grey,fontSize: 13.0)),
                              ),
                            ],
                          ),
                          SizedBox(height: 30.0,),
                          CustomWidget.getRichText(
                              "Don't have an account? "," Sign-up",
                              textColor:ColorUtils.frontLightGreyColor,
                              newTextColor: ColorUtils.pinkColor
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              )

          ),
        ),

      ),
      smallScreen: Material(
        child: Container(
            padding: EdgeInsets.only(top: 25.0,right: 50.0,left:50.0 ,bottom: 20.0),
            child:ListView(
              children: <Widget>[
                Form(
                  key: _formKey,

                  child: Center(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                            height: 150,
                            child: Image.asset('Assets/Images/Logo.png',scale: 0.2,)),
                        SizedBox(
                          height: 15.0,
                        ),
                        CustomWidget.getText(StringUtils.verifyWithPhoneNumber,
                            style: TextStyle(color: Colors.orange[500]),
                            fontSize: 25,
                            fontWeight: FontWeight.bold),
                        SizedBox(
                          height: 10.0,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            TextFormField(
                              onChanged: (value) {
                                this.phoneNo = value;
                              },
                              initialValue: "+91",
                              validator: ValidationUtils.validateMobile,
                              decoration: InputDecoration(
                                  hintText: '+91-9988776655',
                                  hintStyle: TextStyle(color: Colors.grey[300] , fontSize: 12.0),
                                  labelText: "Phone",
                                  labelStyle: TextStyle(color: Colors.grey[300],),
                                  enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.grey[400]),
                                  ),
                                  focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.grey[400]),
                                  )
                              ),
                              keyboardType: TextInputType.phone,
                            ),
                            showOTPTextField==false?disableOtpTextField():enableOtpTextField(),
                            SizedBox(height: 30.0,),
                            Container(
                              height: 50,
                              child: RaisedButton(
                                  onPressed: (){
                                    showOTPTextField==true?
                                    FirebaseAuth.instance.currentUser().then((user) {
                                      if(_formKey.currentState.validate()){
                                        if (user != null) {
                                          Navigator.pushReplacement(context, MaterialPageRoute(builder: (ctx)=>LandingPage()));
                                        } else {
                                          signIn();
                                        }
                                      }
                                    }):
                                    _validatorOTP();

                                    //otpVerificationDailog();
                                  },
                                  color: ColorUtils.buttonLightOrangeColor,
                                  child: showOTPTextField == false ?
                                  CustomWidget.getText(
                                    StringUtils.sendOtp,
                                    style: TextStyle(color: Colors.white),):
                                  CustomWidget.getText(
                                    StringUtils.verify,
                                    style: TextStyle(color: Colors.white),),

                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(5.0),)
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 30.0,),
                        Column(
                          children: <Widget>[
                            CustomWidget.getText(
                                StringUtils.byContinuing,
                                style: TextStyle(color: ColorUtils.frontLightGreyColor,fontSize: 13.0),
                                textAlign: TextAlign.center
                            ),
                            RichText(
                                text:
                                TextSpan(
                                    children: [
                                      TextSpan(text: "I accept the  ",style: TextStyle(color: ColorUtils.frontLightGreyColor),),
                                      TextSpan(text: "terms and conditions" ,
                                        style: TextStyle(color: Colors.black54,fontSize: 13.0),
                                      )
                                    ]))
                          ],
                        ),
                        SizedBox(height: 30,),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            // Text('00:00 sec',style: TextStyle(color: Colors.grey)),
                            showOTPTextField == true? Text("00.$_start sec", style:TextStyle(color: Colors.grey)):
                            Text('00:00 sec',style: TextStyle(color: Colors.grey,fontSize: 13.0)),
                            GestureDetector(
                              onTap: (){},
                              child: Text('Re-send OTP',style: TextStyle(color: Colors.grey,fontSize: 13.0)),
                            ),
                          ],
                        ),
                        SizedBox(height: 30.0,),
                        CustomWidget.getRichText(
                            "Don't have an account? "," Sign-up",
                            textColor:ColorUtils.frontLightGreyColor,
                            newTextColor: ColorUtils.pinkColor
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            )

        ),
      ),


    );
  }

  enableOtpTextField(){
    return TextFormField(
      onChanged: (value) {
        this.smsCode = value;
      },
      validator: ValidationUtils.validateOtp,

      decoration: InputDecoration(
        hintText: '.  .  .  .  .  .',
        hintStyle: TextStyle(color: ColorUtils.frontLightGreyColor , fontSize: 12.0),
        labelText: 'Enter OTP',
        labelStyle: TextStyle(color: ColorUtils.frontLightGreyColor,fontSize: 12.0
        ),

        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: ColorUtils.frontLightGreyColor),
        ),

        focusedBorder:  UnderlineInputBorder(
          borderSide: BorderSide(color: ColorUtils.frontLightGreyColor),
        ),
      ),

      keyboardType: TextInputType.phone,
    );
  }

  disableOtpTextField(){
    return Container();
  }


  signIn(){
    final AuthCredential credential = PhoneAuthProvider.getCredential(verificationId: verificationId, smsCode: smsCode);
    FirebaseAuth.instance.signInWithCredential(credential).then((user) {
      Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (ctx)=>LandingPage()));
    }).catchError((e) {
      print(e);
    });
  }

  otpVerificationDailog(){
    return showDialog(
        context: context,
        builder: (BuildContext context){
          return SimpleDialog(
            contentPadding: EdgeInsets.only(
                left: 20.0 ,
                top: 20.0 ,
                right: 20.0 ,
                bottom: 40.0),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                CustomWidget.getText(StringUtils.otpVerification , style: TextStyle(
                  color: ColorUtils.buttonLightOrangeColor,fontSize: 15.0,
                )),
                GestureDetector(
                  onTap: (){
                    FirebaseAuth.instance.currentUser().then((user){
                      if (user !=null){
                        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (ctx)=>LandingPage()));
                      }else{
                        verifyPhone();
                      }

                    });
                    setState(() {
                      showOTPTextField= true;
                    });
                    Navigator.pop(context);
                  },

                  child: Icon(Icons.close,color: ColorUtils.frontDarkGreyColor,size: 16.0,),
                )
              ],
            ),

            children: <Widget>[
              Column(
                children: <Widget>[
                  CustomWidget.getText(
                      StringUtils.anOtpHasBeenSentToYourMobileNumber,
                      style: TextStyle(
                          fontSize: 15.0 ,
                          color: ColorUtils.frontLightGreyColor
                      )
                  ),
                ],
              ),
            ],
          );
        }

    );
  }

  _validatorOTP() {
    if (_formKey.currentState.validate()) {
      otpVerificationDailog();
      // No any error in validation
    } else {
      // validation error
      setState(() {
        _validate = true;
      });
    }
  }
}

[FIREBASE_AUTHENTICATION ] doesn't receive any OTP, error or warning #2193

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions