Next-auth: Custom SignIn Page redirects to itself

[benoror]

Describe the bug

I am getting the same issue as in https://github.com/iaincollins/next-auth/issues/284, even when passing provider.id, only getting a session when refreshing/navigating out of the signin page:

To Reproduce

I am on latest versions:

    "next": "^9.4.4",
    "next-auth": "^2.2.0",

My code is pretty much the same as in https://github.com/iaincollins/next-auth/issues/284, I only changed the getProviders function (according to this fix: https://github.com/iaincollins/next-auth/issues/324)

_app.js

import React from 'react'
import { Provider } from 'next-auth/client'

export default ({ Component, pageProps }) => {
  const { session } = pageProps
  return (
    <Provider options={{ site: process.env.SITE }} session={session} >
      <Component {...pageProps} />
    </Provider>
  )
}

signin.js

import React from "react";
import { getProviders, signin } from "next-auth/client";

export default ({ providers }) => {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <p key={provider.name}>
          <a href={provider.signinUrl} onClick={(e) => e.preventDefault()}>
            <button onClick={() => signin(provider.id)}>
              Sign in with {provider.name}
            </button>
          </a>
        </p>
      ))}
    </>
  );
};

export async function getServerSideProps(context) {
  return {
    props: {
      providers: await getProviders(),
    },
  };
}

Expected behavior

Redirect to Index

Screenshots or error logs
If applicable, add screenshots or error logs to help explain the problem.

Additional context

• https://github.com/iaincollins/next-auth/issues/284
• https://github.com/iaincollins/next-auth/issues/324

Documentation feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• [x] Found the documentation helpful
• [x] Found documentation but was incomplete (regarding https://github.com/iaincollins/next-auth/issues/324)
• [ ] Could not find relevant documentation
• [x] Found the example project helpful
• [ ] Did not find the example project helpful

[bplowry]

I found the same, and worked around by parsing the callbackUrl from the route and explicitly passing it callbackUrl to the <button onClick> as outlined in the docs.

import React from "react";
import { getProviders, signin } from "next-auth/client";

export default ({ providers }) => {
  const { query: { callbackUrl } } = useRouter();
  return (
    <>
      {Object.values(providers).map((provider) => (
        <p key={provider.name}>
          <a href={provider.signinUrl} onClick={(e) => e.preventDefault()}>
            <button onClick={() => signin(provider.id, { callbackUrl })}>
              Sign in with {provider.name}
            </button>
          </a>
        </p>
      ))}
    </>
  );
};

export async function getServerSideProps(context) {
  return {
    props: {
      providers: await getProviders(),
    },
  };
}

[iaincollins]

As with the issues #284 and #324 you linked to, this is not a bug in NextAuth.js.

When you sign in (or sign out) with NextAuth.js it automatically takes you back to whatever page the user was on before, by design - as this typically a much better user experience. You can override this behaviour using the callbackUrl option.

In this case seems like are actually being signed in but you don't have any logic on your sign in page that checks to see if you are signed in, so it just keeps displaying the same sign in link over and over.

The approach from @bplowry is correct if you want to direct the user to a different page.

I recommend you add some logic to your auth page that checks if the user is signed in.

[benoror]

Thanks @bplowry @iaincollins