2. Showing the Login UI

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

• Be sure to create the auth/[[...path]] folder in the app folder.
• page.tsx will contain the component for showing SuperTokens UI
• An example of this can be found here.

2. Create the Auth component:

"use client";

import { useEffect, useState } from "react";
import { redirectToAuth } from "supertokens-auth-react";
import SuperTokens from "supertokens-auth-react/ui";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";

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.
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    if (SuperTokens.canHandleRoute([EmailPasswordPreBuiltUI]) === false) {
      redirectToAuth({ redirectBack: false });
    } else {
      setLoaded(true);
    }
  }, []);

  if (loaded) {
    return SuperTokens.getRoutingComponent([EmailPasswordPreBuiltUI]);
  }

  return null;
}

3. Visit /auth page on your website

If you see the login UI, you have completed this step. See Customize the sign-in form to change its fields and appearance.

If you cannot see the UI in your app, ask for help on Discord.

You need to build your own UI. See each authentication method tutorial for detailed instructions.