Which UI do you use?
Custom UI
Pre built 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
Auth
component: #
2) Create the pages/auth/[[...path]].tsx
import React, { useEffect } from 'react'
import dynamic from 'next/dynamic'
import { ThirdPartyPreBuiltUI } from 'supertokens-auth-react/recipe/thirdparty/prebuiltui';
import { PasswordlessPreBuiltUI } from 'supertokens-auth-react/recipe/passwordless/prebuiltui';
import { redirectToAuth } from 'supertokens-auth-react'
import { canHandleRoute, getRoutingComponent } from 'supertokens-auth-react/ui'
const SuperTokensComponentNoSSR = dynamic<{}>(
new Promise((res) => res(() => getRoutingComponent([ThirdPartyPreBuiltUI, PasswordlessPreBuiltUI]))),
{ 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([ThirdPartyPreBuiltUI, PasswordlessPreBuiltUI]) === false) {
redirectToAuth()
}
}, [])
return (
<SuperTokensComponentNoSSR />
)
}
/auth
page on your website #
3) Visit 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