I want to use redirect only when signIn(). I have tried several methods.
- 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";
},
},
- 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>
- 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?
CodePudding user response:
import { signOut } from "next-auth/react";
const logoutHandler = () => {
signOut();
};
<button onClick={logoutHandler}>
Sign Out
</button>
CodePudding user response:
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>