Descope Components

Descope Components are components used to render Descope Flows and provide context in your application. This includes the UI elements and logic as defined in your project console.

Client SDK

Install SDK

Terminal

npm i --save @descope/react-sdk

Import and initialize SDK

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

Customization

Descope Component

Customize the Descope Component by passing in the following props:

App.tsx

import { Descope } from '@descope/react-sdk'
 
const App = () => {
    return (
        {...}
        <Descope
            flowId="my-flow-id"
            onSuccess={(e) => console.log('Logged in!')}
            onError={(e) => console.log('Could not logged in')}
            // theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light"
            // theme="dark"
 
            // debug can be set to true to enable debug mode
            // debug={true}
 
            // tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant
            // tenant=<tenantId>
 
            // Redirect URL for OAuth and SSO (will be used when redirecting back from the OAuth provider / IdP), or for "Magic Link" and "Enchanted Link" (will be used as a link in the message sent to the the user)
            // redirectUrl=<redirectUrl>
 
            // autoFocus can be true, false or "skipFirstScreen". Default is true.
            // - true: automatically focus on the first input of each screen
            // - false: do not automatically focus on screen's inputs
            // - "skipFirstScreen": automatically focus on the first input of each screen, except first screen
            // autoFocus="skipFirstScreen"
 
            // errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user.
            // NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is.
            // Example:
            // const errorTransformer = useCallback(
            // 	(error: { text: string; type: string }) => {
            // 		const translationMap = {
            // 			SAMLStartFailed: 'Failed to start SAML flow'
            // 		};
            // 		return translationMap[error.type] || error.text;
            // 	},
            // 	[]
            // );
            // ...
            // errorTransformer={errorTransformer}
            // ...
        />
    )
}

Default Flows

Use default flow components that render the Descope component with a predefined flow ID.

App.tsx

import { SignInFlow } from '@descope/react-sdk'
// you can choose flow to run from the following
// import { SignUpFlow } from '@descope/react-sdk'
// import { SignUpOrInFlow } from '@descope/react-sdk'
 
const App = () => {
    return (
        {...}
        <SignInFlow
            onSuccess={(e) => console.log('Logged in!')}
            onError={(e) => console.log('Could not logged in!')}
        />
    )
}

Auth Provider

Passing sessionTokenViaCookie prop to AuthProvider component. Descope SDK will automatically store session token on the DS cookie.

Note

Use this option if session token will stay small (less than 1k). Session token can grow, especially in cases of using authorization, or adding custom claims

App.tsx

import { AuthProvider } from '@descope/react-sdk';
 
const AppRoot = () => {
	return (
		<AuthProvider
     projectId="my-project-id"
     sessionTokenViaCookie
     // 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>
	);
};

Now, whenever you call fetch, the cookie will automatically be sent with the request. Descope backend SDKs also support extracting the token from the DS cookie.

Note

The session token cookie is set as a Secure cookie. It will be sent only over HTTPS connections. In addition, some browsers (e.g. Safari) may not store Secure cookie if the hosted page is running on an HTTP protocol.

Widgets

Widgets are Descope components that let you delegate user operations to your customers. Whether the implementation is tenant-based or not, The Descoper can embed those components inside his website to allow his customers to perform self-service in various operations. Here is an example of the UserManagement widget implementation, using the react SDK:

App.tsx

import { UserManagement } from '@descope/react-sdk';
...
  <UserManagement
    widgetId="user-management-widget"
    tenant="tenant-id"
  />

You can read on further Widget types and implementation methods here.

Was this helpful?

On this page