20220404

임시회원가입한 유저가 정식 회원가입을 할 수 있도록 하자.

일단, USER 테이블부터 변형하자.

 

현재 user 테이블

 

변경된 ERD의 user 테이블

api 문서화?

 

일단

DROP TABLE IF EXISTS User;

CREATE TABLE User (
  UID VARCHAR(255) PRIMARY KEY,
  Grade INT DEFAULT 1 NOT NULL,
  userName VARCHAR(255),
  nickName VARCHAR(255) DEFAULT 'NewFriend' UNIQUE NOT NULL,
  sex ENUM('M', 'F', 'secret') DEFAULT 'secret'
);

-- 모든 회원 데이터 삭제
-- DELETE FROM user; 

-- 회원가입시 삽입 구문
INSERT INTO User (UID, nickName) 
VALUES ('myUID', 'JD');

-- 로그인시 계정 확인 구문
SELECT *
FROM User
WHERE UID = 'myUID';

 

onAuthStateChanged 코드는 앱이 실행되고 자동 로그인되었을 때에도 동작합니다.

onAuthStateChanged 함수는 인증 상태에 대한 변경 사항이 발생할 때마다 호출됩니다. 
이 때, 변경 사항에는 로그인, 로그아웃, 인증 상태 변경 등이 포함됩니다.

즉, 사용자가 앱에 로그인하거나 로그아웃하면 onAuthStateChanged가 호출되지만, 
사용자가 앱에 로그인한 적이 있고 자동 로그인되는 경우에도 호출됩니다.

따라서 onAuthStateChanged를 사용하면 로그인 상태의 변화를 쉽게 감지하고, 
이에 따라 UI를 업데이트하거나 필요한 작업을 수행할 수 있습니다.

StreamBuilder 코드는 어디에 작성해야 하는데?

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

class AuthWidget extends StatelessWidget {
  const AuthWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.active) {
          final User? user = snapshot.data;

          if (user == null) {
            return LoginPage();
          } else {
            return HomePage(user: user);
          }
        }

        return const Scaffold(
          body: Center(
            child: CircularProgressIndicator(),
          ),
        );
      },
    );
  }
}

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () async {
            try {
              await FirebaseAuth.instance.signInAnonymously();
            } catch (e) {
              print(e);
            }
          },
          child: const Text('Sign in anonymously'),
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final User user;

  const HomePage({Key? key, required this.user}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome ${user.uid}!'),
            TextButton(
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
              },
              child: const Text('Sign out'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 AuthWidget 위젯에서 StreamBuilder를 사용하여 FirebaseAuth.instance.authStateChanges() 스트림을 구독하고, 스트림이 방출하는 User 객체를 snapshot 매개변수를 통해 받아와서 현재 인증 상태에 따라 다른 위젯을 반환하게 됩니다. 이렇게 하면 인증 상태 변경 이벤트를 구독하는 코드를 어디에서나 사용할 수 있게 됩니다.

 

main.dart에서 불러와도 되는거야?

 

네, StreamBuilder는 build 메서드 안에서 사용되므로, 일반적으로 main.dart 파일 내의 어떤 위젯에서든 사용할 수 있습니다. StreamBuilder를 사용할 때는 Stream을 먼저 설정하고, 해당 Stream에서 발생하는 이벤트를 수신하도록 StreamBuilder를 구성해야 합니다. 이때, StreamBuilder는 StatelessWidget 또는 StatefulWidget 중 어느 쪽에서든 사용할 수 있습니다. 단, StatelessWidget에서는 Stream을 변경할 수 없으므로, StatefulWidget을 사용해야 합니다.

 

Stream에 대해 잘 모르겠다.

모든 위젯에서 회원가입 상태가 변경되는것을 리슨해야하고, 로드할때 상태에 따라 다른 UI를 보여줘야 할 거라고 생각했는데, 그게 아닌가?

 

화면이 바뀔때마다 그냥 그때그때 확인하면 되는건가? 그 전에 생각했던 것처럼, 전역변수처럼 올려놓기만 하면 될까?