Custom MFA Screens Through Library

Help
,
1

Hello,
I’m trying to see if there is a clean and easy way to create my own custom MFA screens after an embedded login using the auth0-js library instead of using the Auth0 Universal Login MFA screens.

I have found this documentation here: Customize Multi-Factor Authentication Pages

However it suggests using the ROPF in order to accomplish this which would require the work to take place in a backend service and would require both the client_secret and the users password to be sent over the wire to the application which I would prefer not doing if possible.

Is there another easier way to accomplish this at all using either of the js libraries?

For some additional information, the reason I need custom MFA screens is that although I have multiple MFA options enabled in my tenant, only certain factors should be available for certain users (eg. Email should be optionally displayed), and I would like users to land on the ‘try a different method’ screen before being automatically sent an MFA code to their previously selected option.

Thank you,
Evan

2

Hi @Evan.Kellogg,

I figured out a way to do this easily!

const parseJwt = (token) => {
   try {
	  return JSON.parse(atob(token.split('.')[1]));
    } catch (e) {
	  return null;
   }
};

const decodedToken = parseJwt("{{ requestToken }}");

decodedToken.clientId

You can use the clientId to set a different logo for example your applications…

Check my full answer here:

I hope it is of some use for you!