2. Showing Login UI

1. Create the pages/auth/[[...path]].tsx page

• Be sure to create the auth folder in the pages folder.
• [[...path]].tsx will contain the component for showing SuperTokens UI

2. Create the Auth component:

import React, { useEffect } from "react";
import dynamic from "next/dynamic";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { redirectToAuth } from "supertokens-auth-react";
import { canHandleRoute, getRoutingComponent } from "supertokens-auth-react/ui";

const SuperTokensComponentNoSSR = dynamic<{}>(
  new Promise((res) => res(() => getRoutingComponent([EmailPasswordPreBuiltUI]))),
  { 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([EmailPasswordPreBuiltUI]) === false) {
      redirectToAuth();
    }
  }, []);

  return <SuperTokensComponentNoSSR />;
}

3. Visit /auth page on your website

If you see a login UI, then you have successfully completed this step! You can also see all designs of our pre-built UI, for each page on this link.

If you cannot see the UI in your app, please feel free to ask questions on Discord

You need to build your own UI. You will have to check each authentication method tutorial for detailed instructions how how to achieve this.