Skip to main content

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(  new Promise((res) => res(SuperTokens.getRoutingComponent)) as any,  { 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

What type of UI do you want to use?
Custom UI
Pre built UI