Custom Sign In Page - Clicking back button during oAuth redirects outside of the site

[mattfranciswork0]

Question 💬

When I click the back button during the oAuth process, it redirects me outside of localhost:3000, It looks like:

I want it to go back to the /signin page. Why is this occurring?

If I don't have a custom sign in page, it will work normally and redirect me to localhost:3000:

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
export default NextAuth({
    // Configure one or more authentication providers

    providers: [
        Providers.Google({
            clientId: process.env.GOOGLE_ID,
            clientSecret: process.env.GOOGLE_SECRET,
        }),
        Providers.GitHub({
            clientId: process.env.GITHUB_ID,
            clientSecret: process.env.GITHUB_SECRET,
        }),
    ],
    pages: {
        signIn: "/signin",
    },

    // A database is optional, but required to persist accounts in a database
    database: process.env.DATABASE_URL,
});

import { getProviders, signIn } from "next-auth/client";
import { useRouter } from "next/router";
import { useSession } from "next-auth/client";

//Redirect to certain page; instead of the original sign in page (default behaviour):
//https://github.com/nextauthjs/next-auth/issues/350
export default function SignIn({ providers }) {
    const router = useRouter();
    const [session, loading] = useSession();

    if (loading) return <p>Loading</p>;

    if (!session) {
        return (
            <>
                <p>{callbackUrl}</p>
                {Object.values(providers).map((provider: any) => (
                    <div key={provider.name}>
                        <button
                            onClick={() =>
                                signIn(
                                    provider.id
                                )
                            }
                        >
                            Sign in with {provider.name}
                        </button>
                    </div>
                ))}
            </>
        );
    } else {
        router.push("/");
    }
    return (
        <main>
 
        </main>
    );
}

// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
    const providers = await getProviders();
    return {
        props: { providers },
    };
}