Embed in a page ๐
Two steps to achieving this:
- First we disable the full page default implementation
- Then we render the Sign-up / Sign-in UI wherever we like
Step 1: Disable default implementation ๐
SuperTokens.init({
appInfo: {...},
recipeList: [
EmailPassword.init({
signInAndUpFeature: {
disableDefaultImplementation: true,
(...)
},
(...)
}),
(...)
]
});
If you navigate to /auth
, you should not see the widget anymore.
Step 2: Add component ๐
For example if you would like to add the Sign-up / Sign-in widget at the very end of a landing page, before the footer, simply import the SignInAndUp
component and render it:
import {SignInAndUp} from 'supertokens-auth-react/recipe/emailpassword';
class MyLandingPage extends React.Component {
render() {
return (
<div>
<Header/>
<FirstSection/>
<AnotherSection/>
(...)
<SignInAndUp/>
<Footer/>
</div>
)
}
}