Hi, I was wondering how to create a custom signin/signup UI for a NextJS integration. I am currently successfully using the pre build UI [1], however I'm not sure how to start creating a custom UI. - Should it be in the same file (

pages/auth/[[...path]].tsx

)? If so, where do I put my components? If not, which file should I use? - The example of the custom email password signin [2] only shows the callback function. Is there an example of building a custom UI in NextJS? - Is there a certain structure to keep in mind such that I can easily later add alternative signin/signup methods? [1]: https://supertokens.com/docs/emailpassword/nextjs/setting-up-frontend [2]: https://supertokens.com/docs/emailpassword/custom-ui/email-password-login

hey @michael_pxr the UI and the routes are pretty much up to you. You can have a dedicated page for them, or make them in a popup, or however you like really. If you want a dedicated page, we recommend sticking to the same routes as we have in our pre built Ui so that you dont have to customise password reset or email verification links on the backend.

What should I keep of the example if I don't want to customise password reset or email verification? E.g. should I change

EmailPasswordPreBuildUI

to

MyOwnCustomEmailPasswordUI

?

tsx
const SuperTokensComponentNoSSR = dynamic<{}>(
  new Promise((res) => res(() => getRoutingComponent([MyOwnCustomEmailPasswordUI]))),
  { ssr: false }
)

export default function Auth() {

  // if the user visits a page that is not handled by us (like /auth/random), then we redirect them back to the auth page.
  useEffect(() => {
    if (canHandleRoute([MyOwnCustomEmailPasswordUI]) === false) { 
      redirectToAuth()
    }
  }, [])

  return (
      <SuperTokensComponentNoSSR />
  )
}