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

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

Customization

Descope Component

Customize the Descope 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.

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.

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 user operations to your customers. Whether the implementation is tenant-based or not, The Descoper can embed those components inside their website to allow their customers to perform self-service in various operations. Here is an example of the UserProfile widget implementation, using the react SDK:

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 read on further Widget types and implementation methods here.