I'm struggling to pinpoint what the issue is with my code. Basically, I've set up a hooks.js file that checks and grabs the current user details if a user is authenticated and returns null otherwise. This hooks is supposed to be a helper function to then control access to pages (i.e. authenticated users who tried to access signin / register pages will be redirected to dashboard and vice versa).

However, it currently only works partially. For example, if I sign in and then try to access the signin / register page, it automatically redirects me to the dashboard page. However, if I'm logged out and I try to access the dashboard, I can access it and it won't redirect me to the signin page. Does anyone know what I'm doing wrong? I've tried to debug it by following the flow of the code (console logging in various places) and even within hooks.js, it seems like it *should* have executed the Router.push(redirectTo) code but it just doesn't seem to do it. Any help is appreciated (and snippets of the code included below)!

hooks.js

```
import { useEffect } from 'react';
import Router from 'next/router';
import useSWR from 'swr';

const fetcher = (url) =>
    fetch(url)
        .then((r) => r.json())
        .then((data) => {
            if (data?.user) {
                return { user: data?.user };
            } else {
                return null;
            }
        });

export function useUser({ redirectTo, redirectIfFound } = {}) {
    const { data, error } = useSWR('api/users/profile', fetcher);
    const user = data?.user;
    const finished = Boolean(data);
    const hasUser = Boolean(user);

    useEffect(() => {
        if (!redirectTo || !finished) return;

        if (
            // If redirectTo is set, redirect if the user was not found.
            (Boolean(redirectTo) && !redirectIfFound && !hasUser) ||
            // If redirectIfFound is also set, redirect if the user was found
            (redirectIfFound && hasUser)
        ) {
            Router.push(redirectTo);
        }
    }, [redirectTo, redirectIfFound, finished, hasUser]);

    return error ? null : user;
}

```

dashboard.js

```
import React from 'react';
import PrivateRouteLayout from '../components/privateRouteLayouts';
import { useUser } from '../lib/hooks';

function Dashboard() {
    useUser({ redirectTo: '/signin', redirectIfFound: false });

    return (
        <PrivateRouteLayout title='Dashboard'>
            <div>
                <h1>Welcome !</h1>
            </div>
        </PrivateRouteLayout>
    );
}

export default Dashboard;

```

signinform.js

```
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import Router from 'next/router';
import { useUser } from '../lib/hooks';
import validateSigninInput from '../lib/validation/login';

function SigninForm() {
    useUser({ redirectTo: '/dashboard', redirectIfFound: true });
    const [userDetails, setUserDetails] = useState({
        email: '',
        password: '',
    });
    const [error, setError] = useState({
        email: '',
        password: '',
    });

    function handleChange(event) {
        setError({
            email: '',
            password: '',
        });
        setUserDetails({
            ...userDetails,
            [event.target.name]: event.target.value,
        });
    }

    async function handleSubmit(event) {
        event.preventDefault();

        const body = userDetails;

        try {
            const res = await fetch('/api/users/signin', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body),
            });

            if (res.status === 200) {
                Router.push('/dashboard');
            } else if (res.status === 400) {
                res.json().then((errMessage) => {
                    setError(errMessage);
                });
            }
        } catch (error) {
            console.error(error);
        }
    }

    return (
        <div className='valign-wrapper row auth-form-container'>
            <div className='row'>
                <div className='col s8 offset-s2'>
                    <Link href='/'>
                        <a>{'< Back to home page'}</a>
                    </Link>
                </div>
                <div className='input-field col s8 offset-s2'>
                    <label htmlFor='email'>Email</label>
                    <input
                        type='email'
                        onChange={handleChange}
                        name='email'
                        value={userDetails.email}
                    />
                    <p className='error-message'> {error.email} </p>
                </div>
                <div className='input-field col s8 offset-s2'>
                    <label htmlFor='password'>Password</label>
                    <input
                        type='password'
                        onChange={handleChange}
                        name='password'
                        value={userDetails.password}
                    />
                    <p className='error-message'>{error.password}</p>
                </div>
                <div className='col s8 offset-s2'>
                    <button
                        className='btn waves-effect waves-light submit-button'
                        onClick={handleSubmit}
                    >
                        Login
                    </button>
                </div>
                <div className='col s8 offset-s2 mt-10'>
                    <Link href='/register'>
                        <a>Don't have an account yet? Create one here</a>
                    </Link>
                </div>
            </div>
        </div>
    );
}

export default SigninForm;

```