Issue with v4-beta signOut

[mike14747]

I have a fully working app using v3 and recently upgraded to 4.0.0-beta.2. I followed the upgrade documents and everything went well except for a small issue I'm having when calling signOut. The issue is that most of the time I have to click the signOut button twice to get signed out. If I sign in and stay on the same page (even with multiple refreshes), I can signOut with a single click, but it seems like if I navigate around to different pages, then try to signOut, I have to click it twice.

Edit: It seems like the problem will occur after next does a "[Fast Refresh] rebuilding". I can signOut with a single click if/when I do it before any "[Fast Refresh] rebuilding" happens.

The only place I'm using signOut is in my Authbar component in the header (I've commented the only 2 places that got changed from v3.

// /components/Authbar.js

import Link from 'next/link';
import { signOut, useSession } from 'next-auth/react'; // these got changed from "next-auth/client" in v3

import styles from '../styles/Authbar.module.css';

const Authbar = () => {
    const { data: session, status } = useSession();
    const loading = status === 'loading';
    // these got changed from "const[session, loading] = useSession();" in v3

    return (
        <div className={'container ' + styles.authbarContainer}>
            {!session && !loading &&
                <>
                    <span className={styles.linkArrows}>
                        <Link href="/auth/signin">
                            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                            <a>
                                Sign in
                            </a>
                        </Link>
                    </span>
                </>
            }

            {session &&
                <>
                    User: <strong className={styles.username}>
                        <Link href="/profile">
                            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                            <a>
                                {session.user.name}
                            </a>
                        </Link>
                    </strong>

                    <span className={styles.linkArrows}></span>
                    <button onClick={() => signOut({ redirect: false })} className={styles.signout}>
                        Sign out
                    </button>
                </>
            }
        </div>
    );
};

export default Authbar;

And in case it matters, here's [...nextauth]:

// /pages/api/auth/[...nextauth].js

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';

import { getUserForSignin } from '../../../lib/api/user';
import bcryptjs from 'bcryptjs';

export default NextAuth({
    providers: [
        Credentials({
            name: 'username/password',
            credentials: {
                username: { label: 'Username', type: 'text' },
                password: { label: 'Password', type: 'password' },
            },
            async authorize(credentials) {
                const user = await getUserForSignin(credentials.username);

                if (user && user.length === 1) {
                    const matches = await bcryptjs.compare(credentials.password, user[0].password);
                    if (matches) return { name: user[0].username };
                    return null;
                } else {
                    return null;
                }
            },
        }),
    ],
    session: {
        jwt: true,
        // how many seconds until an idle session expires and is no longer valid
        maxAge: 30 * 24 * 60 * 60, // 30 * 24 * 60 * 60 is 30 days
    },
    jwt: {
        signingKey: process.env.JWT_SIGNING_PRIVATE_KEY,
    },
    pages: {
        signIn: '/auth/signin',
    },
    callbacks: {
        redirect: async (url, baseUrl) => {
            if (url === '/api/auth/signin') {
                return Promise.resolve('/');
            }
        },
    },
});

Has anyone else come across this behavior?

[balazsorban44]

Do you have a consistent reproduction maybe? Can you confirm it is a next-auth bug specifically happening with v4? Can it be a Next.js bug instead? It sounds like the issue is when using the dev server. so in production there are no errors?

[mike14747]

Good call. I just tried it in production and it is working just fine.

It's funny though that it worked fine running in the dev server with v3.

Thanks for the tip.

[balazsorban44]

I'm not saying it's not supposed to be working reliably in dev, just trying to narrow down the problem surface. As far as I remember, we didn't really change how signOut works in v4.