Skip to main content
Version: Next

<ThirdPartyAuth />


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>    )}

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

What type of UI do you want to use?
Custom UI
Pre built UI