#NextJS, #React Needing to define two different type of login forms

Viewed 13

I have two type of login forms:

  • Common users
  • Corporates

I wanted using @next/auth but I cannot change the default path of the login workflow api/auth/ to api/corp/auth or api/user/auth.

I created [...nextauth].ts file and its workflow works fine if the path is api/auth/[...nextauth].ts. When I change the path to api/[type]/auth/[...nextauth].ts I can go to the login form but then login flow redirect to api/auth/signin instead of api/[type]/auth/signin and so I obtain a "404 not found" error.

file: _app.tsx

export enum AccountType {
    USER: "USER",
    CORPORATE: "CORP"
}

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  const router = useRouter();
  const type: AccountType =
    ((
      ((router.query || {}).type as string) || ""
    ).toUpperCase() as AccountType) || AccountType.USER;
  console.log(`/api/${type.toLowerCase()}/auth`);

  return (
    <>
      <Head>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      <SessionProvider
        session={pageProps.session}
        basePath={`/api/${type.toLowerCase()}/auth`}
        refetchInterval={0}
      >
        <Component {...pageProps} />
      </SessionProvider>
    </>
  );
}

Someone have some tips or solutions?

Thanks so much.

0 Answers
Related