React OIDC Client Quickstart
This guide walks you through how to integrate Descope into your React app as an OIDC client, using redirect-based login with Federated Apps.
Wrap Your App with AuthProvider
In your root component (e.g., App.tsx
), wrap your app in AuthProvider
and configure OIDC by enabling oidcConfig
.
You may also pass a full oidcConfig
object to customize settings such as redirectUri
, scope
, and applicationId
. Read more in our Client SDK docs section.
Trigger Login with Redirect
Use the useDescope()
hook and call sdk.oidc.loginWithRedirect()
to start the login process.
loginWithRedirect
Parameters
You can pass any of the following parameters into the loginWithRedirect
function to provide additional info to the OIDC provider:
redirect_uri
: A custom URI that overrides the default redirect after login. This will default to being the current URL.login_hint
: A hint to Descope of the user identifier (e.g., email address). This will pre-fill theform.externalId
context key in the flow you're redirected to.
Redirect Back and Automatic Session Handling
After a successful login, the OIDC provider will redirect the user to your app. The AuthProvider
will automatically process the returned tokens and establish a session.
No additional code is needed on the redirect page — just ensure the app is wrapped with AuthProvider
.
Access User and Session Info
You can use useSession()
and useUser()
to access authentication state and user info.
Logout the User
To log out, you can call sdk.logout()
for local session clearing, or sdk.oidc.logout()
for a full OIDC-compliant logout with redirect:
You're All Set!
Your React app now uses Descope as an OIDC provider with redirect-based login, logout, and session management.
Checkpoint
Your application is now integrated with Descope. Please test with sign-up or sign-in use case.