# Go Router + Riverpod Tutorial 2: Conditional Redirection with Guards

In our [previous article](https://harishkunchala.com/go-router-riverpod-tutorial-series-1-basic-redirection) we have covered basic redirect. Now let's take a look at Conditional Redirection.

## What are Guards ?

**Guards:** Guards are essentially functions that you can define to determine whether a particular redirection should happen or not.

* They evaluate specific conditions (like user authentication status, user roles, or data availability) <mark>and return a new route if the conditions are met,</mark>
    
* <mark>If returned </mark> `null` <mark> they proceed with the default route.</mark>
    

## Tutorial:

First let's define two additional pages:

### Profile Page:

```dart
class ProfilePage extends ConsumerWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Profile Page', style: TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                ref.read(authProvider.notifier).logout();
              },
              child: const Text('Logout'),
            ),
          ],
        ),
      ),
    );
  }
}
```

### Admin Page:

```dart
class AdminPage extends ConsumerWidget {
  const AdminPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Admin'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Admin Page',
              style: TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                ref.read(authProvider.notifier).logout();
              },
              child: const Text('Logout'),
            ),
          ],
        ),
      ),
    );
  }
}
```

Now that we have the Admin Page and Profile Page. Let's see how to connect all the pages to `app_router.dart`

### app\_router.dart

Let's add a guard to both profile page and admin page.

```dart
final routerProvider = Provider<GoRouter>((ref) {

  return GoRouter(
      initialLocation: '/home',
      routes: [
        GoRoute(path: '/home', builder: (context, state) => const HomePage()),
        GoRoute(path: '/login', builder: (context, state) => const LoginPage()),
        GoRoute(path: '/profile', builder: (context, state) => const ProfilePage(),
        redirect: (context, state) {
// GUARD ADDED FOR PAGE. CAN GO TO THIS PAGE ONLY WHEN LOGGED IN
          final loggedIn = ref.watch(authProvider);
          if (!loggedIn) {
            return '/login';
          }
          return null;
        },
        ),

        GoRoute(path: '/admin', builder: (context, state) => const AdminPage(),
        redirect: (context, state) {
// GUARD ADDED FOR PAGE. CAN GO TO THIS PAGE ONLY WHEN LOGGED IN
          final loggedIn = ref.watch(authProvider);
          if (!loggedIn) {
            return '/login';
          }
          return null;
        },
        ),
      ],
      redirect: (context, state) {

        final loggedIn = ref.watch(authProvider);
        final isLoggingIn = state.path == '/login';

        if (!loggedIn && !isLoggingIn) {
          return '/login';
        } else if(loggedIn && isLoggingIn) {
          return '/home';
        }
        return null;
      });
});
```

Now the end goal is that we can only go to the profile page as well as admin page only when logged in

![Conditional redirect with guards](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbWtjZDNkNml6NnEyZWJlM2tsM2VhYTJ6bHVxaWZsdjNocms1ODdsbyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/bMzqnT78RzTWtvlt4e/giphy.gif align="center")

Perfect. As of now we are doing with Basic Redirection, Redirection using guards. We still have 3 tutorials where we discuss advanced concepts of Redirection using Riverpod. So keep tuned for more.