---
title: 2. Showing Login UI
description: Implement a login UI using SuperTokens in a Next.js application.
sidebar:
  order: 3
---

<UITypeSwitch />

<VariantContent storageKey="ui-type" value="prebuilt">

## 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:

```tsx title="pages/auth/[[...path]].tsx"
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](https://master--6571be2867f75556541fde98.chromatic.com/?path=/story/auth-page--playground).

If you cannot see the UI in your app, please feel free to ask questions on [Discord](https://supertokens.com/discord)

</VariantContent>

<VariantContent storageKey="ui-type" value="custom">

You need to build your own UI. You will have to check each [authentication method tutorial](/authentication/overview) for detailed instructions how how to achieve this.

</VariantContent>