---
title: 2. Showing the 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 `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](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx).

## 2. Create the `Auth` component:

```tsx title="app/auth/[[...path]]/page.tsx"
"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](/authentication/email-password/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](https://supertokens.com/discord).

</VariantContent>

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

You need to build your own UI. See each [authentication method tutorial](/authentication/overview) for detailed instructions.

</VariantContent>