Skip to main content

2. Showing the Login UI

1) Create the pages/auth/[[...path]].js page#

  • Be sure to create the auth folder in the pages folder.
  • [[...path]].js will contain the component for showing SuperTokens UI
  • An example of this can be found here.

2) Create the Auth component:#

import React, { useEffect } from 'react'import dynamic from 'next/dynamic'import SuperTokens from 'supertokens-auth-react'import { redirectToAuth } from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
const SuperTokensComponentNoSSR = dynamic(  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