[flutter] 플러터 Riverpod를 사용하여 앱의 유저 인증을 구현하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

Riverpod란?

Riverpod는 플러터에서 상태 관리를 위한 라이브러리 중 하나로, Provider 패턴을 사용하여 앱의 상태와 데이터를 관리하는 데 도움을 줍니다. Riverpod는 Flutter의 공식 상태 관리 라이브러리인 Provider의 개선 버전으로, 간단한 코드 구조와 여러 가지 편리한 기능을 제공합니다.

단계별 구현 방법

다음은 Riverpod를 사용하여 플러터 앱에서 유저 인증을 구현하는 단계별 방법입니다.

단계 1: Riverpod 설치

먼저, pubspec.yaml 파일에 Riverpod를 추가해야 합니다. 다음 코드를 pubspec.yaml 파일의 dependencies 섹션에 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

그런 다음 터미널에서 flutter pub get 명령을 실행하여 Riverpod를 다운로드 및 설치합니다.

단계 2: 프로바이더와 상태 생성

다음으로, 유저 인증과 관련된 상태와 함수를 관리하기 위한 프로바이더(Provider)와 상태(State)를 생성합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final authProvider = ChangeNotifierProvider<AuthProvider>((ref) => AuthProvider());

class AuthProvider with ChangeNotifier {
  bool isAuthenticated = false;

  Future<bool> login(String username, String password) async {
    // 유저 로그인 처리 로직 구현
    isAuthenticated = true;
    return true;
  }

  void logout() {
    // 유저 로그아웃 처리 로직 구현
    isAuthenticated = false;
    notifyListeners();
  }
}

위의 코드에서는 AuthProvider 클래스가 ChangeNotifier를 상속하고 있으며, isAuthenticated라는 상태 변수와 login() 및 logout()라는 인증 관련 함수를 정의하고 있습니다.

단계 3: 프로바이더 사용

이제 위에서 생성한 authProvider를 사용하여 유저 인증과 관련된 UI를 작성할 수 있습니다. 예를 들어, 로그인 화면을 구현하는 코드는 다음과 같습니다:

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

class LoginPage extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final auth = context.read(authProvider);

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: "Username"),
            ),
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(labelText: "Password"),
            ),
            ElevatedButton(
              onPressed: () async {
                final username = _usernameController.text;
                final password = _passwordController.text;
                final success = await auth.login(username, password);
                if (success) {
                  Navigator.pushReplacementNamed(context, '/home');
                } else {
                  // 로그인 실패 처리
                }
              },
              child: Text("Login"),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 context.read(authProvider)를 사용하여 AuthProvider의 인스턴스를 가져와 로그인 처리를 수행합니다. 성공적으로 로그인이 완료되면 홈 화면으로 이동하도록 코드를 작성했습니다.

이와 같은 방법으로 Riverpod를 사용하여 플러터 앱에서 유저 인증을 구현할 수 있습니다. Riverpod를 통해 상태 관리를 하면 간편하게 상태를 업데이트하고 UI를 업데이트할 수 있습니다.

더 많은 Riverpod 관련 자세한 내용은 공식 문서를 참고하세요.