How to redirect and log out correctly?

[j-lee8]

I'm very confused by how this is supposed to work and would like to know if there is a preferred/intended way to do this? I'm using a useEffect to notify of session change then redirect. I tried the callbackUrl but it doesn't work at all. I'm coming from CRA so please excuse me if I'm missing something obvious. Sign in works fine, and when I sign out the session is removed from Postgres so I have no idea why it doesn't go back to login page. I've read about getServerProps etc... do I need to use this anywhere? Thanks all.

I have a /login page as follows:

export default function Login() {
	const [ session, loading ] = useSession();
	const router = useRouter();

	useEffect(() => {
		if (session) router.push('/main');
	}, [session]);
  
	return <>
		{!session && <>
			Not signed in <br/>
			<button onClick={() => signIn('google')}>Sign in</button>
			</>
		}
	</>
}

Then in /main I have this, but it doesn't go back to login?

const Main : FC = () => {

    const router = useRouter();
	const session = useSession();

	useEffect(() => {
		if (!session) router.push('/login');
	}, [session]);

    return (
        <div>
            Welcome to the secret page! Ssssh, don't tell anyway
            <button onClick={signOut} style={{ backgroundColor: 'blue' }}>Sign out</button>
        </div>
    )
}

export default Main; 

[balazsorban44]

https://next-auth.js.org/getting-started/client#specifying-a-callbackurl

Just pass /main as callbackUrl

useSession returns an array, you want to check its first item for existence.

https://next-auth.js.org/getting-started/client#usesession

[mhdalmajid]

I use sign out as a page sometimes so when user visits signout page it will end the session

import { signOut } from 'next-auth/client'
import { useEffect } from 'react'

function signout() {
  useEffect(() => {
    let isMounted = true

    signOut({
      redirect: true,
      callbackUrl: 'http://localhost:3000/login',
    })

    return () => {
      isMounted = false
    }
  })

  return (
    <div>
      <h3>signed out</h3>
      <h1> see you soon</h1>
    </div>
  )
}

export default signout

[mhdalmajid]

or for better experiance I use

import { signOut, useSession } from 'next-auth/client'
import { useRouter } from 'next/router'
import { useEffect } from 'react'

function signout() {
  const router = useRouter()
  const [session, loading] = useSession()

  const redirect = async () => {
    const data = await signOut({
      redirect: false,
    })

    router.push('/login')
  }

  useEffect(() => {
    let isMounted = true

    if (session) redirect()
    else router.push('/login')

    return () => {
      isMounted = false
    }
  }, [session])

  return (
    <div>
      <h3>signed out</h3>
      <h1> see you soon</h1>
    </div>
  )
}

export default signout