https://descope.com logo
Join Slack
Powered by
How can I integrate Descope into my react app?
# ask-a-descoper
c
How can I integrate Descope into my react app?
✅ 1
d
Hi, I'm Descope's AI assistant. I'm reviewing your question and will provide a response shortly.
Integrating Descope into a React Application 1. Install the SDK — Use the following command to install the Descope React SDK:
Copy code
npm i --save @descope/react-sdk
2. Wrap Your App with 
AuthProvider
 — In your 
index.js
, wrap the entire application with 
<AuthProvider />
using your Descope Project ID (found in the Descope Console):
Copy code
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>
);
You can also pass an optional 
baseUrl
parameter if you're using a custom domain (e.g., 
<https://auth.company.com>
). 3. Add the Descope Flow Component — In your 
App.js
, render the 
<Descope />
component to display your authentication flow UI:
Copy code
import { Descope } 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!')}
        />
    );
};
• 
flowId
— the ID of the Descope Flow you want to render • 
onSuccess
— callback fired when authentication succeeds • 
onError
— callback fired on failure 4. Use SDK Hooks for Session & User State — Descope provides built-in React hooks to manage auth state: • 
useSession()
— exposes 
isAuthenticated
and 
isSessionLoading
• 
useUser()
— exposes 
user
object and 
isUserLoading
• 
useDescope()
— exposes 
logout
and other auth utilities • 
getSessionToken()
— retrieves the current session JWT for API calls
Copy code
import { useDescope, useSession, useUser, getSessionToken } from '@descope/react-sdk';
const { isAuthenticated, isSessionLoading } = useSession();
const { user, isUserLoading } = useUser();
const { logout } = useDescope();
5. Add Logout — Use the 
useCallback
hook along with 
logout()
from `useDescope()`:
Copy code
const handleLogout = useCallback(() => {
    logout();
}, [logout]);
6. Make Authenticated API Calls — Pass the session token in the 
Authorization
header when calling your backend:
Copy code
const sessionToken = getSessionToken();
fetch('your_application_server_url', {
    headers: {
        Accept: 'application/json',
        Authorization: 'Bearer ' + sessionToken,
    }
});
Let us know the next steps by replying with one of the following phrases: 1. 
This issue is now resolved
2. 
Would like another response from AI
3. 
Need assistance from human support
c
2
d
Integrating Descope into a React App 1. Install the React SDK — Use the following command to install the SDK:
Copy code
npm i --save @descope/react-sdk
2. Wrap Your App with 
AuthProvider
 — In your 
index.js
, wrap your application with 
<AuthProvider />
using your Descope Project ID:
Copy code
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>
);
3. Add the Descope Flow Component — In your 
App.js
, render the 
<Descope />
component to trigger your authentication flow:
Copy code
import { Descope } 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!')}
        />
    );
};
4. Use SDK Hooks for Session & User State — Descope provides built-in hooks to manage authentication state: • 
useSession()
— provides 
isAuthenticated
and 
isSessionLoading
• 
useUser()
— provides 
user
and 
isUserLoading
• 
useDescope()
— provides utilities like 
logout
• 
getSessionToken()
— retrieves the JWT for authenticated API calls
Copy code
import { useDescope, useSession, useUser, getSessionToken } from '@descope/react-sdk';
import { Descope } from '@descope/react-sdk';
import { useCallback } from 'react';
const App = () => {
  const { isAuthenticated, isSessionLoading } = useSession();
  const { user, isUserLoading } = useUser();
  const { logout } = useDescope();
  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>}
    {isAuthenticated && <p>Hello {user.name}</p>}
  </>;
};
5. Add Logout Functionality — You can implement a logout function using the 
useDescope()
hook:
Copy code
const handleLogout = useCallback(() => { logout() }, [logout]);
This setup will allow you to integrate Descope authentication flows into your React application.
Let us know the next steps by replying with one of the following phrases: 1. 
This issue is now resolved
2. 
Would like another response from AI
3. 
Need assistance from human support
c
3
d
@Rahul Rijhwani - please assist here
c
1
d
Thank you - we have marked this as resolved, but feel free to reach back out in a new thread if you need additional info.
5 Views
Open in Slack
Previous
Powered by