[flutter] #2 firebase - Listen Auth State Change

giyeon·2021년 5월 3일
0

flutter-firebase

목록 보기
2/10
post-thumbnail

#이 포스팅은 플린이의 입장에서 쓰여진 글입니다. 코드 지적은 언제나 환영입니다. 🙆🏻‍♂️

'이 프로젝트는 'Youtube The net ninja'의 flutter firebase tutorial 강의를 참고했습니다.'


Auth State

사용자가 로그인 상태인지, 로그인상태가 아닌지, 로그아웃 상태인지 알아내야 각각 다른 Screen을 보여줄 수 있겠죠?

Login 상태 : HomeScreen
Login 전, Logout 상태 : AuthenticateScreen

이 것 도 firebase에서 아주 친절하게 authStateChanges()라는 method가 이미 만들어져 있어요.
그냥 가져다 쓰면 돼요!

1. userState method

AuthService.dart Auth class로 가볼게요.

_userFromFirebaseUser() method는 User객체의 user속성을 받아왔었죠!
받아오지 못한다면 즉, 사용자가 로그인상태가 아니거나 로그아웃 상태라면 user속성은 null이 되고, null을 return해요.

  UserModel _userFromFirebaseUser(User user) {
    return user != null ? UserModel(uid: user.uid) : null;
  }

_userFromFirebaseUser() method 를 이용해서 method를 만들어볼게요.

method는 그 안에 미리 만들어두었던 FirebaseAuth.instace인 _auth로 불러와요.
authStateChanges() 의 반환값은 Stream<`User>이지만, map()을통해 미리 만들어둔 _userFromFirebaseUser()를 이용해요.

 Stream<UserModel> get userState {
   print('trigger user getter...');
   return _auth.authStateChanges().map(_userFromFirebaseUser);
 }

2. StreamProvider

userState function은 Stream이라 값이 계속 변할 수 있어요.
값이 변하는것을 widget tree 최상단 쪽에 있는 MaterialApp이 알게 할거에요.

MaterialApp을 StreamProvider로 감싸줘요.

main.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  
  Widget build(BuildContext context) {
    return StreamProvider<UserModel>.value(
      value: AuthService().userState,
      initialData: null,
      child: MaterialApp(
        home: Wrapper(),
      ),
    );
  }
}

StreamProvider create는 에러가 나더라구요..

value속성을 아까 만들었던 userState method로 설정해요.
method가 반환하는 값이 변경되면 MaterialApp이 바로 알아챌 수 있어요.

warpper.dart

//Wrapper listens for auth changes
class Wrapper extends StatelessWidget {
  
  Widget build(BuildContext context) {
  
    final providerUserModel = Provider.of<UserModel>(context);

    //return either Home or Authenticate widget
    if (providerUserModel == null) {
      return Authenticate();
    } else {
      return Home();
    }
  }
}

Wrapper class 에서 UserModel이 null인지 아닌지를 알고,
각각의 상황에 맞게 Screen을 보여줘요.

끄읏.

profile
Web , App developer wannabe 🧑🏻‍💻

1개의 댓글

comment-user-thumbnail
2021년 11월 27일
return _auth.authStateChanges().map(_userFromFirebaseUser); 여기서 맵핑을 해줘도 userFromFirebaseUser 함수를 호출 하는데 인자값을 계속 요구하는데 어떻게 해결하나요 ㅜ
답글 달기