Skip to main content

2. Showing the Login UI

What type of UI are you using?

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

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.

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