Auth0 Universal Login for Flutter Web Application - looping after successful login

Help
,
1

Hi there

Trying to get a Flutter web app integrated with Auth0 and I’ve largely followed the quickstart guide. I’d like to check for a valid session on page load, redirect for auth when it’s not valid and return to load the home view of the app. I am able to successfully redirect to authenticate and return with a token. There are no errors in the Auth0 logs, looks like the user was authenticated. But once landing on the page it just loads over and over again because it cannot ever load _credentials. I put a print statement to verify it’s always going into that block to redirect. Custom domain and app are both the same domain. My code is below - hoping for some tips on what I’ve done wrong here.

import 'package:auth0_flutter/auth0_flutter.dart';
import 'package:auth0_flutter/auth0_flutter_web.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:flutter_icons_null_safety/flutter_icons_null_safety.dart';

import '../packs/repository.dart';
import '../schemes/repository.dart';
import '../clauses/repository.dart';
import '../prompts/repository.dart';
import '../steps/repository.dart';

import '../packs/wall.dart';
import '../steps/rack.dart';
import '../prompts/wall.dart';
import '../schemes/wall.dart';
import '../clauses/wall.dart';

class HomeElement {
  final String name;
  final IconData icon;
  final Widget listing;

  HomeElement({required this.name, required this.icon, required this.listing});
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  Credentials? _credentials;

  late Auth0Web auth0;
  
  var selectedIndex = 0;
  
  final packs = GetIt.I.get<PackRepository>();
  final schemes = GetIt.I.get<SchemeRepository>();
  final clauses = GetIt.I.get<ClauseRepository>();
  final prompts = GetIt.I.get<PromptRepository>();
  final steps = GetIt.I.get<FlowStepRepository>();

  late final List<HomeElement> homeElements;

  @override
  void initState() {
    super.initState();
    auth0 = Auth0Web(dotenv.env['WISP_AUTH0_HOST']!, dotenv.env['WISP_AUTH0_CLIENT_ID']!);
    auth0.onLoad().then((final credentials) => setState(() {
      // Handle or store credentials here
      _credentials = credentials;
    }));
    if (_credentials == null) {
      print('Redirecting to Auth0 as credentials is null');
      auth0.loginWithRedirect(redirectUrl: dotenv.env['WISP_DEFAULT_POST_LOGIN_REDIRECT']);
    }
    homeElements = [
      HomeElement(name: 'Dashboard', icon: MaterialCommunityIcons.view_dashboard, listing: PackWall(packs)),
      HomeElement(name: 'Packs', icon: MaterialCommunityIcons.package_variant, listing: PackWall(packs)),
      HomeElement(name: 'Prompts', icon: MaterialCommunityIcons.comment_text_multiple_outline, listing: PromptWall(prompts)),
      HomeElement(name: 'Clauses', icon: MaterialCommunityIcons.rhombus_split, listing: ClauseWall(clauses)),
      HomeElement(name: 'Steps', icon: MaterialCommunityIcons.puzzle_outline, listing: FlowStepRack(steps)),
      HomeElement(name: 'Schemes', icon: MaterialCommunityIcons.notebook_outline, listing: SchemeWall(schemes)),
      HomeElement(name: 'Settings', icon: MaterialCommunityIcons.settings_outline, listing: SchemeWall(schemes)),
    ];
  }

  @override
  Widget build(BuildContext context) {
    var canvas = AnimatedSwitcher(
      duration: const Duration(milliseconds: 200),
      child: homeElements[selectedIndex].listing,
    );

    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth < 320) {
            return Column(
              children: [
                Expanded(child: canvas),
                SafeArea(
                  child: BottomNavigationBar(
                    items: homeElements.map((he) {
                      return BottomNavigationBarItem(
                        icon: Icon(he.icon),
                        label: he.name,
                      );
                    }).toList(),
                    currentIndex: selectedIndex,
                    onTap: (value) {
                      setState(() {
                        selectedIndex = value;
                      });
                    },
                  ),
                )
              ],
            );
          } else {
            return Row(
              children: [
                SafeArea(
                  child: NavigationRail(
                    extended: constraints.maxWidth >= 800,
                    destinations: homeElements.map((he) {
                      return NavigationRailDestination(
                        icon: Icon(he.icon),
                        label: Text(he.name),
                      );
                    }).toList(),
                    selectedIndex: selectedIndex,
                    onDestinationSelected: (value) {
                      setState(() {
                        selectedIndex = value;
                      });
                    },
                  ),
                ),
                Expanded(child: canvas),
              ],
            );
          }
        },
      ),
    );
  }
}

Thanks!