13. provider 수정 / 세션유지

소요시간

2025년 2월 11일 - 3시간

2025년 2월 12일 - 5시간

 

 

느낀점

 

로그인을 했을때 뒤로가기를 누르니까 계속 어플이 꺼졌다.

보통 어플은 로그인했을때 세션이 유지가 되어야되는데 계속 세션이 유지가 안되길래 방법을 찾다가 

로그인 상태 유지하는 방법을 시도하고 성공하여 기분이 좋았다.

 

 

 

 

 

로그인 프로바이더 추가

ChangeNotifierProvider(create: (_) => AuthProvider()),
// 로그인 상태 추가

 

class AuthProvider with ChangeNotifier {
  Stream<AuthState>? _authStateStream;
  Session? _session;

  AuthProvider() {
    _session = Supabase.instance.client.auth.currentSession;
    _authStateStream = Supabase.instance.client.auth.onAuthStateChange;

    _authStateStream?.listen((data) {
      _session = data.session;
      notifyListeners(); // 로그인/로그아웃 상태 변경 감지
    });
  }

  Session? get session => _session;

  bool get isLoggedIn => _session != null;

  Future<void> signOut() async {
    await Supabase.instance.client.auth.signOut();
    notifyListeners();
  }
}

 

session 현재 사용자 세션을 저장하는 변수입니다.

_authStateStream?.listen((data) {...}): 인증 상태가 변경될 때마다 호출되는 리스너를 설정합니다. 

사용자가 로그인하거나 로그아웃할 때 이 리스너가 호출되어 _session 변수를 업데이트하고, notifyListeners()를 호출하여 상태 변경을 알립니다.

 

 

 

로그인 여부에 따라서 화면전환을 구현하였습니다.

 

로그인 되어있다면 홈화면으로 로그인되어있지 않으면 로그인 첫화면으로.

 

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    initScreenUtil(context); // 디자인 사이즈 기준

    return Consumer<AuthProvider>(
      builder: (context, authProvider, child) {
        return MaterialApp(
          home: authProvider.isLoggedIn ? Home_screen() : login_total_screen(), // 로그인 여부에 따라 화면 전환
          navigatorObservers: [AuthObserver()], // AuthObserver 추가
        );
      },
    );
  }
}

 

근데 여기서 문제가 

Flutter 애플리케이션을 개발하면서 인증 세션을 관리하는 방법에 대해 고민하게 되었습니다. 

특히, 여러 화면 간에 세션을 어떻게 전달할지에 대한 문제를 겪었습니다.

 

문제 상황
1번 화면에서 2번 화면으로 사용자 세션을 전달해야 했습니다. 처음에는 2번 화면과 연결된 모든 화면에 세션을 넣어야 한다고 생각했습니다. 하지만, 실제로는 1번 화면과 2번 화면만 세션을 유지하면 나머지 화면에서도 세션을 사용할 수 있다는 것을 알게 되었습니다.

 

이 방법이 최선인지 확신할 수는 없지만, 현재로서는 임시 방편으로 이렇게 구현할 계획입니다. 

 

또한 기존에 홈화면에서 있던 

멀티 프로바이더를 로그인 화면으로 옮겼습니다. 근데 

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => NaverMapProvider()),
    // 네이버 지도 상태
    ChangeNotifierProvider(create: (context) => SettingState()),
    // 바텀바 상태
    ChangeNotifierProvider(create: (context) => DataProvider()),
    // 디비 설정 상태
    ChangeNotifierProvider(create: (_) => MapProvider()),
    // 검색 상태
    ChangeNotifierProvider(create: (_) => AuthProvider()),
    // 로그인 상태 추가

  ],
  child: MyApp(),
),

 

 Provider를 사용하여 SettingState를 제공하고 있지만, 특정 위젯에서 Provider를 찾을 수 없기 때문에 문제가 발생하였다

Provider를 옮길때는 주의가 필요하다는 걸 깨달았다. 

 

결과

 

앞서 말했듯이 이제 로그인화면에서 로그인을 했을때 세션관리가됨

한마디로 로그인해서 나가면 로그인상태유지 (로그아웃전까지)

 

+ ui제작 (정보입력 , 이메일 화면 )

 

+ Provider정리