플러터에서 Firebase SDK를 사용하여 로그인 상태 처리

이전 포스팅에서는 플러터에서 Firebase SDK를 사용하여

 

Email을 사용한 회원가입, 로그인 방법에대해 알아봤습니다.

 

플러터에서 Firebase SDK를 사용해서 로그인 인증하기

 

이번 포스팅에서는 로그인이 되었을 때 그 이후의 처리와 로그아웃 방법에 대해 알아보겠습니다.

---

Firebase SDK로 로그인 이후 상태 처리하기

로그인 상태 변화를 사용하여 로그인 성공 유무를 알 수 있습니다.

 

여기서 로그인 상태 변화는 Stream을 사용하여 알 수 있습니다.

 

Stream을 사용하기 때문에 StreamBuilder를 사용하면 로그인 성공에 따른 화면 전환을 쉽게 할 수 있습니다.

 

StreamBuilder는 다음과 같이 사용할 수 있습니다.

 

StreamBuilder(
	// FirebaseAuth.instance.authStateChanges()는 Stream을 반환한다.
    stream: FirebaseAuth.instance.authStateChanges(),
    builder: (ctx, snapshot) {
      // snapshot.hasData가 true라는 것은 로그인에 성공했다는 의미이다.
      if (snapshot.hasData) {
        // 현재 로그인 상태일 때
        return const ChatScreen();
      } else {
      	// 현재 로그인 상태가 아닐 때
        return const MessengerAuthScreen();
      }
    },
)

 

Firebase Auth SDK와 StreamBuilder를 같이 사용하면 다음과 같은 이점이 있습니다.

 

먼저 Firebase SDK를 사용하면 Auth를 진행하면

 

로그인 성공 시 받은 토큰을 자동으로 기기 내부에 저장합니다.

 

그렇기 때문에 한 번 로그인 한 이후로는 자동으로 로그인 처리가 됩니다.

 

StreamBuilder에서는 해당 로그인 상태를 확인하기 때문에

 

자동으로 로그인 이후 화면으로 전환을 해주는 역할을 합니다.

 

즉,

• Firesbase SDK가 로그인 토큰을 자동으로 기기에 저장
• SteramBuilder가 자동으로 로그인 이후 화면으로 전환

Firebase SDK가 로그인 토큰을 자동으로 기기에 저장해주고 관리해주기 때문에

 

User는 앱을 켜기만 해도 이전에 로그인에 사용한 토큰(Tokken) 정보가 남아있다면

 

자동으로 로그인 처리가 되는 것입니다.

 

---

FutureBuilder와 StreamBuilder의 차이점

StreamBuilder는 이전 포스팅에서 알려드린 FutureBuilder와 비슷한 느낌이 나는데요

 

플러터 기초 - FutureBuilder를 사용한 비동기 작업 수행

 

차이점이 무엇인지 알려드리겠습니다.

 

FutureBuilder의 경우 미래에 도착한 값을 딱 한 반만 받아서 해당 데이터를 바탕으로 UI를 갱신하는 Builder입니다.

 

반면 StreamBuilder의 경우 특정 값의 상태가 변경될 때 마다 UI를 업데이트하는 Builder입니다.

 

즉, FutureBuilder는 딱 한 번만 UI를 갱신하지만, StreamBuilder는 값이 변할 때 마다 UI를 변경한다는 점이 가장 큰 차이입니다.

---

Firebase 로그인 로딩 처리

위에서 snapshot을 통해 로그인 토큰이 있는지 없는지 확인할 수 있었는데요.

 

snapshot을 사용하여 현재 상태가 Loading 인지 아닌지도 확인할 수 있습니다.

 

이를 통해 Firebase Auth의 로딩 처리를 할 수 있습니다.

 

StreamBuilder(
  stream: FirebaseAuth.instance.authStateChanges(),
  builder: (ctx, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting){
      // Auth 처리가 현재 진행중
      return const AuthLoadingScreen();
    } else if (snapshot.hasData) {
      // 로그인 완료 상태
      return const ChatScreen();
    } else {
      // 로그인 되지 않은 상태
      return const MessengerAuthScreen();
    }
  },
)

 

---

Firebase SDK를 사용하여 로그아웃 하기

로그아웃 시 프로세스는 다음과 같습니다.

 

1. 로그아웃 버튼을 누른다
2. Firebase SDK를 사용하여 로그아웃 처리를 한다.
3. 로그아웃이 완료되면 로그인 화면으로 이동한다.

 

먼저 로그인 완료 시 보여주는 화면의 AppBar에 로그아웃 버튼을 추가합니다.

 

 

 

그리고 해당 버튼을 눌렀을 때의 처리는 다음과 같이 합니다.

 

Scaffold(
  appBar: AppBar(
    title: const Text("Chat Example"),
    actions: [
      IconButton(
          onPressed: () {
            FirebaseAuth.instance.signOut();
          },
          icon: Icon(
            Icons.exit_to_app,
            color: Theme.of(context).colorScheme.primary,
          ))
    ],
  ),
  body: const Center(
    child: Text("Logged in!"),
  ),
);

 

위에서 처리한 로그인 상태에 따른 화면 표시 처리가 있기 때문에

 

StreamBuilder(
  stream: FirebaseAuth.instance.authStateChanges(),
  builder: (ctx, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting){
      // Auth 처리가 현재 진행중
      return const AuthLoadingScreen();
    } else if (snapshot.hasData) {
      // 로그인 완료 상태
      return const ChatScreen();
    } else {
      // 로그인 되지 않은 상태
      return const MessengerAuthScreen();
    }
  },
)

 

다음과 같이 로그인 화면을 출력해줍니다.