Client SDK Auth Helpers

The Auth class is a crucial component of the Descope SDK, handling key user authentication operations. This class is designed to execute essential functions such as fetching user details, fetching and refreshing sessions, and logging out users.

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

Manage Session

The useSession and session$ functions retrieve information about the current user session.

They return the following details:

Objects

• sessionToken: The JWT for the current session.

Booleans

• isAuthenticated: Boolean for the authentication state of the current user session.
• isSessionLoading: Boolean for the loading state of the session. Can be used to display a "loading" message while the session is still loading.

import { useSession } from '@descope/react-sdk';
import { useCallback } from 'react';
 
const App = () => {
  const { isAuthenticated, isSessionLoading, sessionToken } = useSession();
  if isAuthenticated { 
    return (
      <>
        <p>You are authenticated.</p>
      </>
    );
  }
};

Manage User

The useUser and me functions return information about the currently authenticated user. These methods are used when you need to fetch or display user-related data in your application.

These functions returns the following details:

Objects

• user: object that contains the following user attributes:
  • email: Email address associated to the user.
  • name: Name associated to the user.
  • givenName: Given name associated to the user.
  • middleName: Middle name associated to the user.
  • familyName: Family name associated to the user.
  • phone: Phone number associated to the user.
  • loginIds: An array of loginIds associated to the user.
  • userId: The user's unique Descope generated userId.
  • verifiedEmail: Boolean whether the email address for the user has been verified.
  • verifiedPhone: Boolean whether the phone number for the user has been verified.
  • picture: The base64 encoded image if the user has an image associated to them.
  • roleNames: An array of roles associated to the user.
  • userTenants: An array of tenant names and IDs associated to the user.
  • createTime: The time that the user was created.
  • totp: Boolean whether the user has TOTP login associated with it.
  • saml: Boolean whether the user has SAML login associated with it.
  • oauth: Boolean whether the user has OAuth login associated with it.

Booleans

• isUserLoading: Boolean for whether the user object is currently loading.

import { useUser } from '@descope/react-sdk';
import { useCallback } from 'react';
 
const App = () => {
  const { user, isUserLoading } = useUser();
  return (
    <>
      <p>Hello {user.name}</p>
    </>
  );
};

Refresh Session

In the case that the browser has a valid refresh token on storage/cookie, the user should get a valid session token (i.e. user should be logged-in). For this reason, it is common to call the refresh function after sdk initialization. Refresh returns a session token, so if autoRefresh is set to true, the sdk will automatically continue to refresh the token.

useDescope is a React hook that retrieves the Descope SDK for further operations related to authentication. This includes the refresh operation, as shown in the React and Next.js examples below.

import { useSession, useUser, useDescope } from '@descope/react-sdk';
import { useCallback } from 'react';
 
const App = () => {
  const { isAuthenticated, isSessionLoading } = useSession();
  const { refresh } = useDescope();
  useEffect(() => {
    refresh();
  }, [refresh]);

Logout

Logs out the currently authenticated user. This method invalidates the user's current JWT tokens and ends their session. This function is typically used when the user chooses to log out of your application.

useDescope is a React hook that retrieves the Descope SDK for further operations related to authentication. This includes the logout operation, as shown in the React, Next.js, and Vue examples below.

import { useDescope } from '@descope/react-sdk';
import { useCallback } from 'react';
 
const App = () => {
	const { logout } = useDescope();
 
	const handleLogout = useCallback(() => {
		logout();
	}, [logout]);
 
  return (
    <>
      <button onClick={handleLogout}>Logout</button>
    </>
  );
};

Logout All

This will sign the user out of all the devices they are currently signed-in with. Successfully executing this endpoint will invalidate all user's refresh tokens. Response will include all user tokens and fields empty, so client will remove cookies as well.

useDescope is a React hook that retrieves the Descope SDK for further operations related to authentication. This includes the logoutAll operation, as shown in the React, Next.js, and Vue examples below.

import { useDescope } from '@descope/react-sdk';
import { useCallback } from 'react';
 
const App = () => {
	const { logoutAll } = useDescope();
 
	const handleLogout = useCallback(() => {
		logoutAll();
	}, [logoutAll]);
 
  return (
    <>
      <button onClick={handleLogout}>logoutAll</button>
    </>
  );
};