Which UI do you use?
Pre built UI
Custom UI
2. Showing the Login UI
pages/auth/[[...path]].tsx
page #
1) Create the - Be sure to create the
auth
folder in thepages
folder. [[...path]].tsx
will contain the component for showing SuperTokens UI- An example of this can be found here.
Auth
component: #
2) Create the pages/auth/[[...path]].tsx
import React, { useEffect } from 'react'
import dynamic from 'next/dynamic'
import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
import { redirectToAuth } from 'supertokens-auth-react'
import { canHandleRoute, getRoutingComponent } from 'supertokens-auth-react/ui'
const SuperTokensComponentNoSSR = dynamic<{}>(
new Promise((res) => res(() => getRoutingComponent([ThirdPartyEmailPasswordPreBuiltUI]))),
{ 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([ThirdPartyEmailPasswordPreBuiltUI]) === false) {
redirectToAuth()
}
}, [])
return (
<SuperTokensComponentNoSSR />
)
}
/auth
page on your website #
3) Visit If you see a login UI, then you have successfully completed this step! If not, please feel free to ask questions on Discord