Skip to main content

How to use

  1. You will need to modify the Passwordless.init(...) function call.
  2. Component overrides can be configured at override.components config object.
  3. Pick a component that you'd like to override by its key.
  4. Supply a React component against the key you have picked. Your custom component will get the original component as a prop.

Example#

import React from "react";
import { SuperTokensWrapper } from "supertokens-auth-react";
import { ThirdpartyPasswordlessComponentsOverrideProvider } from "supertokens-auth-react/recipe/thirdpartypasswordless";

import octocat from "./octocat.png";

function App() {
    return (
        <SuperTokensWrapper>
            <ThirdpartyPasswordlessComponentsOverrideProvider
                components={{
                    // In this case, the <ThirdPartyPasswordlessHeader_Override> 
                    // will render the original component
                    // wrapped in a div with an octocat picture above it.
                    ThirdPartyPasswordlessHeader_Override: ({ DefaultComponent, ...props }) => {
                        return (
                            <div>
                                <img src={octocat} />
                                <DefaultComponent {...props} />
                            </div>
                        );
                    }
                }}>
                {/* Rest of the JSX */}
            </ThirdpartyPasswordlessComponentsOverrideProvider>
        </SuperTokensWrapper>
    );
}
export default App;
Prebuilt sign up or log in UI with custom image
important

Please make sure that the file in which this config is specified is a .tsx or .jsx file type.

Finding which component will be overridden#

To do that, you should use React Developer Tools extension which provides a component tree inspector.

Example#

Checking which component from the prebuilt UI will be overridden using React Developer Tools extension
  1. Look for the names defined in component override config and/or components ending in _Override in the component tree.
  2. Ensure that's the component you want to override
  3. Overide the component as stated above.

How do I render the original component#

Because the override function receives the original component as a parameter, you can render it. To do this, simply use it in JSX. Don't forget to supply original props by spreading them.

import React from "react";
import { SuperTokensWrapper } from "supertokens-auth-react";
import { ThirdpartyPasswordlessComponentsOverrideProvider } from "supertokens-auth-react/recipe/thirdpartypasswordless";

function App() {
    return (
        <SuperTokensWrapper>
            <ThirdpartyPasswordlessComponentsOverrideProvider
                components={{
                    ThirdPartyPasswordlessHeader_Override: ({ DefaultComponent, ...props }) => {
                        return (
                            <>
                                <h1>I'm a header that you added above original component</h1>
                                <DefaultComponent {...props} />
                            </>
                        )
                    }
                }}>
                {/* Rest of the JSX */}
            </ThirdpartyPasswordlessComponentsOverrideProvider>
        </SuperTokensWrapper>
    );
}
export default App;
Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react