이제 fierbase를 이용해서 로그인을 간단히 구현해보자.
관련 내용은 firebase 공식 사이트에 들어가면 된다.
https://firebase.google.com/docs/auth/flutter/custom-auth
그런데 문제점이, 문서 양이 많고 내용을 찾기 쉽지 않다는 것이다.
그럴때 이용할 수 있는 것이 바로 FlutterFire이다.
여기서 FlutterFire Ui, FlutterFire auth를 보면 필요한 플러그인을 설치할 수 있다.
우리는 이제 main 창에 로그인 창을 먼저 띄울 것이므로, main에 home: AuthGate()를 연결해준다.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
class AuthGate extends StatelessWidget {
const AuthGate({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return StreamBuilder<User?>(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
// ...
},
);
}
}복잡한 기능의 경우 method로 따로 빼는 것이 좋다고 하였다.
앞의 home에서 return해준 AuthGate()를 구현할 것이다.
구현 순서는 문서에서 제시한 방식을 따라간다.
하나하나 설명하면 다음과 같다.
- FirebaseAuth.instance. : firebase를 통해서 인증을 수행한 객체가 있다면 그에 대한 정보를 얻을 수 있다.
- authStateChanges() : 로그인 되었는지 아닌지 상태가 변할때마다 알려준다.
- StreamBuilder<User?> : stream 데이터를 기반으로 ui로 변경을 해주는 위젯이다
- snapshot : 내부에는 usaer에 대한 정보가 있다. 이 user는 firebase에서 로그인한 객체이다.
class AuthGate extends StatelessWidget {
const AuthGate({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return StreamBuilder<User?>(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const SignInScreen(
providerConfigs: []
);
}
// Render your application if authenticated
return const TabPage();
},
);
}
}다음은 hasData를 통헤 snapshot이 데이터를 가지고 있는지 아닌지를 체크한다.
가지고 있지 않다면 return을 통해 로그인 화면으로 이동하도록 구성해야 한다.
이미 객체가 있다면 TabPage();로 이동하도록 한다.
이제 email, 비밀번호로 로그인 하기 위한 설멍을 헤야한다.
console.firebase.google.com 을 통해 콘솔로 들어가주자.
Authentication에서 다음과 같이 로그인 제공 업체를 설정해주면 된다.
📌error 발생
실행하는 와중에 다음과 같은 에러가 발생했다.
이 에러 같은 경우는 buildscript에서 해결해야 하는데, 중요한건 flutter 버전이 올라가면서 build.gradle에서는 buildscript를 찾을 수 없게 되었다는 것이다!
아무리 찾아봐도 없다..
마침 stackoverflow에 나와 같은 문제를 겪고 있는분이 있어서 이걸 참고했다.
https://stackoverflow.com/questions/78020137/i-cant-found-buildscript-in-build-gradle
이래도 안 된다. 오류 메세지를 좀 더 자세히 보고 인프런을 찹고했다.
실행 과정에 이상한 빨간 글씨들이 떴지만..원래 뜨는거라고 하니 깔끔하게 무시해준다.
로그인 화면을 띄우는 것에 성공했다!
⭐이 방법은 비공식적인 방법이래서 그다지 추천하지 않는다.
공식적인 방법은 모든 라이브러리를 최신 라이브러리로 교체하는 것이라고 한다.
아래 사이트를 참고하여 나눠진 세 가지 라이브러리를 최신 버전으로 사용하면 해결이 된다고 한다. 난 일단 나중에 시도해봐야지
https://pub.dev/packages/flutterfire_ui
실제 이메일을 입력해야 나중에 비번을 찾을 수 있으므로, 실제 입력을 해두고 로그인을 해본다.
성공적으로 우리가 구현했던 화면이 뜨는 것을 볼 수 있다
authentication -> password auth에 들어가면 로그아웃을 구현하는 방법이 나와있다.
import 'package:firebase_auth/firebase_auth.dart';
class AccountModel{
void logout() async{
await FirebaseAuth.instance.signOut();
}
}다음과 같이 AccountModel이라는 새로운 클래스를 생성해서 로그아웃 절차를 구현한다.
Widget build(BuildContext context) {
final model = AccountModel();
return Scaffold(
appBar: AppBar(
title: const Text('Instargram Clone'),
actions: [
IconButton(
onPressed: () { //로그아웃
model.logout();
},
icon: const Icon(Icons.exit_to_app),
),
],
),
body: Padding(account에 있던 로그아웃 버튼에 해당 내용을 구현했다.
성공적으로 로그아웃이 된 것을 볼 수 있다.
