플러터와 파이어베이스로 자동 로그인 구현하기

플러터 앱에서 파이어베이스 Authentication을 사용하여 자동 로그인 기능을 구현하는 방법을 알아보겠습니다.

 

1. 준비 단계

먼저, 프로젝트에 필요한 의존성을 추가해야 합니다. pubspec.yaml 파일에 다음 라인을 추가하세요

dependencies:
  firebase_core: ^latest_version
  firebase_auth: ^latest_version
  shared_preferences: ^latest_version

 

2. 파이어베이스 초기화

main.dart 파일에서 파이어베이스를 초기화합니다

import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

 

3. 사용자 로그인 상태 관리

사용자의 로그인 상태를 저장하고 불러오기 위해 SharedPreferences를 사용합니다

import 'package:shared_preferences/shared_preferences.dart';

class AuthService {
  static Future<void> setLoggedIn(bool value) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool('isLoggedIn', value);
  }

  static Future<bool> isLoggedIn() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getBool('isLoggedIn') ?? false;
  }
}

 

4. 로그인 로직 구현

사용자 로그인 시 상태를 저장하고, 로그아웃 시 상태를 제거합니다

import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  static final FirebaseAuth _auth = FirebaseAuth.instance;

  static Future<User?> signIn(String email, String password) async {
    try {
      UserCredential result = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      User? user = result.user;
      if (user != null) {
        await setLoggedIn(true);
      }
      return user;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

  static Future<void> signOut() async {
    await _auth.signOut();
    await setLoggedIn(false);
  }
}

 

5. 자동 로그인 구현

앱 시작 시 로그인 상태를 확인하고, 로그인되어 있다면 홈 화면으로 이동합니다

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    checkLoginStatus();
  }

  void checkLoginStatus() async {
    bool isLoggedIn = await AuthService.isLoggedIn();
    if (isLoggedIn) {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => LoginScreen()),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

이렇게 구현하면, 사용자가 한 번 로그인한 후에는 앱을 다시 실행할 때마다 자동으로 로그인됩니다.

 

전체적인 코드에 대해 설명을 드리겠습니다.

 

1. 준비 단계: pubspec.yaml 파일에 추가한 의존성들의 역할은 다음과 같습니다:

• firebase_core: 파이어베이스의 기본 기능을 초기화하고 사용하기 위한 패키지입니다.
• firebase_auth: 파이어베이스의 인증 서비스를 사용하기 위한 패키지입니다.
• shared_preferences: 간단한 데이터를 로컬에 저장하기 위한 패키지로, 여기서는 로그인 상태를 저장하는 데 사용합니다.

1. 파이어베이스 초기화: main() 함수에서 WidgetsFlutterBinding.ensureInitialized()를 호출하는 이유는 Flutter 엔진과 위젯 바인딩을 초기화하기 위해서입니다. Firebase.initializeApp()은 파이어베이스를 초기화합니다.
2. 사용자 로그인 상태 관리: AuthService 클래스의 setLoggedIn() 메서드는 로그인 상태를 저장하고, isLoggedIn() 메서드는 저장된 로그인 상태를 확인합니다. SharedPreferences를 사용하여 이 정보를 로컬에 저장합니다.
3. 로그인 로직 구현: signIn() 메서드에서는 파이어베이스의 signInWithEmailAndPassword() 메서드를 사용하여 사용자를 인증합니다. 성공적으로 로그인하면 로그인 상태를 true로 설정합니다. signOut() 메서드는 파이어베이스의 signOut() 메서드를 호출하고 로그인 상태를 false로 설정합니다.
4. 자동 로그인 구현: SplashScreen 위젯은 앱 시작 시 표시되는 화면입니다. initState() 메서드에서 checkLoginStatus()를 호출하여 로그인 상태를 확인합니다. checkLoginStatus() 메서드는 저장된 로그인 상태를 확인하고, 그에 따라 홈 화면 또는 로그인 화면으로 이동합니다.

이 구현의 핵심은 로그인 성공 시 로컬 저장소에 로그인 상태를 저장하고, 앱 시작 시 이 상태를 확인하여 자동으로 적절한 화면으로 이동하는 것입니다.

 

추가적인 개선 사항:

1. 토큰 관리: 보안을 강화하기 위해 액세스 토큰과 리프레시 토큰을 사용할 수 있습니다.
2. 에러 처리: 네트워크 오류나 인증 실패 등의 상황에 대한 더 자세한 에러 처리를 추가할 수 있습니다.
3. 상태 관리: Provider나 BLoC 같은 상태 관리 솔루션을 사용하여 앱 전체의 인증 상태를 더 효과적으로 관리할 수 있습니다.
4. 생체 인증: 지문이나 얼굴 인식 등의 생체 인증을 추가하여 보안을 강화할 수 있습니다.

 

주의사항

• 보안을 위해 자동 로그인 기능은 신중히 사용해야 합니다.
• 중요한 데이터를 다루는 앱의 경우, 주기적으로 재인증을 요구하는 것이 좋습니다.
• 사용자에게 로그아웃 옵션을 제공하여 언제든지 자동 로그인을 해제할 수 있도록 해야 합니다.

이상으로 플러터와 파이어베이스를 사용한 자동 로그인 구현 방법에 대해 알아보았습니다.

질문이나 추가 설명이 필요하시면 언제든 물어보세요!

 

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg