Embed Sign In / Up form in a page

Step 1: Disable default implementation

This will prevent SuperTokens from displaying the default login UI in the /auth page.

ReactJS

Note

To use SuperTokens with plain javascript you need to use the supertokens-website SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.

Plain JavaScript

Note

To use SuperTokens with React Native you need to use the supertokens-react-native SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

React Native

import SuperTokens from "supertokens-auth-react";import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        ThirdPartyEmailPassword.init({            signInAndUpFeature: {                disableDefaultImplementation: true,                // ...            },            // ...        }),        // ...    ]});

If you navigate to /auth, you should not see the widget anymore.

Step 2: Render the component yourself

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:

ReactJS

Note

To use SuperTokens with plain javascript you need to use the supertokens-website SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.

Plain JavaScript

Note

To use SuperTokens with React Native you need to use the supertokens-react-native SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

React Native

import React from "react";import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdpartyemailpassword';
class MyLandingPage extends React.Component {    render() {        return (            <div>                <Header />                <FirstSection />                <AnotherSection />
                (...)                <SignInAndUp />                <Footer />            </div>        )    }}

Step 3: Changing the website path for the login UI

The default path for this is component is /{websiteBasePath}/.

If you are displaying this at some custom path, then you need add additional config on frontend:

ReactJS

Note

To use SuperTokens with plain javascript you need to use the supertokens-website SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.

Plain JavaScript

Note

To use SuperTokens with React Native you need to use the supertokens-react-native SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

React Native

import SuperTokens from "supertokens-auth-react";import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "...",    },    recipeList: [        ThirdPartyEmailPassword.init({
            // The user will be taken to the custom path when then need to login.            getRedirectionURL: async (context) => {                if (context.action === "SIGN_IN_AND_UP") {                    return "/custom-login-path";                };            }        })    ]})