Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

2. Showing the 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
• An example of this can be found here.

2) Create the Auth component:

pages/auth/[[...path]].tsx

import React, { useEffect } from 'react'
import dynamic from 'next/dynamic'
import SuperTokens from 'supertokens-auth-react'
import { redirectToAuth } from 'supertokens-auth-react'

const SuperTokensComponentNoSSR = dynamic<React.ComponentProps<typeof SuperTokens.getRoutingComponent>>(
  new Promise((res) => res(SuperTokens.getRoutingComponent)),
  { 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 (SuperTokens.canHandleRoute() === false) {
      redirectToAuth()
    }
  }, [])

  return (
      <SuperTokensComponentNoSSR />
  )
}

3) Visit /auth page on your website

If you see a login UI, then you have successfully completed this step! If not, please feel free to ask questions on Discord