Get user information on the frontend

With ReactJS

Plain JS

With React context

This is supported in supertokens-auth-react >= 0.9.0. For lower versions, see "Without React context" (scroll down).

This is two step process:

• Step 1: This is how to use the session context in a component:

import React from "react";
import { useSessionContext } from 'supertokens-auth-react/recipe/session';

class Dashboard extends React.Component {

      render() {
            let {userId, jwtPayload} = useSessionContext();

            let role = jwtPayload.role;

            if (role === "admin") {
                  // TODO..
            } else {
                  // TODO..
            }
      }
}

• Step 2: Wrap the above component with EmailPasswordAuth (which provides the context)

import { EmailPasswordAuth } from 'supertokens-auth-react/recipe/emailpassword';

render() {
     return (
           <EmailPasswordAuth>
                  <Dashboard />
           </EmailPasswordAuth>
     );
}

Without React context

import Session from 'supertokens-auth-react/recipe/session';

if (await Session.doesSessionExist()) {
      let userId = await Session.getUserId();
      let jwtPayload = await Session.getJWTPayloadSecurely();
}

import SuperTokens from 'supertokens-website';

if (await SuperTokens.doesSessionExist()) {
      let userId = await SuperTokens.getUserId();
      let jwtPayload = await SuperTokens.getJWTPayloadSecurely();
}