NEXT-AUTH callback redirect only in signin

Question

I want to use redirect only when signIn(). I have tried several methods.

1. Use callback redirect in[...nextauth].tsx

This method make my app will redirect on both sign in and sign out. Not for my situation.

 callbacks: {
    async redirect({ url, baseUrl }) {
      return "/account/loadingregister";
    },
  },

2. Inline use redirect in the component. However, this only works for signOut callback, I need this work in sign in callback.

<button onClick={() => signIn({ callbackUrl: "http://localhost:3000/abc" })}>
     Sign In
</button>

<button onClick={() => signOut({ callbackUrl: "http://localhost:3000/foo" })}>
     Sign Out
</button>

3. Both are used. The [...nextauth].tsx will be the first priority. And inline redirect will be ignored.

So, how can I redirect only in sign in function?

Answer 1

import { signOut } from "next-auth/react";

const logoutHandler = () => {
    signOut();
  };

<button onClick={logoutHandler}>
     Sign Out
</button>

Answer 2

Finally, I found the answer. Need to use async function to redirect to other page after signIn.

const handleSignIn = async () => {
    await signIn("google", {
      callbackUrl: "/",
    });
  };

//component:

<button onClick={() => handleSignIn()}>Sign In</button>