Cannot figure out redirect behaviour

[ghost]

I am using "next-auth": "^4.0.0-beta.4", and following the SessionProvider guidance.

I have a simple set-up like next-auth-example.vercel.app/

I have an AdminDashboard page following the example

Depending on whether I comment or uncomment callback: rediirect() in [...nextauth].js I get different behaviours, and either way it is not resulting in a logged in user landed on the AdminDashboard content.

With the callback redirect enabled:

callbacks: {
    //async signIn(user, account, profile) { return true },
    async redirect(url, baseUrl) { return baseUrl },
    // async session(session, user) { return session },
    // async jwt(token, user, account, profile, isNewUser) { return token }
  },

The behaviour is:

• starting at logged out
• click on "admin" link the page redirects to Sign In
• I can see http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fadmin in the browser bar
• I can do the sign in
• BUT it redirects to the Home page http://localhost:3000 not http://localhost:3000/admin

With the callback redirect disabled:

callbacks: {
    //async signIn(user, account, profile) { return true },
    //async redirect(url, baseUrl) { return baseUrl },
    // async session(session, user) { return session },
    // async jwt(token, user, account, profile, isNewUser) { return token }
  },

The behaviour is:

• starting at logged out
• click on "admin" link the page redirects to Sign In
• I can see http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fadmin in the browser bar
• I can do the sign in
• I briefly see the AdminDashboard page content
• BUT then it auto-redirects back to the sign in page again

Can anybody help please?

Pages (_app.js and admin.js):

// _app.js
import { SessionProvider } from 'next-auth/react'
import { useEffect } from "react";
import { signIn, useSession } from "next-auth/react"
import "./styles.css"

export default function App ({ 
  Component, 
  pageProps: { session, ...pageProps }, 
}) {

  return (
    <SessionProvider session={session}>      
      {Component.auth ? (        
        <Auth>          
          <Component {...pageProps} />        
        </Auth>      
        ) : (        
          <Component {...pageProps} />      
        )}    
        </SessionProvider>
  )

  function Auth({ children }) {  
    const { data: session, loading } = useSession(); 
    const isUser = !!session?.user;  

    console.log("_app - isUser", isUser);
 
    useEffect( () => {  
      // Do nothing while loading  
      if (loading) return; 
      // If not authenticated, force log in      
      if (!isUser) signIn();
    }, [isUser, loading])

    if (isUser) {    
      return children; 
    }
    
    // Session is being fetched, or no user.  
    // If no user, useEffect() will redirect.  
    return (
      <div>Loading...</div>
    )
  }

}

AdminDashboard

// admin.js
import Layout from '../components/layout';
import { useSession } from 'next-auth/react';

export default function AdminDashboard() {  
    const { data: session } = useSession(); 
    // session is always non-null inside this page, all the way down the React tree.  
    return (
        <Layout>
            <h1>Admin Dashboard</h1>
            Some super secret dashboard
        </Layout>
    )
}

AdminDashboard.auth = true;