Reading roles on the frontend

To access the user's role on the frontend we read from the access token payload from the session

ReactJS

With React Context

import React from "react";import { useSessionContext } from 'supertokens-auth-react/recipe/session';
function Dashboard(props: any) {      let session = useSessionContext();
      if (session.loading) {        return null;      }
      if (!session.doesSessionExist) {        // TODO      } else {        // we use the key "roles" here since that's what we        // used while setting the payload in the backend.         let roles: string[] = session.accessTokenPayload.roles;
        if (roles.includes("admin")) {                // TODO..        } else {                // TODO..        }      }}

Without React Context

import Session from 'supertokens-auth-react/recipe/session';
async function getRoles() {    if (await Session.doesSessionExist()) {
        // we use the key "roles" here since that's what we        // used while setting the payload in the backend.         let roles: string[] = (await Session.getAccessTokenPayloadSecurely())["roles"];    }}

Angular

Via NPM

import Session from 'supertokens-web-js/recipe/session';
async function getRoles() {    if (await Session.doesSessionExist()) {
        // we use the key "roles" here since that's what we        // used while setting the payload in the backend.         let roles: string[] = (await Session.getAccessTokenPayloadSecurely())["roles"];    }}

Via Script Tag

async function getRoles() {    if (await supertokensSession.doesSessionExist()) {
        // we use the key "roles" here since that's what we        // used while setting the payload in the backend.         let roles: string[] = (await supertokensSession.getAccessTokenPayloadSecurely())["roles"];    }}

Plain JavaScript

import SuperTokens from 'supertokens-react-native';
async function getRole() {    if (await SuperTokens.doesSessionExist()) {
        // we use the key "roles" here since that's what we        // used while setting the payload in the backend.         let roles: string[] = (await SuperTokens.getAccessTokenPayloadSecurely())["roles"];    }}

React Native

import Session from 'supertokens-web-js/recipe/session';
async function getRoles() {    if (await Session.doesSessionExist()) {
        // we use the key "roles" here since that's what we        // used while setting the payload in the backend.         let roles: string[] = (await Session.getAccessTokenPayloadSecurely())["roles"];    }}