Getting Started

React Quickstart

This guide will only include the frontend integration. If you would like to also handle Session Management in your backend, select your backend technology below:

This is a quickstart guide to help you integrate Descope with your React application. Follow the steps below to get started.

Install React SDK

Install the SDK with the following command:

Terminal
npm i --save @descope/react-sdk

Import and Wrap Application with AuthProvider

Wrap the entire application with <AuthProvider />. You need your Project ID for this step, which you can find on the project page of your Descope console.

Note

You can also add the optional baseUrl parameter if you're utilizing a CNAME within your Descope project (ex: https://auth.company.com).

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider } from '@descope/react-sdk';
 
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
 
root.render(
    <React.StrictMode>
        <AuthProvider projectId='__ProjectID__'>
            <App />
        </AuthProvider>
    </React.StrictMode>
);

Import Descope Functions and Add Flows Component

To trigger the Descope Flow, you will need to add this component. The screens you've customized in your Flow will appear here. You can also customize the component with the following:

  • flowId: ID of the flow you wish to use
  • onSuccess and onError: functions that execute when authentication succeeds or fails

Note

For the full list of component customization options, refer to our Descope Components Customization Doc.

App.js
import { useDescope, useSession, useUser } from '@descope/react-sdk'
import { Descope } from '@descope/react-sdk'
import { getSessionToken } from '@descope/react-sdk';
 
const App = () => {
	return (
		<Descope
          flowId="sign-up-or-in"
          onSuccess={(e) => console.log(e.detail.user)}
          onError={(e) => console.log('Could not log in!')}
        />
	);
};

Utilize the React SDK Hooks and Functions

Descope provides many different hooks to check if the user is authenticated, session is loading etc. You can use these to customize the user experience:

  • 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.
  • useUser: Returns information about the currently authenticated user.
  • sessionToken: The JWT for the current session.

Note

For the full list of available hooks and functions, refer to the Auth Helpers Doc.

App.js
import { useCallback } from 'react'
 
import { useDescope, useSession, useUser } from '@descope/react-sdk'
import { Descope } from '@descope/react-sdk'
import { getSessionToken } from '@descope/react-sdk';
 
const App = () => {
  const { isAuthenticated, isSessionLoading } = useSession()
  const { user, isUserLoading } = useUser()
 
  const exampleFetchCall = async () => {
    const sessionToken = getSessionToken();
 
    // Example Fetch Call with HTTP Authentication Header
    fetch('your_application_server_url', {
      headers: {
        Accept: 'application/json',
        Authorization: 'Bearer ' + sessionToken,
      }
    })
  }
 
  return <>
    {!isAuthenticated &&
      (
        <Descope
          flowId="sign-up-or-in"
          onSuccess={(e) => console.log(e.detail.user)}
          onError={(e) => console.log('Could not log in!')}
        />
      )
    }
 
    {
      (isSessionLoading || isUserLoading) && <p>Loading...</p>
    }
 
    {!isUserLoading && isAuthenticated &&
      (
        <>
          <p>Hello {user.name}</p>
          <div>My Private Component</div>
        </>
      )
    }
  </>;
}
 
export default App;

Add Logout Functionality

You can use the React useCallback hook to create your logout function.

useDescope(): Returns further operations related to authentication including logout.

App.js
import { useCallback } from 'react'
 
import { useDescope, useSession, useUser } from '@descope/react-sdk'
import { Descope } from '@descope/react-sdk'
import { getSessionToken } from '@descope/react-sdk';
 
const App = () => {
  const { isAuthenticated, isSessionLoading } = useSession()
  const { user, isUserLoading } = useUser()
  const { logout } = useDescope()
 
  const exampleFetchCall = async () => {
    const sessionToken = getSessionToken();
 
    // example fetch call with authentication header
    fetch('your_application_server_url', {
      headers: {
        Accept: 'application/json',
        Authorization: 'Bearer ' + sessionToken,
      }
    })
  }
 
  const handleLogout = useCallback(() => {
    logout()
  }, [logout])
 
  return <>
    {!isAuthenticated &&
      (
        <Descope
          flowId="sign-up-or-in"
          onSuccess={(e) => console.log(e.detail.user)}
          onError={(e) => console.log('Could not log in!')}
        />
      )
    }
 
    {
      (isSessionLoading || isUserLoading) && <p>Loading...</p>
    }
 
    {!isUserLoading && isAuthenticated &&
      (
        <>
          <p>Hello {user.name}</p>
          <div>My Private Component</div>
          <button onClick={handleLogout}>Logout</button>
        </>
      )
    }
  </>;
}
 
export default App;

At this point, you're done with the frontend. If you would like to also handle Session Management in your backend, keep on reading!

Continue with Backend SDK

If you would like to also handle Session Management in your backend, keep on reading by selecting your backend technology below:

Checkpoint

Your application is now integrated with Descope. Please test with sign-up or sign-in use case.

Need help?

Customize

Now that you have the end-to-end application working, you can choose to configure and personalize many different areas of Descope, including your brand, style, custom user authentication journeys, etc. We recommend starting with customizing your user-facing screens, such as signup and login.

Customize

ArrowRight
Was this helpful?

Previous

Next.js

Next

Python

On this page

React QuickstartContinue with Backend SDKCustomize