How do I prevent SWR from making requests? (Auth)

[dihmeetree]

Ok.. probably a confusing topic but here goes. I have a simple app going with the following routes:

/profile -> Redirects to /login if SWR request to get user returns error
/login -> Redirects to /profile if SWR request to get user is successful and returns data
/signup -> Redirects to /profile if SWR request to get user is successful and returns data

useUser.ts

import useSWR from 'swr'
import { useEffect } from 'react'
import { useRouter } from 'next/router'

import { API_ENDPOINT } from '../../lib/auth'
import fetcher from '../fetcher'

export default function useUser({
  redirectTo = false,
  redirectIfFound = false,
}: {
  redirectTo?: any
  redirectIfFound?: any
} = {}) {
  const { data: user, mutate: mutateUser, error } = useSWR(
    `${API_ENDPOINT}/auth/profile`,
    fetcher,
  )
  const router = useRouter()

  const loading = !user && !error

  useEffect(() => {
    // Redirect to login page first if error is found
    if (error) {
      // Do not redirect to login page if on signup page
      if (router.pathname === '/signup') return
      router.replace('/login')
    }

    // Do not redirect if redirectIfFound is set
    if (error && redirectIfFound) return

    // Do not redirect if the user is logged out
    if (user?.isLoggedIn === false) return

    // if no redirect needed, just return (example: already on /dashboard)
    // if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
    if (!redirectTo || !user) return

    if (
      // If redirectTo is set, redirect if the user was not found.
      (redirectTo && !redirectIfFound && user?.isLoggedIn) ||
      // If redirectIfFound is also set, redirect if the user was found
      (redirectTo && redirectIfFound && !user?.isLoggedIn)
    ) {
      router.replace(redirectTo)
    }
  }, [user, error, redirectIfFound, redirectTo])

  return {
    loading,
    user,
    error,
    mutateUser,
  }
}

login.tsx

import React from 'react'
import { useForm } from 'react-hook-form'

import useUser from '../lib/hooks/useUser'
import fetcher from '../lib/fetcher'
import { API_ENDPOINT } from '../lib/auth'

import LoginForm from '../components/Form/LoginForm'
import TextLink from '../components/TextLink'

export default function Login() {
  const { loading, mutateUser, error, user } = useUser({
    redirectTo: '/profile',
    redirectIfFound: true,
  })

  type LoginDetails = {
    email: string
    password: string
  }

  const { handleSubmit, register } = useForm<LoginDetails>()
  const [errorMessage, setErrorMessage] = React.useState<string | null>(null)

  const onSubmit = async (data: LoginDetails) => {
    try {
      const { user } = await fetcher(`${API_ENDPOINT}/auth/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      })
      
      mutateUser({
        isLoggedIn: true,
        user,
      })
    } catch (error) {
      const { error: errorCode } = error.data
      if (errorCode) {
        setErrorMessage(`common:error_code.${errorCode.message}`)
      } else if (error.message && error.message === 'Failed to fetch') {
        setErrorMessage('common:check_network')
      } else {
        setErrorMessage('common:uncaught_error')
      }
    }
  }

  if ((loading || !user) && !error) return <div>Loading...</div>
  if (!error) return <div>Redirecting...</div>

  return (
    <>
      <TextLink href="/">Home</TextLink>
      <div className="login">
        <LoginForm
          errorMessage={errorMessage}
          onSubmit={handleSubmit(onSubmit)}
          register={register}
        />
      </div>
      <TextLink href="/signup">Signup</TextLink>
    </>
  )
}

profile.tsx

import React from 'react'
import { useRouter } from 'next/router'

import fetcher from '../lib/fetcher'
import useUser from '../lib/hooks/useUser'
import TextLink from '../components/TextLink'

import { API_ENDPOINT } from '../lib/auth'

export default function Profile() {
  const { user, mutateUser, loading } = useUser({
    redirectTo: '/login',
  })
  const router = useRouter()

  // Show loading message if getting user profile
  if (loading || !user) {
    return <p>Loading...</p>
  }

  // Show redirecting message if user clicks logout
  if (user && user.isLoggedIn === false) {
    return <p>Redirecting...</p>
  }

  return (
    <div>
      <TextLink href="/">Home</TextLink>
      {JSON.stringify(user)}
      <button
        onClick={async (e) => {
          e.preventDefault()
          // Remove cookie from user's browser
          await mutateUser(
            fetcher(`${API_ENDPOINT}/auth/logout`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
            })
          )
          // Bring user back to login page
          router.replace('/login')
        }}
      >
        Logout
      </button>
    </div>
  )
}

The issue:

The issue is that.... when I click the Logout button on the Profile page it makes a request to my /auth/logout route.. and runs mutateUser to set isLoggedIn to false.. it then redirects to my /login route and runs the useSWR /auth/profile request again -_-

Is there a way to persist mutate data between pages in Next.js? So if i'm on the profile and run mutateUser({ isLoggedIn: false }) and then redirect to my login page.. it won't try and run the useSWR request again?

tldr:
Go to profile page -> Click logout button -> Redirect to login page (but don't re-run useSWR request /auth/profile because I already know user has logged out - so show login form)

Any help would be appreciated :)