ประยุกต์ระบบ Register Login ด้วย Firebase Auth ใน Flutter

User(
	displayName: null, 
	email: example@gmail.com, 
	emailVerified: false, 
	isAnonymous: false, 
	metadata: UserMetadata(
		creationTime: 2021-11-25 10:30:43.396, 
		lastSignInTime: 2021-11-25 10:34:33.124
	), 
	phoneNumber: null, 
	photoURL: null, 
	providerData, [UserInfo(
		displayName: null, 
		email: example@gmail.com, 
		phoneNumber: null, 
		photoURL: null, 
		providerId: password, 
		uid: example@gmail.com)
	], 
	refreshToken: , 
	tenantId: null, 
	uid: 6TWDv0kfdsfdfdfdf4S2
)

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

try {
  await Firebase.initializeApp();
} catch(e) {
  print("Error no initializeApp");
} 

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:shared_preferences/shared_preferences.dart';

 
// สร้างข้อมูล app state ชื่อ Counter ใช้งานร่วมกับ ChangeNotifier
class AuthProvider with ChangeNotifier {
  final Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseAuth get auth => _auth;

  // ฟังก์ชั่นดึงสถานะการล็อกอิน จากข้อมูล SharedPreferences
  Future<bool> getLoginStatus() async {
    final SharedPreferences prefs = await _prefs;
    return prefs.getBool('loginSuccess') ?? false;
  }     

  // ฟังก์ชั่นกำหนดสถานะการล็อกอิน ไว้ใน SharedPreferences
  Future<bool> setLoginStatus(status) async {
    final SharedPreferences prefs = await _prefs;
    return await prefs.setBool('loginSuccess', status);
  }         

  // ส่วนของการล็อกเอาท์
  Future<bool> logout() async {
    final SharedPreferences prefs = await _prefs;
    await FirebaseAuth.instance.signOut();
    return await prefs.clear();
  }   

  // ส่วนของการล็อกอินผ่าน firebase
  Future<Map<String, dynamic>> authen(String email, String password) async {
    final SharedPreferences prefs = await _prefs; 
    var result;

    try {
      UserCredential userCredential = await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: email,
        password: password
      );
      await prefs.setBool("loginSuccess", true);
      result = json.decode('{"success": "Login successful"}');
    } on FirebaseAuthException catch (e) {
      String err = '';
      if (e.code == 'user-not-found') {
        err = '{"error": "No user found for that email."}';
        result = json.decode(err);        
      } else if (e.code == 'wrong-password') {
        err = '{"error": "Wrong password provided for that user."}';
        result = json.decode(err);        
      } else {
        err = '{"error": "${e.message}"}';
        result = json.decode(err);            
      }
    } 
    return result;
  }

  // ส่วนของการสมัครสมาชิกผ่าน firebase
  Future<Map<String, dynamic>> create(String email, String password) async {
    var result;
 
    try {
      UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: email,
        password: password
      );
      result = json.decode('{"success": "Create new user successful"}');
    } on FirebaseAuthException catch (e) {
      String err = '';
      if (e.code == 'weak-password') {
        err = '{"error": "The password provided is too weak."}';
        result = json.decode(err);
      } else if (e.code == 'email-already-in-use') {
        err = '{"error": "The account already exists for that email."}';
        result = json.decode(err);     
      } else if(e.code == 'unknown'){
        err = '{"error": "Email and Password are required."}';
        result = json.decode(err);     
      } else if(e.code == 'invalid-email'){
        err = '{"error": "The email address is badly formatted."}';
        result = json.decode(err);                
      }else{
/*         print(e.code);
        print(e.message); */
        err = '{"error": "$e"}';
        result = json.decode(err);        
      }
    } catch (e) {
      String err = '{"error": "$e"}';
      result = json.decode(err);
    }    
    return result;
  }    
 
}

auth
  .authStateChanges()
  .listen((User? user) {
    if (user == null) {
      print('User is currently signed out!');
    } else {
      print('User is signed in!');   
    }
  });    

......
....
      return MultiProvider(
        providers: [
        ChangeNotifierProvider(create: (context) => AuthProvider()), 
      ], 
        child: MaterialApp(
                  theme: ThemeData(
....
...

import 'utils/auth_provider.dart';

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

import '../utils/auth_provider.dart';

import 'login.dart';
  
class Profile extends StatefulWidget {
    static const routeName = '/profile';
 
    const Profile({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _ProfileState();
    }
}
  
class _ProfileState extends State<Profile> {
    late FirebaseAuth auth; // สำหรับ authen
    late AuthProvider authProvider; // สำหรับ provider
    bool _loginSuccess = false;  // กำหดตัวแปรสถานะการล็อกอิน

    // ส่วนของตัวแปรข้อมูลพื้นฐาน
    String? _id = ''; // ใน firebase ข้อมูลบ uid เป็น string
    String? _email = '';

    @override
    void initState() {
      super.initState();     
      loadSettings(); // เรียกใช้งานตั้งค่าเมื่อเริ่มต้นเป็นฟังก์ชั่น ให้รองรับ async
    }

    // ตั้งค่าเริ่มต้น
    void loadSettings() async {
      try {
        await Firebase.initializeApp(); // เชื่อมต่อ firebase กับ app
        authProvider = context.read<AuthProvider>(); // ใช้งาน provider
        auth = authProvider.auth; // กำหนด authen
        _loginSuccess = await authProvider.getLoginStatus(); // ถึงสถานะการล็อกอิน ถ้ามี
        setState(() {
          _loginSuccess = _loginSuccess;
        });        
      } catch(e) {
        print("Error no initializeApp");
        _loginSuccess = false;
      }      
    }   

    // ฟังก์ชั่นสำหรับดึงข้อมูลผู้ใช้
    Future<bool> fetchUser() async {		
      await Firebase.initializeApp(); // เชื่อมต่อ firebase กับ app	
      // ใช้งาน provider
      authProvider = context.read<AuthProvider>();
      _loginSuccess = await authProvider.getLoginStatus(); // ถึงสถานะการล็อกอิน ถ้ามี 
      var currentUser = auth.currentUser; // อ้างอิงผู้ใช้ปัจจุบัน

      if (currentUser != null) { // ถ้ามีข้อมูล
        _id = currentUser.uid; // เอาค่ามาเก็บในัวแร เพื่อใช้แสดง
        _email = currentUser.email;
        print(currentUser); // แสดงรายละเอียดข้อมูลของผู้ใช้ทั้งหมดว่ามีอะไรบ้าง
      }
      return true;     
    }

    @override
    void dispose() {
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Profile'),
            ),
            body: FutureBuilder<bool>( 
              future: fetchUser(), // ข้อมูล Future
              builder: (context, snapshot) { 
                if (snapshot.hasData) { 
                  return Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            Text('Profile Screen'),
                            Visibility( // ส่วนที่แสดงกรณีล็อกอินแล้ว
                              visible: _loginSuccess, // ใช้สถานะการล็อกอินกำหนดกรแสดง
                              child: Column(
                                children: [
                                  FlutterLogo(size: 100,),
                                  Text('Welcome member'),
                                  Text(_email!), // แสดงอีเมล
                                  ElevatedButton(
                                    onPressed: () async { // เมื่อล็อกเอาท์
                                      // ทำการออกจากระบบ 
                                      await authProvider.logout();
                                      setState(() {
                                        _loginSuccess = false;
                                      });                      
                                    }, 
                                    child: Text('Logout'),
                                  ),        
                                ],
                              ),
                            ),
                            Visibility( // ส่วนที่แสดงกรณียังไม่ได้ล็อกอิน
                              visible: !_loginSuccess, // ใช้สถานะตรงข้ามการล็อกอินกำหนดกรแสดง
                              child: ElevatedButton(
                                onPressed: () async {
                                  // กำหดให้รอค่า หลังจากเปิดไปหน้า lgoin
                                  final result = await Navigator.push(
                                    context, 
                                    MaterialPageRoute(builder: (context) => Login(),
                                      settings: RouteSettings(
                                        arguments: null 
                                      ),
                                    ),
                                  );    
                                  // ถ้ามีการปิดหน้าที่เปิด และส่งค่ากลับมาเป็น true
                                  if (result == true) {
                                    await fetchUser();     
                                    setState(() {
                                      _loginSuccess = true;
                                    });                                                                     
                                  }
                                              
                                }, 
                                child: Text('Go to Login'),
                              ),
                            ),
                        ],
                    )
                );
                } else if (snapshot.hasError) { // ถ้ามี error
                  return Text('${snapshot.error}');
                }
                return const CircularProgressIndicator();
              },
            ),  
        );
    }
}

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

import '../utils/auth_provider.dart';
import 'register.dart';
  
class Login extends StatefulWidget {
    static const routeName = '/login';
 
    const Login({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _LoginState();
    }
}
  
class _LoginState extends State<Login> {
    late FirebaseAuth auth;
    late AuthProvider authProvider;
  
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();

    // กำหนดตัวแปรรับค่า
    final _email = TextEditingController();
    final _password = TextEditingController();

    // กำหนดสถานะการแสดงแบบรหัสผ่าน
    bool _isHidden = true;    
    bool _authenticatingStatus = false;        
 
    @override
    void initState() {
      super.initState();
      loadSettings(); 
    }

    // ตั้งค่าเริ่มต้น
    void loadSettings() async {
      try {
        await Firebase.initializeApp();
        authProvider = context.read<AuthProvider>();
        auth = authProvider.auth;
        auth
          .authStateChanges()
          .listen((User? user) {
            if (user == null) {
              print('User is currently signed out!');
            } else {
              print('User is signed in!');   
              authProvider.setLoginStatus(true);
              Navigator.pop(context, true);   // ปิดหน้านี้พร้อมคืนค่า true
            }
          });       
      } catch(e) {
        print("Error no initializeApp");
      }             
    }   

    @override
    void dispose() {
      _email.dispose(); // ยกเลิกการใช้งานที่เกี่ยวข้องทั้งหมดถ้ามี
      _password.dispose(); 
      super.dispose();
    }    

    @override
    Widget build(BuildContext context) { 
        return Scaffold(
            appBar: AppBar(
                title: Text('Login'),
            ),
            body: SingleChildScrollView(
              child: Form(
                key: _formKey, // กำหนด key
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Center(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                              SizedBox(height: 20.0,), 
                              FlutterLogo(
                                size: 100,
                              ),
                              Text('Login Screen'),
                              TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Email',
                                  icon: Icon(Icons.email_outlined),
                                ),
                                controller: _email, // ผูกกับ TextFormField ที่จะใช้
                              ), 
                              SizedBox(height: 5.0,),                                
                              TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Password',
                                  icon: Icon(Icons.vpn_key),
                                  suffixIcon: IconButton(
                                    onPressed: (){
                                      setState(() {
                                        _isHidden = !_isHidden; // เมื่อกดก็เปลี่ยนค่าตรงกันข้าม
                                      });
                                    }, 
                                    icon: Icon(
                                      _isHidden // เงื่อนไขการสลับ icon
                                      ? Icons.visibility_off 
                                      : Icons.visibility
                                    ),
                                  ),
                                ),
                                controller: _password, // ผูกกับ TextFormField ที่จะใช้                        
                                obscureText: _isHidden, // ก่อนซ่อนหรือแสดงข้อความในรูปแบบรหัสผ่าน
                              ), 
                              SizedBox(height: 10.0,),                                  
                              Visibility(
                                visible: !_authenticatingStatus,
                                child: ElevatedButton(
                                onPressed: () async {
                                  // เปลี่ยนสถานะเป็นกำลังล็อกอิน
                                  setState(() {
                                    _authenticatingStatus = !_authenticatingStatus;
                                  });

                                  // อ้างอิงฟอร์มที่กำลังใช้งาน ตรวจสอบความถูกต้องข้อมูลในฟอร์ม
                                  if (_formKey.currentState!.validate()) { //หากผ่าน 
                                    FocusScope.of(context).unfocus(); // ยกเลิดโฟกัส ให้แป้นพิมพ์ซ่อนไป

                                    String email = _email.text;
                                    String password = _password.text;

                                    // ทำการล็อกอิน firebase โดยใช้งาน provider
                                    var result = await authProvider.authen(email, password);
                                
                                    // จำลองเปรียบเทียบค่า เพื่อทำการล็อกอิน  
                                    if(result['success']!=null){ // ล็อกอินผ่าน
                                      ScaffoldMessenger.of(context).showSnackBar(
                                        const SnackBar(content: Text('Login Successful')),
                                      );
                                      Navigator.pop(context, true);   // ปิดหน้านี้พร้อมคืนค่า true 
                                    }else{
                                      if(result['error']!=null){ // ล็อกอินไม่ผ่านมี error
                                        String error = result['error'];
                                        ScaffoldMessenger.of(context).showSnackBar(
                                           SnackBar(content: Text('${error}..  try agin!')),
                                        );
                                        setState(() {
                                          _authenticatingStatus = !_authenticatingStatus;
                                        });
                                      }else{ // ล็อกอินไม่ผ่าน อื่นๆ
                                        ScaffoldMessenger.of(context).showSnackBar(
                                           SnackBar(content: Text('Error..  try agin!')),
                                        );
                                        setState(() {
                                          _authenticatingStatus = !_authenticatingStatus;
                                        });
                                      }
                                    }                                       
                                  }                                
                                },
                                  child: Container( 
                                    alignment: Alignment.center, 
                                    width: double.infinity, 
                                    child: const Text('Login'),  
                                  ),
                                ),
                              ),
                              Visibility(
                                visible: _authenticatingStatus,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    CircularProgressIndicator(),
                                    SizedBox(width: 10.0,), 
                                    Text(" Authenticating ... Please wait")
                                  ],
                                ),
                              ),
                              SizedBox(height: 30.0,),   
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text('Or '),
                                  InkWell(
                                    child: Text('Register', 
                                      style: TextStyle(
                                        decoration: TextDecoration.underline, 
                                        color: Colors.blue
                                      )), 
                                    onTap: () async {
                                      // เปิดหน้า สมัครสมาชิก โดย แทนที่ route ล็อกอินเดิม
                                      Navigator.pushReplacement(
                                        context, 
                                        MaterialPageRoute(builder: (context) => Register(),
                                          settings: RouteSettings(
                                            arguments: null 
                                          ),
                                        ),
                                      );    
                                    },
                                  )
                                ],
                              )
                          ],
                      )
                  ),
                ),
              ),
            ),
        );
    }
}

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

import '../utils/auth_provider.dart';

import 'login.dart';
  
class Register extends StatefulWidget {
    static const routeName = '/register';
 
    const Register({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _RegisterState();
    }
}
  
class _RegisterState extends State<Register> {
    late FirebaseAuth auth;
    late AuthProvider authProvider;
   
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();

    // กำหนดตัวแปรรับค่า
    final _email = TextEditingController();
    final _password = TextEditingController();

    // กำหนดสถานะการแสดงแบบรหัสผ่าน
    bool _isHidden = true;    
    bool _registeringStatus = false;    
 
    @override
    void initState() {
      super.initState();        
      loadSettings(); // เรียกใช้งานตั้งค่าเมื่อเริ่มต้นเป็นฟังก์ชั่น ให้รองรับ async    
    }

    // ตั้งค่าเริ่มต้น
    void loadSettings() async {
      try {
        await Firebase.initializeApp();
        authProvider = context.read<AuthProvider>();
        auth = authProvider.auth;     
      } catch(e) {
        print("Error no initializeApp");
      }    
    }       

    

    @override
    void dispose() {
      _email.dispose(); // ยกเลิกการใช้งานที่เกี่ยวข้องทั้งหมดถ้ามี
      _password.dispose(); 
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {

        return Scaffold(
            appBar: AppBar(
                title: Text('Register'),
            ),
            body: SingleChildScrollView(
              child: Form(
                key: _formKey, // กำหนด key
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Center(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                              SizedBox(height: 20.0,), 
                              FlutterLogo(
                                size: 100,
                              ),
                              Text('Register Screen'),
                              TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Email',
                                  icon: Icon(Icons.email_outlined),
                                ),
                                controller: _email, // ผูกกับ TextFormField ที่จะใช้
                              ), 
                              SizedBox(height: 5.0,),                                
                              TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Password',
                                  icon: Icon(Icons.vpn_key),
                                  suffixIcon: IconButton(
                                    onPressed: (){
                                      setState(() {
                                        _isHidden = !_isHidden; // เมื่อกดก็เปลี่ยนค่าตรงกันข้าม
                                      });
                                    }, 
                                    icon: Icon(
                                      _isHidden // เงื่อนไขการสลับ icon
                                      ? Icons.visibility_off 
                                      : Icons.visibility
                                    ),
                                  ),
                                ),    
                                controller: _password, // ผูกกับ TextFormField ที่จะใช้                        
                                obscureText: _isHidden, // ก่อนซ่อนหรือแสดงข้อความในรูปแบบรหัสผ่าน
                              ), 
                              SizedBox(height: 10.0,),                                  
                              Visibility(
                                visible: !_registeringStatus,
                                child: ElevatedButton(
                                onPressed: () async {
                                  // เปลี่ยนสถานะกำลังสมัครสมาชิก
                                  setState(() {
                                    _registeringStatus = !_registeringStatus;
                                  });
 
                                  if (_formKey.currentState!.validate()) { //หากผ่าน 
                                    FocusScope.of(context).unfocus(); // ยกเลิดโฟกัส ให้แป้นพิมพ์ซ่อนไป

                                    String email = _email.text;
                                    String password = _password.text;

                                    // เรียกใช้งานการสมัครสมาชิกใหม่ด้วย firebase ผ่าน provider
                                    var result = await authProvider.create(email, password);

                                    if(result['success']!=null){ // สร้างบัญชีสำเร็จ
                                      ScaffoldMessenger.of(context).showSnackBar(
                                          const SnackBar(content: Text('Create new user Successful')),
                                      );    
                                      Navigator.pushReplacement( // ไปหน้าล็อกอิน
                                          context, 
                                          MaterialPageRoute(builder: (context) => Login(),
                                            settings: RouteSettings(
                                              arguments: null 
                                            ),
                                          ),
                                      );       
                                    }else{
                                      if(result['error']!=null){ // สร้างบัญชีไม่ผ่าน
                                        String error = result['error'];
                                        ScaffoldMessenger.of(context).showSnackBar(
                                           SnackBar(content: Text('${error}..  try agin!')),
                                        );
                                        setState(() {
                                          _registeringStatus = !_registeringStatus;
                                        });                                           
                                      }else{ // สร้างบัญชีไม่ผ่าน อื่นๆ 
                                        ScaffoldMessenger.of(context).showSnackBar(
                                           SnackBar(content: Text('Error..  try agin!')),
                                        );
                                        setState(() {
                                          _registeringStatus = !_registeringStatus;
                                        });                                                                                
                                      }
                                    } 
                     
                                  }                                                           
                                },
                                  child: Container( 
                                    alignment: Alignment.center, 
                                    width: double.infinity, 
                                    child: const Text('Register'),  
                                  ),
                                ),
                              ),
                              Visibility(
                                visible: _registeringStatus,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    CircularProgressIndicator(),
                                    SizedBox(width: 10.0,), 
                                    Text(" Registering ... Please wait")
                                  ],
                                ),
                              ),                              
                              SizedBox(height: 30.0,),   
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text('Already member? '),
                                  InkWell(
                                    child: Text('Login', 
                                      style: TextStyle(
                                        decoration: TextDecoration.underline, 
                                        color: Colors.blue
                                      )), 
                                    onTap: (){
                                      Navigator.pushReplacement(
                                          context, 
                                          MaterialPageRoute(builder: (context) => Login(),
                                            settings: RouteSettings(
                                              arguments: null 
                                            ),
                                          ),
                                        );    
                                    },
                                  )
                                ],
                              )
                          ],
                      )
                  ),
                ),
              ),
            ),
        );
    }
}