SuperTokens

SuperTokens

  • Docs
  • Discord
  • Blog

›Sessions

SIDEBAR_REPLACE_DOC_About this recipe

  • About this recipe

Quick setup

  • Video tutorial
  • Frontend
  • Backend
  • Core

    • Self Hosted setup with Docker
    • Self Hosted setup without Docker
    • Managed Service

    Database Setup

    • MySQL
    • PostgreSQL
    • MongoDB
    • Rename database tables

Common customizations

  • Redirect To Auth Screen
  • Sign Out
  • Sign Up Form

    • Prerequisite
    • Adding Extra Fields
    • Adding / Modifying field validators
    • Embed in a page
    • Terms of service & Privacy policy links
    • Show Sign Up by default

    Sign In Form

    • Prerequisite
    • Adding / Modifying field validators
    • Password managers
    • Embed in a page
  • Post sign up callbacks
  • Post sign in callbacks
  • User Roles

    • Assigning roles to users
    • Assigning roles to a session
    • Reading roles in an API
    • Reading roles in the frontend
    • Updating roles in a session

    Reset Password

    • About
    • Reset password email
    • Embed in a page

    Email Verification

    • About
    • Customising the email sent
    • Embed in a page

    Sessions

    • About
    • Storing session data
    • Session Verification in API
    • Revoking a session manually
    • Change session timeout
    • Checking if a session exists on the frontend
    • Get user information on the frontend
    • Fetching sessions for a user
    • Update JWT Payload
    • Update Session Data
    • Cookies and Https
    • Cookie Consent
    • Share sessions across sub domains
    • Anti CSRF
    • Same site cookies
    • JWT Signing key rotation
    • Access token blacklisting
    • Customizing Error Handling

    Styling

    • Changing Colours
    • Changing Style via CSS
    • Themes

    Changing base path

    • Website Base Path
    • API Base Path

    Multi Tenancy

    • About
    • One login, many sub domains
    • One login per sub domain
  • User Pagination
  • Core

    • Adding API Keys
    • Tuning Performance
    • Logging

    Core CLI

    • Overview
    • Start
    • List
    • Stop
    • Uninstall

NextJS

  • About
  • 1. Configuration
  • 2. Showing Login UI
  • 3. Adding auth APIs
  • 4. Protecting a website route
  • 5. Session verification

    • 5a. Session verification in an API call
    • 5b. Session verification in getServerSideProps
  • 6. Next steps

SIDEBAR_REPLACE_DOC_Serverless Optimisation

  • Running on serverless env

SIDEBAR_REPLACE_DOC_SDKs API Reference

  • SDKs API Reference

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();
}
← Checking if a session exists on the frontendFetching sessions for a user →