Web Client Session Management

This guide shows how to effectively implement session validation on the client side, with our Web SDKs.

Client SDK

Install SDK

npm i --save @descope/react-sdk

Import and initialize SDK

Parameters:

• baseUrl: Custom domain that must be configured to manage token response in cookies. This makes sure every request to our service is through your custom domain, preventing accidental domain blockages.
• baseStaticUrl: Custom domain to override the base URL that is used to fetch static files.

import { AuthProvider } from '@descope/react-sdk'
import { Descope, useDescope } from '@descope/react-sdk'
 
const AppRoot = () => {
	return (
		<AuthProvider
			projectId="__ProjectID__"
			baseUrl = "https://auth.app.example.com"
		>
			<App />
		</AuthProvider>
	);
};

OIDC Configuration

If you're using our SDK as an OIDC client with our Federated Apps, you can initialize the oidcConfig parameter with the following items:

• applicationId: This is the application id, that can be found within the settings of your Federated Application
• redirectUri: This is the url that will be redirected to if the user is unauthenticated. The default redirect URI will be used if not provided.
• scope: This is a string of the scopes that the OIDC client will request from Descope. This should be one string value with spaces in between each scope. The default scopes are: 'openid email roles descope.custom_claims offline_access'

Sending session token to application server

If you are using Client SDK or using Descope Flows, then your application client must send the session token to you application server. The getSessionToken() function gets the sessionToken from local storage via JS which you can then include in your request.

import { getSessionToken } from '@descope/react-sdk';
 
const sessionToken = getSessionToken();
 
// example fetch call with authentication header
fetch('your_application_server_url', {
  headers: {
    Accept: 'application/json',
    Authorization: 'Bearer '+ sessionToken,
  }
})

At any time, your application client should only send the session token to your application and the application server should validate the session token using Descope Backend SDK.

Logout using Client SDK

If you are integrating using the Descope Client SDK, then you must use the Client SDK to logout. If you are using Descope Flows with React SDK, refer to the Quick Start for details. If you are Descope Client SDK without flows, then refer to the sample code below for logout.

import DescopeSdk from '@descope/web-js-sdk';
 
const descopeSdk = Descope({projectId: "__ProjectID__"});
 
// Logout from the current session
const resp = await descopeSdk.logout();
 
// Logout from all the sessions
const resp = await descopeSdk.logoutAll();

Checking token expiration

One important step in validating a session token is to ensure that the token has not expired. Descope SDKs allows you to check if the session is expired using the isJwtExpired function.

import { getSessionToken, useDescope } from '@descope/react-sdk'
 
const sessionToken = descopeSdk.getSessionToken();
 
const sdk = useDescope()
 
if(sdk.isJwtExpired(sessionToken)) {
  console.log('Session token has expired.');
} else {
  console.log('Session token is valid.');
}

Roles

The role of a user is determined from their session token in your application. You can extract this information using Descope's SDKs, specifically the getJwtRoles function.

import { getSessionToken, getJwtRoles } from '@descope/react-sdk'
 
const sessionToken = descopeSdk.getSessionToken();
const roles = getJwtRoles(sessionToken);
 
console.log('User roles:', roles);

Permissions

Permissions granted to a user can also be extracted from the session token using the getJwtPermissions function from Descope's SDKs.

import { getSessionToken, getJwtPermissions } from '@descope/react-sdk'
 
const sessionToken = descopeSdk.getSessionToken();
const permissions = getJwtPermissions(sessionToken);
 
console.log('User permissions:', permissions);