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