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 (me), refreshing a session (refreshSession), and logging out a user (logout).
Functions can take an optional refresh token as a parameter.
import { AuthProvider } from '@descope/react-sdk'import { Descope, useDescope } from '@descope/react-sdk'const AppRoot = () => { return ( <AuthProvider projectId="__ProjectID__" // If the Descope project manages the token response in cookies, // a custom domain must be configured // (e.g., https://auth.app.example.com) // and should be set as the baseUrl property. // baseUrl = "https://auth.app.example.com" > <App /> </AuthProvider> );};
Retrieves information about the currently authenticated user. This method is used when you need to fetch or display user-related data in your application.
This function returns the following details:
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 wether the user has TOTP login associated with it.
saml: Boolean wether the user has SAML login associated with it.
oauth: Boolean wether the user has OAuth login associated with it.
import { useUser } from '@descope/react-sdk';import { useCallback } from 'react';const App = () => { // NOTE - `useDescope`, `useSession`, `useUser` should be used inside `AuthProvider` context, // and will throw an exception if this requirement is not met const { user, isUserLoading } = useUser(); { ... } // Include `isSessionLoading`, `isUserLoading` and `isAuthenticated` checks here to prevent rendering before the user is loaded return ( <> <p>Hello {user.name}</p> </> ); };
For a case that the browser has a valid refresh token on storage/cookie,
the user should get a valid session token (e.i. user should be logged-in).
For that purpose, it is common to call the refresh function after sdk initialization.
Note: Refresh return a session token, so if the autoRefresh was provided, the sdk will
automatically continue to refresh the token
import { useSession, useUser, useDescope } from '@descope/react-sdk';import { useCallback } from 'react';const App = () => { // NOTE - `useDescope`, `useSession`, `useUser` should be used inside `AuthProvider` context, // and will throw an exception if this requirement is not met const { isAuthenticated, isSessionLoading } = useSession(); const { user, isUserLoading } = useUser(); if (isSessionLoading || isUserLoading) { return <p>Loading...</p>; } if (isAuthenticated) { return ( <> <p>Hello {user.name}</p> </> ); } return <p>You are not logged in</p>;};// Note: `useSession` triggers a single request to the Descope backend to attempt to refresh the session. If you don't useSession on your app, the session will not be refreshed automatically. If your app does not require useSession, you can trigger the refresh manually by calling refresh from useDescope hook. Example:// const { refresh } = useDescope();// useEffect(() => {// refresh();// }, [refresh]);
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.
import { useDescope } from '@descope/react-sdk';import { useCallback } from 'react';const App = () => { const { logout } = useDescope(); const handleLogout = useCallback(() => { logout(); }, [logout]); { ... } // Include `isSessionLoading`, `isUserLoading` and `isAuthenticated` checks here to render the proper UI return ( <> <button onClick={handleLogout}>Logout</button> </> );};
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.
import { useDescope } from '@descope/react-sdk';import { useCallback } from 'react';const App = () => { const { logoutAll } = useDescope(); const handleLogout = useCallback(() => { logoutAll(); }, [logoutAll]); { ... } // Include `isSessionLoading`, `isUserLoading` and `isAuthenticated` checks here to render the proper UI return ( <> <button onClick={handleLogout}>Logout All</button> </> );};
import { useDescope } from '@descope/react-sdk';const App = () => { // NOTE - `useDescope`, `useSession`, `useUser` should be used inside `AuthProvider` context, // and will throw an exception if this requirement is not met const sdk = useDescope(); const testHook = () => { // Examples of how to access methods via the hook: const sdk = useDescope(); sdk.logout(); const { logout } = useDescope(); } return ( <> <p>Hello</p> </> );};
Providing tenant will initialize the flow with the tenant associated. This is crucial for B2B(Business To Business)
implementation as Descopers need to segregate their customers to tenant specific configuration such as SSO and attribute mapping.
import { Descope } from '@descope/react-sdk'const App = () => { return ( {...} <Descope flowId="my-flow-id" // tenant ID for SSO (SAML) login. //If not provided, Descope will use the domain of available email to choose the tenant tenant="tenantId" /> )}