Empty path GoRouter container

[oravecz]

I do all of my auth routing (and services/ux) in a package imported into my application. So, I declare my routes for authentication in my package, and my routes for my app in the app.

In my application, I use the router like this:

final appRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      redirect: (_) => '/home',
    ),
    GoRoute(
      name: 'home',
      path: '/home',
      pageBuilder: (context, state) => MaterialPage(...),
    ),
    ...authRoutes,    // exported from my auth package
  ],
  errorPageBuilder: (context, state) => ...,
  redirect: _guard,     // redirects to /signin
  debugLogDiagnostics: true,
);

And in my auth package, I export the authRoutes

final authRoutes = [
  GoRoute(
    path: '/signin',
    pageBuilder: (context, state) {...},
  ),
  GoRoute(
    path: '/signup',
    pageBuilder: (context, state) {...},
  ),
  GoRoute(
    path: '/signout',
    pageBuilder: (context, state) {...},
  ),
  ...
);

I want all my auth routes to be top level routes, however if I want them to have their own guard or react to an observable login provider, I cannot do that unless I wrap them in a GoRouter(...) class where I can provide those properties. However, if I do that, I have to give that outer GoRouter() class a path. Since I don't want my existing authentication paths to be under a path like 'auth/' is there a way for me to accomplish this?

[csells]

there isn't a way to nest or combine multiple GoRouter objects into a single one with combined behavior today. how would that work?

[oravecz]

Here is what I am doing today -- currently [email protected]

My app is using my_auth package where I have encapsulated all of my authentication logic and ux into its own package.

The app's router is augmented with routes it pulls from the my_auth package using the function getAuthRoutes(...).

final appRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      redirect: (_) => '/home',
    ),
    GoRoute(
      path: '/home',
      pageBuilder: (context, state) => MaterialPage(
          key: state.pageKey,
          child: const HomePage(),
       ),
    ),
    getAuthRoutes(wrapper: authWrapper),
  ],
  errorPageBuilder: (context, state) => MaterialPage<void>(
    key: state.pageKey,
    child: ErrorPage(error: state.error),
  ),
  redirect: _guard,  // if not logged in, redirect to /auth/signin (with 2.0, it will be redirected to 'auth_signin')
)

The my_auth package, exports the getAuthRoutes(...) function.

GoRoute getAuthRoutes({AuthWrapper? wrapper}) {
  final wrappedBuilder = _pageBuilder(wrapper: wrapper);

  return GoRoute(
      name: 'auth',
      path: '/auth',
      pageBuilder: wrappedBuilder(child: const SizedBox.shrink()),
      observers: [...],
      redirect: (_) => '/auth/signin',
      routes: [
        GoRoute(
          name: 'auth_signin',
          path: 'signin',
          pageBuilder: wrappedBuilder(child: const SigninPage()),
        ),
        GoRoute(
          name: 'auth_signup',
          path: 'signup',
          pageBuilder: wrappedBuilder(child: const SignupPage()),
        ),
        GoRoute(
          name: 'auth_signout',
          path: 'signout',
          pageBuilder: wrappedBuilder(child: const SignoutPage()),
        ),
        ...
      ]);
}

Because I want my auth package may need its own observers (or custom error handler, or some other property of the GoRouter class, I wrap my individual routes in a dummy GoRouter instance. This gives me control over those properties which I want to be global to my package, not my app.

However, the current API constricts me a bit when I do this. I never intend for anyone to navigate to the dummy GoRouter at '/auth'. It is simply there as a placeholder. But it requires a path and it requires a pageBuilder.

Perhaps my use case is supported if pageBuilder and path were nullable, or perhaps a GoRouter could extend a GoRouterContainer class without those properties?.

[csells]

interesting. I like the idea of splitting routes along w/ notifications, etc. into packages. however, I'm not sure I understand your code. what does authWrapper do? would you be able to share a minimal project that demo'd the idea?

[oravecz]

Ahh, cool -- discussions

Here is my full router.dart file. I haven't updated to 2.0 yet in order to try out your update to supporting named routes in the redirect yet.

Being a package for my auth needs across multiple projects, I was interested to design it such that it provides only the form fields and controls and such. The AuthWrapper function allows me to decorate everything else about the auth screens without having to rewrite those form elements. Using some curry functions in that decorator to keep things tight. I may share the current GoRouterState with the wrapper component so it can decorate the page with any additional content (e.g. privacy/disclaimer information) the app deems necessary.

import 'package:dfl_auth/dfl_auth.dart';
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

/*
 * Routes
 * * `/auth/signin` the auth sign in route
 * * `/auth/signup` an onboarding screen
 * * `/auth/signout` - signs out the current authenticated user
 * * `/auth/forgot` - the forgot password flow
 * * `/auth/reset` - the path for the user to securely select a new password
 * * `/auth/delete_account` - the user wishes to remove their username and data
 */

typedef AuthWrapper = Widget Function(Widget child);

MaterialPage<void> _goPageBuilder({
  required BuildContext context,
  required GoRouterState state,
  required Widget child,
  LocalKey? key,
  AuthWrapper? wrapper,
}) {
  final Widget result = wrapper == null ? child : wrapper(child);

  return MaterialPage<void>(
    key: key ?? state.pageKey,
    child: result,
  );
}

_pageBuilder({AuthWrapper? wrapper}) => ({required Widget child}) =>
    (BuildContext context, GoRouterState state) => _goPageBuilder(
          context: context,
          state: state,
          child: child,
          wrapper: wrapper,
        );

GoRoute getAuthRoutes({AuthWrapper? wrapper}) {
  final wrappedBuilder = _pageBuilder(wrapper: wrapper);

  return GoRoute(
      name: 'auth',
      path: '/auth',
      redirect: (_) => '/auth/signup',
      pageBuilder: wrappedBuilder(child: const SizedBox.shrink()),
      routes: [
        GoRoute(
          name: 'auth_signin',
          path: 'signin',
          pageBuilder: wrappedBuilder(child: const SigninPage()),
        ),
        GoRoute(
          name: 'auth_signup',
          path: 'signup',
          pageBuilder: wrappedBuilder(child: const SignupPage()),
        ),
        GoRoute(
          name: 'auth_signout',
          path: 'signout',
          pageBuilder: wrappedBuilder(child: const SignoutPage()),
        ),
        GoRoute(
          name: 'auth_forgot',
          path: 'forgot',
          pageBuilder: wrappedBuilder(child: const ForgotPage()),
        ),
        GoRoute(
          name: 'auth_reset',
          path: 'reset',
          pageBuilder: wrappedBuilder(child: const ResetPage()),
        ),
        GoRoute(
          name: 'auth_delete',
          path: 'delete_account',
          pageBuilder: wrappedBuilder(child: const DeleteAccountPage()),
        ),
      ]);
}

[oravecz]

And here is how I use the AuthWrapper in the main App.

// Wraps the UX from the Auth package in a widget that matches the App's 
// style and "chrome" -- simple yellow background for now
Widget authWrapper(child) {
  return Container(
    color: Colors.yellow,
    child: child,
  );
}

final appRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      redirect: (_) => '/auth/signin',
    ),
    GoRoute(
      name: 'home',
      path: '/home',
      pageBuilder: (context, state) => MaterialPage(
          key: state.pageKey,
          child: const HomePage(
            title: 'Example App',
          )),
    ),
    getAuthRoutes(wrapper: authWrapper),
  ],
  errorPageBuilder: (context, state) => MaterialPage<void>(
    key: state.pageKey,
    child: ErrorPage(error: state.error),
  ),
  redirect: _guard,
  debugLogDiagnostics: true,
);

String? _guard(GoRouterState state) {
  // Nothing yet
  return null;
}

[oravecz]

interesting. I like the idea of splitting routes along w/ notifications, etc. into packages. however, I'm not sure I understand your code. what does authWrapper do? would you be able to share a minimal project that demo'd the idea?

Not sure how "minimal" it is at this stage, but I added you to a private repo so you can see how I am using it

[csells]

maybe a lint to some sample code in a git repo?

[oravecz]

Sent invite to private repo to see

[csells]

Thanks, @oravecz. My definition of "minimal" is the smallest amount of code that shows the error you're seeing. It should be a throw-away project that you're willing to make public because it doesn't have any of your private IP in it. Anything with your IP in it isn't something I'm able to look at.