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.

Before using the Descope Components, make sure to import and initialize the relevant SDK.

Descope Flow Component

Customize the Descope Flow Component by passing in the following props:

• theme: theme can be "light", "dark" or "os", which auto selects a theme based on the OS theme. Default is "light"
• styleId: style Id can be the id of the style you wish to run your flows with
• debug: debug can be set to true to enable debug mode
• redirectUrl: 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)
• redirectAfterSuccess: Redirect URL after the flow's success.
• redirectAfterError: Redirect URL upon error in the flow.
• autoFocus: 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
• errorTransformer: errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user. For more information, refer to Customizing Flow Errors.
• locale: locale can be any supported locale which the flow's screen translated to. if not provided, the locale is taken from the browser's locale.
• logger: logger is an object describing how to log info, warn and errors.
• dismissScreenErrorOnInput: when used, the general error message that appears on screen on user input will be cleared once the form is being re-edited. The value should be set to true.

import { Descope } from '@descope/react-sdk'
 
const App = () => {
    return (
        <Descope
            flowId="my-flow-id"
            // theme="dark"
            // styleId=<Style ID>
            // debug={true}
            // redirectUrl=<redirectUrl>
            // redirectAfterSuccess="/"
            // redirectAfterError="/error-page"
            // autoFocus="skipFirstScreen"
            // errorTransformer={errorTransformer}
        />
    )
}

Triggered Events

• onReady: onReady is an event that is triggered when the flow is ready to be displayed. It's useful for showing a loading indication before the page is ready.
• onSuccess: Function that executes when authentication succeeds. User information is returned and accessible with e.detail.user.
• onError: Function that executes with authentication fails.

import { Descope } from '@descope/react-sdk'
 
const App = () => {
    return (
        <Descope
            flowId="my-flow-id"
            onReady={() => {
              console.log('Flow is ready');
            }}
            onSuccess={(e) => console.log(e.detail.user)}
            onError={(e) => console.log('Could not log in!')}
        />
    )
}

Default Flows

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

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.

Available Cookie Configuration Options

Here is an example of setting both sameSite and secure explicitly:

<AuthProvider
  projectId="your-project-id"
  sessionTokenViaCookie={{ sameSite: 'None', secure: true }}
>
  <App />
</AuthProvider>

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

Widgets

Widgets are Descope components that let you delegate operations to your customers. Whether your implementation is tenant-based or not, you can embed these components inside your application to allow your customers to perform various self-service operations.

import { UserProfile } from '@descope/react-sdk';
 
<UserProfile
	widgetId="user-profile-widget"
	theme={theme} // light / dark / os (auto detect)
    onLogout={() => {
      // add your own logout callback here
      window.location.href = '/login';
    }}
/>

You can learn more about Widgets and their implementation on the Widgets Overview doc.