signin callback redirect with Credential Provider

[Lombardoc4]

Question 💬

I want to redirect the user to a new page, if they are a new user. If I return false I get the error page but never the redirect to a custom page. Is it possible this functionality is not supported with the Credentials Provider

...
callbacks: {
  async signIn({ user, account, profile, email, credentials }) {
    if (user.isNewUser) {
      console.log(user.isNewUser);
       // return false;
      return '/auth/reset-password';
    } 
    return
  }
}
...

based from This Example

I've create a work around using the callbackUrl and the sessionToken
Setting the sessionToken via the jwtToken

<a href="/api/auth/signin" className={styles.buttonPrimary}
  onClick={(e) => {
    e.preventDefault();
    signIn(null, { callbackUrl: 'http://localhost:3000/auth/reset-password' } );
  }}
>
  Sign in
</a>

On the 'auth/reset-password' file there is a redirect:

useEffect(() => {
  if ((session && !session?.isNewUser) && !router.query.reset === 'true')
    return router.replace('/');
}, [session]);

How to reproduce ☕️

./components/header.js

<a href="/api/auth/signin" className={styles.buttonPrimary}
  onClick={(e) => {
    e.preventDefault();
    signIn();
  }}
>
  Sign in
</a>

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

callbacks: {
  async signIn({ user, account, profile, email, credentials }) {
    if (user.isNewUser) {
      console.log(user.isNewUser);
       // return false;
      return '/auth/reset-password';
    } 
    return
  }
}

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

The purpose of the signIn callback is often misunderstood, so I plan to rename it in #2285

Your "workaround" sounds like the correct solution to me.

[robinofskii]

I'm currently working on role-based authentication following the example you gave in another issue: https://simplernerd.com/next-auth-global-session/

And for my use-case it would be great to have the option of redirecting users based on userdata. That's what I thought the signIn callback would do. I understand what this one does now and how the redirect callback works as well, but can't help but think it would be a nice callback to have. Where the current signIn callback checks if you are able to login, and another callback would fire when succesfully logged in. In this callback we would be able to routing to pages based on the user that has just now logged in.

I'm curious as to what the thought process behind the current callbacks was and if this could be a possibility for the future?

[balazsorban44]

I'm not sure why this was designed the way it is today, as I haven't created the library myself. Not sure about the future, but for new users, you could just redirect to a new page by configuring it:

https://next-auth.js.org/configuration/pages

it's not dynamic though, so you cannot put userspecific data into the url, but you could easy fix that clientside with a useSession+useEffect+router.push if that's important.

im not sure about the future, it's not a high priority feature IMO, as it can be solved nicely in user land at the moment. A proper feature request/RFC would make this more visible though and if there is enough interest, we could escalate.

[Lombardoc4]

It would be really awesome to get that signIn callback for credentials! To bounce off of @robinofskii , an ideal world would be a callback for when a user is logged in.
The way I've looked to approach this is to include the Role or AccessTier in the user's JWT so I can access it in the session.
From there bring in the signIn( {callbackURL: '/home || YOUR-PATH'}),
home will host basically the client side code provided: https://simplernerd.com/next-auth-global-session/
Seems like exactly what @balazsorban44 is recommending.

As for the redirecting with a new page using the info from : https://next-auth.js.org/configuration/pages , this seems confusing. From what has been previously mentioned with Credentials, I dont think I will ever have the capability to access 'newUser' page.
As mentioned in: #2282

[robinofskii]

For anybody coming to this, for my purposes I've made a redirect page, to which I send every user that is logged in. And on that page I check where they need to be forwarded to. Then protecting the pages that roles can't access with the example given in my previous comment. It's a simple solution and works for me, but it does require an extra page.

const Redirect = () => {
  const { data: session } = useSession({ required: true });
  const role = _.get(session, "user.role");

  useEffect(() => {
    if (session && role === "user") {
      router.replace("/action-center");
    } else if (session && role === "provider") {
      router.replace("/provider");
    } else if (session && role === "admin") {
      router.replace("/action-center");
    }
  });

  return null;
};

FYI: I save the user role in session using the nextAuth callbacks and get it with a Lodash get.