jaspr icon indicating copy to clipboard operation
jaspr copied to clipboard

feat: Implementation of Route Guards

Open carmas123 opened this issue 4 months ago • 4 comments

I am proposing the addition of route guards to the Jaspr framework, a feature that seems to be missing or is not clearly documented in the current version. Route guards are essential for a modern web application, allowing developers to set conditions that must be met before a route can be activated or navigated to. This feature is particularly useful for checking authentication status, permissions, and other prerequisites before rendering a component or page.

Use Case: A common scenario where route guards are invaluable is in handling user authentication. For example, certain parts of an application should only be accessible to authenticated users. Without a route guard, developers have to implement manual checks within each component or page, leading to repetitive code and potential security loopholes.

Suggested Implementation: Route guards in Jaspr could be implemented as functions or objects that can be associated with routes. These guards should be able to:

  • Asynchronously evaluate conditions (e.g., check if a user is logged in).
  • Redirect users to alternative routes based on the evaluation (e.g., redirecting unauthenticated users to a login page).
  • Have access to route parameters and the current application state to make dynamic decisions.

Example:

GuardedRoute(
  path: '/dashboard',
  guard: checkAuthentication,
  component: DashboardComponent,
  onRedirect: '/login',
)

Future<bool> checkAuthentication(RouteContext context) async {
  // Assume authService can asynchronously check if a user is logged in
  return await authService.isLoggedIn();
}

Benefits:

  • Security: Ensures sensitive parts of the application are protected and accessible only to the right users.
  • Developer Experience: Reduces boilerplate code by centralizing authentication/authorization logic in route configurations.
  • User Experience: Provides smoother navigation flow, redirecting users automatically based on authentication status or other criteria.

Conclusion: Integrating route guards into Jaspr could significantly enhance the framework's capabilities, making it more secure and convenient for both developers and users. This feature would align Jaspr with modern web development practices, where security and user experience are paramount.


This feature request should provide a clear overview of what you're looking for and how it can benefit the Jaspr project. Adjust the technical details as necessary to fit your specific requirements or the project's context.

carmas123 avatar Apr 04 '24 21:04 carmas123

I am proposing the addition of route guards to the Jaspr framework

One place that has done this really well IMO is the autoroute package, where you can pass in a List of guard functions that are evaluated. Here are the docs:

https://autoroute.vercel.app/advanced/route_guards

In jaspr it may look something like this and not disrupt the existing API:

Route(
  path: '/home',
  name: 'home',
  guards: [checkAuth,checkSomethingElse]
  builder: (context, state) => HomeScreen(),
)

Without a route guard, developers have to implement manual checks within each component or page...

@carmas123 Not quite. A way to get around this right now is to use jaspr_router in conjunction with some sort of shared state service, like jaspr_riverpod, and listen for auth changes. You can then use the redirect callback to perform your route guard logic. Something like this:

final routerProvider = Provider<Router>(
  ((ref) {
    final isAuthenticated = ref.watch(authProvider).status;
    return Router(
      routes: [],
      redirect: (context, state) {
        if (!isAuthenticated) {
          return '/auth/login';
        }
        return null;
      },
    );
  }),
);

I have implemented something similar to this and it works well.

walsha2 avatar Apr 04 '24 22:04 walsha2

There is a redirect property on each Route that is intended for these cases. Does that work for you or are you looking for something different?

schultek avatar Apr 05 '24 18:04 schultek

When I use redirect I got always an exception. Server mode doesn't support routing.

carmas123 avatar Apr 05 '24 18:04 carmas123

It should, can you open a bug ticket then

schultek avatar Apr 05 '24 18:04 schultek