Implementing MFA Authentication with Client SDKs

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

OIDC Configuration

If you're using our SDK as an OIDC client with our Federated Apps, you can initialize the oidcConfig parameter with the following items:

• applicationId: This is the application id, that can be found within the settings of your Federated Application
• redirectUri: This is the url that will be redirected to if the user is unauthenticated. The default redirect URI will be used if not provided.
• scope: This is a string of the scopes that the OIDC client will request from Descope. This should be one string value with spaces in between each scope. The default scopes are: 'openid email roles descope.custom_claims offline_access'

Sign-Up, Sign-in, or Sign-Up-Or-In

The next step after adding the Descope client SDK within your application is to utilize one of the Sign-Up, Sign-in, or Sign-Up-Or-In functions for the supported authentication methods. Once you have successfully received a JWT from the authentication method, you should store it for the next step in the MFA process.

MFA the user's authentication

Now that you have a valid JWT for your authenticated user, you can utilize Sign-in or Sign-Up-Or-In for one of the supported authentication methods, adding the user Login Options. This example will focus on the mfa parameter of the Login Options; however, for further details on Login Options, navigate here.

The below example implements MFA authentication via OTP Sign-In after the user successfully signed up via TOTP Sign-Up. After a successful MFA sign-in, you will need to process the verification code via OTP Verify. After verifying, the user will then have MFA authentication.

// Args:
//    loginId: email or phone - becomes the loginId for the user from here on and also used for delivery
const loginId = "email@company.com"
//    deliveryMethod: Delivery method to use to send OTP. Supported values include "email", "voice, or "sms"
const deliveryMethod = "email"
//    loginOptions: login options for MFA, stepup, or custom claims. Ex: {stepup: true, mfa: false, customClaims: {}}
const loginOptions = {mfa: true}
//    token: refresh token from the successful sign-in of the user
const token = "xxxxxx"
 
const resp = await descopeClient.otp.signIn[deliveryMethod] (loginId, loginOptions, token);
if (!resp.ok) {
  console.log("Failed to initialize MFA flow")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully initialized MFA flow")
}