플러터에서 FirebaseAuth(로그인) 쉽게 구현하기

 

플러터(Flutter)는 구글이 만든 오픈 소스 프레임워크로, 안드로이드(Android)와 iOS 등 다양한 플랫폼에서 하나의 코드로 앱을 만들 수 있어 인기를 끌고 있습니다.

여기에 FirebaseAuth(파이어베이스 인증)를 결합하면, 매우 손쉽게 사용자 인증 기능을 구현할 수 있습니다. FirebaseAuth는 이메일/비밀번호, 소셜 로그인을 포함한 여러 인증 방법을 지원합니다.

 

이 블로그에서는 FirebaseAuth에 대한 기본 개념과 함께, 플러터에서 어떻게 FirebaseAuth를 설정하고 사용하는지 단계별로 설명합니다. 초보자도 쉽게 따라할 수 있도록 모든 코드를 포함하고, 각 단계의 역할을 구체적으로 설명합니다.

FirebaseAuth란?

FirebaseAuth(Firebase Authentication)는 사용자가 이메일, Google, Facebook, Apple 등의 소셜 로그인으로 앱에 접근할 수 있도록 해주는 인증 서비스입니다.

직접 인증 시스템을 만들지 않고도 Firebase를 통해 사용자 인증을 쉽게 구현할 수 있기 때문에, 특히 모바일 앱 개발에서 필수적인 기능입니다.

플러터에서 FirebaseAuth 사용하는 방법

1. Firebase 프로젝트 생성

먼저 Firebase 콘솔에서 프로젝트를 생성해야 합니다.

1. Firebase Console에 접속합니다.
2. "프로젝트 만들기"를 클릭하고, 프로젝트 이름을 입력합니다.
3. Google Analytics 설정은 필요에 따라 선택할 수 있습니다.
4. 프로젝트 생성이 완료되면 대시보드에서 iOS와 Android 앱을 각각 등록합니다.

2. Firebase 플러그인 추가

플러터 프로젝트에 Firebase를 연동하기 위해서 필요한 패키지를 추가합니다. pubspec.yaml 파일에 다음과 같이 Firebase 패키지를 추가합니다.

dependencies:
  firebase_core: latest_version
  firebase_auth: latest_version

firebase_core는 Firebase와 Flutter 간의 통신을 가능하게 해주고, firebase_auth는 Firebase 인증을 처리하는 역할을 합니다. 이후 아래 명령어를 실행해 패키지를 설치합니다.

flutter pub get

3. Firebase 초기화

플러터 앱이 실행될 때 Firebase가 초기화되어야 합니다. main.dart 파일에서 Firebase를 초기화하는 코드를 추가합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FirebaseAuth 예제")),
        body: Center(child: Text("Firebase 초기화 완료")),
      ),
    );
  }
}

위 코드는 앱이 실행되기 전에 Firebase를 초기화합니다. 이 코드는 모든 Firebase 기능을 사용하기 위한 필수 단계입니다.

4. FirebaseAuth 기본 사용법

이제 FirebaseAuth를 이용하여 사용자 등록(회원가입), 로그인, 로그아웃을 구현해 보겠습니다.

 

1) 이메일/비밀번호로 회원가입

import 'package:firebase_auth/firebase_auth.dart';

Future<User?> createUserWithEmailAndPassword(String email, String password) async {
  try {
    UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );
    return userCredential.user;
  } on FirebaseAuthException catch (e) {
    if (e.code == 'weak-password') {
      print('비밀번호가 너무 약합니다.');
    } else if (e.code == 'email-already-in-use') {
      print('이미 가입된 이메일입니다.');
    }
  } catch (e) {
    print(e);
  }
  return null;
}

위 코드는 사용자가 이메일과 비밀번호를 통해 회원가입을 할 수 있도록 합니다.

FirebaseAuthException을 통해 발생할 수 있는 오류를 처리할 수 있으며, 여기서는 비밀번호가 약하거나 이미 가입된 이메일일 경우 메시지를 출력하도록 설정했습니다.

 

2) 이메일/비밀번호로 로그인

Future<User?> signInWithEmailAndPassword(String email, String password) async {
  try {
    UserCredential userCredential = await FirebaseAuth.instance.signInWithEmailAndPassword(
      email: email,
      password: password,
    );
    return userCredential.user;
  } on FirebaseAuthException catch (e) {
    if (e.code == 'user-not-found') {
      print('등록된 사용자가 없습니다.');
    } else if (e.code == 'wrong-password') {
      print('비밀번호가 잘못되었습니다.');
    }
  } catch (e) {
    print(e);
  }
  return null;
}

이 코드는 사용자가 이메일과 비밀번호로 로그인할 수 있게 도와줍니다. 로그인이 성공하면 사용자 정보가 반환되며, 실패할 경우 오류 메시지를 출력합니다.

 

3) 로그아웃

로그아웃은 매우 간단합니다. FirebaseAuth의 signOut 메서드를 호출하면 됩니다.

Future<void> signOut() async {
  await FirebaseAuth.instance.signOut();
}

로그아웃이 호출되면 현재 로그인된 사용자가 로그아웃되며, 다시 로그인이 필요하게 됩니다.

FirebaseAuth와 플러터를 이용한 로그인 UI 구현

FirebaseAuth를 플러터 UI와 결합하여 실제로 로그인 화면을 만들어보겠습니다. 다음은 간단한 로그인 화면 예시입니다.

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

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future<void> _login() async {
    try {
      UserCredential userCredential = await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      print("로그인 성공: ${userCredential.user?.email}");
    } on FirebaseAuthException catch (e) {
      if (e.code == 'user-not-found') {
        print('등록된 사용자가 없습니다.');
      } else if (e.code == 'wrong-password') {
        print('비밀번호가 잘못되었습니다.');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("로그인 페이지")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: "이메일"),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: "비밀번호"),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: _login,
              child: Text("로그인"),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 이메일과 비밀번호를 입력받아 로그인하는 간단한 UI입니다.

TextField로 이메일과 비밀번호를 입력받고, 로그인 버튼을 누르면 _login 메서드가 실행됩니다.

성공적으로 로그인되면 사용자의 이메일을 출력합니다.

 

이 글에서는 플러터와 FirebaseAuth를 이용한 사용자 인증 시스템을 어떻게 설정하고, 사용하는지 설명했습니다.

FirebaseAuth는 복잡한 사용자 인증 시스템을 매우 간단하게 처리할 수 있게 해주는 강력한 도구입니다.

이메일/비밀번호 인증뿐만 아니라, Google, Facebook 등의 소셜 로그인도 쉽게 추가할 수 있으니, 이를 활용하여 다양한 사용자 인증 방법을 적용해 보세요.

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱