Riverpod AsyncNotifier re-fetches API after logout and causes 401

[akhil-ge0rge]

I'm very new to Riverpod and I'm implementing a login/logout flow using AsyncNotifier.
I fetch the user profile after login and show the username on the home screen.

The issue is:
When I logout, the profileDetailsProvider automatically rebuilds and calls the profile API again, which returns 401 because tokens are cleared.

I want to stop this API call after logout.

ProfileDetailsProvider

final profileDetailsProvider =
    AsyncNotifierProvider<ProfileDetailsNotifier, ProfileDetails?>(
      ProfileDetailsNotifier.new,
    );

class ProfileDetailsNotifier extends AsyncNotifier<ProfileDetails?> {
  @override
  Future<ProfileDetails?> build() async {
    state = const AsyncLoading();
    final repo = ref.read(profileRepoProvider);
    try {
      return await repo.fetchProfileDetails();
    } catch (e, s) {
      log("Profile Error : $e", stackTrace: s);
      state = AsyncError(e, s);
      return null;
    }
  }

  Future<void> refresh() async {
    state = const AsyncLoading();

    state = await AsyncValue.guard(() async {
      final repo = ref.read(profileRepoProvider);
      return await repo.fetchProfileDetails();
    });
  }
}

Logout Widget

class LogoutWidget extends ConsumerWidget {
  const LogoutWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final textTheme = TextTheme.of(context);
    final logoutState = ref.watch(loginControllerProvider);

    final isLoading = logoutState.isLoading;

    return GestureDetector(
      onTap: isLoading
          ? null
          : () async {
              await ref.read(loginControllerProvider.notifier).logout();
              if (context.mounted) {
                context.go(RouteNames.authScreen);
              }
            },
      child: Container(
        width: double.maxFinite,
        alignment: Alignment.center,
        height: 27.sp,
        margin: const EdgeInsets.symmetric(horizontal: 20),
        decoration: ShapeDecoration(
          color: const Color(0xffE9F3F3),
          shape: RoundedSuperellipseBorder(
            borderRadius: BorderRadius.circular(12),
          ),
        ),
        child: isLoading
            ? const CircularProgressIndicator()
            : Text(
                "Logout",
                style: textTheme.labelMedium?.copyWith(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold,
                  color: AppColors.secondaryColor,
                ),
              ),
      ),
    );
  }
}

App Bar

class AppBarWidget extends ConsumerWidget {
  const AppBarWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final profileState = ref.watch(profileDetailsProvider);
    final homeNotifier = ref.read(homeControllerProvider.notifier);

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        profileState.when(
          data: (data) {
            if (data == null) {
              return const _ProfileAvatarAndNameErrorWidget();
            }
            return _ProfileAvatarAndNameWidget(details: data);
          },
          error: (_, __) => const _ProfileAvatarAndNameErrorWidget(),
          loading: () => const ProfileAvatarNameSkeletonizer(),
        ),

        Row(
          spacing: 10,
          children: [
            GestureDetector(
              onTap: () {
                homeNotifier.showDrawer();
              },
              child: const AppbarIcon(svgIcon: AppSvg.hamburger, size: 15),
            ),
            GestureDetector(
              onTap: () async {
                ref.read(profileDetailsProvider.notifier).refresh();
              },
              child: const AppbarIcon(svgIcon: AppSvg.notification, size: 18),
            ),
          ],
        ),
      ],
    );
  }
}

AuthStateProvider

final authStateProvider = AsyncNotifierProvider<AuthStateNotifier, bool>(
  AuthStateNotifier.new,
);

class AuthStateNotifier extends AsyncNotifier<bool> {
  @override
  Future<bool> build() async {
    final storage = ref.read(localStorageProvider);

    final token = await storage.readValue(AppConstant.ACCESS_TOKEN);
    final refresh = await storage.readValue(AppConstant.REFRESH_TOKEN);

    return token != null && refresh != null;
  }
}

LoginController

final loginControllerProvider = AsyncNotifierProvider<LoginController, bool>(
  LoginController.new,
);

class LoginController extends AsyncNotifier<bool> {
  late AuthRepo _repo;
  late LocalStorage _storage;

  @override
  Future<bool> build() async {
    _repo = ref.read(authRepoProvider);
    _storage = ref.read(localStorageProvider);

    final token = await _storage.readValue(AppConstant.ACCESS_TOKEN);
    final refresh = await _storage.readValue(AppConstant.REFRESH_TOKEN);

    return token != null && refresh != null;
  }

  Future<void> login({
    required String userName,
    required String password,
  }) async {
    try {
      state = const AsyncLoading();

      final res = await _repo.login(userName: userName, password: password);
      final accessToken = res.accessToken;
      final refreshToken = res.refreshToken;

      if (accessToken == null || refreshToken == null) {
        throw Exception("Something Went Wrong");
      }

      await _storage.setValue(AppConstant.ACCESS_TOKEN, accessToken);
      await _storage.setValue(AppConstant.REFRESH_TOKEN, refreshToken);

      ref.invalidate(authStateProvider);

      state = const AsyncData(true);
    } catch (e, s) {
      state = AsyncError(e, s);
    }
  }

  Future<void> logout() async {
    try {
      state = const AsyncLoading();

      await _repo.logout();
      final sessionController = ref.read(sessionControllerProvider);
      await sessionController.logout();

      ref.invalidate(profileDetailsProvider);
      ref.invalidate(assignedVehicleProvider);
      ref.invalidate(homeControllerProvider);
      ref.invalidate(authStateProvider);

      state = const AsyncData(true);
    } catch (e, s) {
      state = AsyncError(e, s);
    } finally {
      state = const AsyncData(true);
    }
  }
}

Dio Interceptor

class DioInterceptor extends Interceptor {
  final Ref ref;
  DioInterceptor(this.ref);

  @override
  Future<void> onResponse(
    Response response,
    ResponseInterceptorHandler handler,
  ) async {
    final localStorage = ref.read(localStorageProvider);

    final newAccessToken = response.headers.value("x-access-token");
    final newRefreshToken = response.headers.value("x-refresh-token");

    if (newAccessToken != null && newAccessToken.isNotEmpty) {
      await localStorage.setValue(AppConstant.ACCESS_TOKEN, newAccessToken);
    }

    if (newRefreshToken != null && newRefreshToken.isNotEmpty) {
      await localStorage.setValue(AppConstant.REFRESH_TOKEN, newRefreshToken);
    }

    super.onResponse(response, handler);
  }

  @override
  Future<void> onRequest(
    RequestOptions options,
    RequestInterceptorHandler handler,
  ) async {
    options.headers.addAll({
      "Content-Type": "application/json",
      "Accept": "*/*",
    });

    final localStorage = ref.read(localStorageProvider);

    final accessToken =
        await localStorage.readValue(AppConstant.ACCESS_TOKEN);
    final refreshToken =
        await localStorage.readValue(AppConstant.REFRESH_TOKEN);

    if (accessToken != null) {
      options.headers.addAll({"Authorization": "Bearer $accessToken"});
    }
    if (refreshToken != null) {
      options.headers["x-refresh-token"] = refreshToken;
    }

    handler.next(options);
  }

  @override
  void onError(DioException err, ErrorInterceptorHandler handler) async {
    if ((err.response?.statusCode == 401 || err.response?.statusCode == 403)) {
      AppUtils().sessionExpiredDialog(ref);
    }
    handler.reject(err);
  }
}

Session Controller

final sessionControllerProvider = Provider<SessionController>((ref) {
  return SessionController(ref);
});

class SessionController {
  final Ref ref;
  late final LocalStorage _localStorage;

  SessionController(this.ref) {
    _localStorage = ref.read(localStorageProvider);
  }

  bool isLogin = false;

  Future<void> login(String accessToken, String refreshToken) async {
    await _localStorage.setValue(AppConstant.ACCESS_TOKEN, accessToken);
    await _localStorage.setValue(AppConstant.REFRESH_TOKEN, refreshToken);
    isLogin = true;
  }

  Future<void> logout() async {
    await _localStorage.clearAllValue();
    isLogin = false;
  }
}

Router

final routerProvider = Provider<GoRouter>(
  (ref) => GoRouter(
    navigatorKey: rootNavigatorKey,
    initialLocation: RouteNames.authScreen,

    redirect: (context, state) {
      final authState = ref.watch(authStateProvider);

      // Loading, do nothing
      if (authState.isLoading) return null;

      final loggedIn = authState.value ?? false;
      final isAuthRoute = state.uri.toString() == RouteNames.authScreen;

      if (!loggedIn && !isAuthRoute) {
        return RouteNames.authScreen;
      }

      if (loggedIn && isAuthRoute) {
        return RouteNames.homeScreen;
      }

      return null;
    },
    routes: [
      GoRoute(
        path: RouteNames.authScreen,
        builder: (context, state) => const AuthScreen(),
      ),
      GoRoute(
        path: RouteNames.qrcodeScanner,
        builder: (context, state) => const QrcodeScanner(),
      ),
      GoRoute(
        path: RouteNames.cameraScreen,
        builder: (context, state) => const CameraScreen(),
      ),
      StatefulShellRoute.indexedStack(
        builder: (context, state, shell) =>
            CustomBottomNavigationBar(shell: shell),
        branches: [
          // Home Branch
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: RouteNames.homeScreen,
                builder: (context, state) => const HomeScreen(),
              ),
              GoRoute(
                path: RouteNames.maintenanceScreen,
                builder: (context, state) => const MaintananceScreen(),
              ),
              GoRoute(
                path: RouteNames.profileScreen,
                builder: (context, state) => const ProfileScreen(),
              ),
              GoRoute(
                path: RouteNames.documentsScreen,
                builder: (context, state) => const DocumentsScreen(),
              ),
              GoRoute(
                path: RouteNames.paymentCollectionScreen,
                builder: (context, state) => const PaymentCollectionScreen(),
              ),
            ],
          ),
          // Jobs Branch
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: RouteNames.jobsScreen,
                builder: (context, state) => const JobScreen(),
              ),
              GoRoute(
                path: RouteNames.jobDetailsScreen,
                builder: (context, state) => const JobDetailsScreen(),
              ),
            ],
          ),
          // Chat Branch
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: RouteNames.chatScreen,
                builder: (context, state) => const ChatScreen(),
              ),
            ],
          ),
          // Wallet Branch
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: RouteNames.expenseScreen,
                builder: (context, state) => const ExpenseScreen(),
              ),
            ],
          ),
        ],
      ),
    ],
  ),
);

final GlobalKey<NavigatorState> rootNavigatorKey = GlobalKey<NavigatorState>();

Problem

When I log out:

• Tokens get cleared
• ref.invalidate(profileDetailsProvider) is called
• But since the Home screen is still mounted and watching
  profileDetailsProvider, Riverpod rebuilds it immediately
• This triggers build() again -> calls profile API -> returns 401

So the profile is fetched even after logout, which I want to avoid.

and Instead of calling ref.invalidate(profileDetailsProvider); in logout, try calling the clean method, which will look like this:

class ProfileDetailsNotifier extends AsyncNotifier<ProfileDetails?> {
  @override
  Future<ProfileDetails?> build() async {
    // ...
  }

  Future<void> refresh() async {
    // ...
  }

  Future<void> clean() async {
    state = const AsyncData(null);
  }
}

After making this change, the logout works without calling the API, but when I log in again, the API doesn’t get called.