Which UI do you use?

Custom UI

Pre built UI

<ThirdPartyAuth />

About

The ThirdPartyAuth component is used to wrap any component that requires authentication in an application.

import SuperTokens from "supertokens-auth-react";
class App extends React.Component {
    render() {
        return (
            <ThirdPartyAuth>
                <Dashboard />
            </ThirdPartyAuth>
        );
    }
}

• ThirdPartyAuth takes a prop called requireAuth which if set to false, will show the Dashboard component even if the user is not logged in.
• ThirdPartyAuth also creates a "Session context" which provides the following object to all children components:

  {
      doesSessionExist: boolean,
      userId: string,
      jwtPayload: any /*JSON object set on the backend*/
  }

• ThirdPartyAuth will update the session, because it uses SessionAuth underneath. Read more about session updates in SessionAuth guide.

Handle session expiry

If you pass a function to onSessionExpired prop, it will be called whenever the session expires.

const App = () => {
    return (
        <ThirdPartyAuth
            onSessionExpired={notifyUserAndDisplayPopup}>
            <MyComponent />
        </ThirdPartyAuth>
    )
}

caution

You will need to redirect the user to the login screen in the callback you provide to onSessionExpired.