Get user information on the frontend

ReactJS

With React Context

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

Vanilla JS

import SuperTokens from 'supertokens-website';
if (await SuperTokens.doesSessionExist()) {      let userId = await SuperTokens.getUserId();      let jwtPayload = await SuperTokens.getJWTPayloadSecurely();}