CODEWITHSUNDEEP
fluttersupabasesupabase-flutter
liquardo
liquardo

Reputation: 103

Optimal way to retain user session on Flutter Web and Supabase

I'm creating a web-app with Flutter and using Supabase to handle authentication.

However, when I close the browser, my logged in session is not persistent when I start the app up again. (Logging in works fine and remains as long as I don't close the browser)

I read from the supabase_flutter package that it uses Hive by default to persist the user session.

Does that only work on mobile or is there something else I should be considering when trying to retain a logged in session on Flutter Web?

This is my code that is ran when the app starts in a home screen initState after initializing Supabase (and the code redirects me to 'login' since the session is null when starting the app every time)

/// Load auth session
Future.wait([
  SupabaseAuth.instance.initialSession,
  Future.delayed(
    const Duration(milliseconds: 2000), // Animation
  ),
]).then((responseList) {
  final session = responseList.first as Session?;
  session != null ? context.goNamed('watch') : context.goNamed('login');
}).catchError((_) {
   debugPrint('Initial session loading failed!');
});

I've seen some posts online talking about using shared_preferences but I think that was only intended for mobile builds and before Hive was implemented (also that it's not secure enough for this kind of task).

EDIT:

This is how I initialize Supabase in my main.dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'https://<placeholder>.supabase.co',
    anonKey: <placeholder>,
  );
  debugPrint("App initialized");
  runApp(MyApp());
}

I use GoRouter for navigation and set a home.dart as my initial 'splash screen' to navigate to either a 'watch' page or 'login' page depending on if the session is null:

 Future<void> _redirect() async {
    await Future.delayed(Duration.zero);
    if (!mounted) {
      return;
    }

    final session = supabase.auth.currentSession;
    if (session != null) {
      context.goNamed('watch');
    } else {
      debugPrint("Session was NULL");
      context.goNamed('login');
    }
  }

And indeed if I login and enter the root URL in the address bar or refresh the browser, I get redirected to the 'watch' page as intended. However if I close the browser and restart the debug session, I get redirected to the login page and receive the "Session was NULL" debug print.

Upvotes: 0

Views: 2137

Answers (1)

dshukertjr
dshukertjr

Reputation: 18680

supabase_flutter should persist your session on Flutter web without any special configuration.

No need to use SupabaseAuth.initialSession now. You can just use the currentSession to reliably see if the user is signed in or not.

final Session? session = Supabase.instance.client.auth.currentSession;
if(session == null) {
  // not signed in
} else {
  // signed in
}

If this does not work for you, there might be something weird going on with either where you call Supabase.initialize() or the sign in code. If you could share them, we would be able to further assist you.

Upvotes: 2

Related Questions