I am trying to build a custom UI for Auth0 MFA functionality. I would like to use my own UI (in a React application) to trigger MFA enrollment and challenges under certain conditions.
Following this tutorial (Authenticate Using the Resource Owner Password Flow with MFA), I can use the ‘Resource Owned Password’ flow to extract an MFA token for the database sign-in case. However, I am working on the social sign-in case now (specifically with the Google suite), and it is unclear to me how to extract the MFA token necessary to trigger QR enrollment and MFA challenges. The linked tutorial describes how to do it for the database connection case, but not the social sign-in case.
Does such an API for social sign-in exist? If so, can you give me an example (in code) how this is done?
The ROPG works for when the password is located in the authorization server - in this case, Auth0. For Social connections, we do not have the password, but rather request the external identity provider to do the verification for us.
I recently wrote a post about this, maybe it can provide some further explanation on why this is not possible:
Is it possible to use something other than ROPG to achieve what I am trying to do for social sign-in?
If not, I suppose the only way to proceed is to modify the UI via the custom MFA page (which is unpleasant, since I’d like to write the page directly using React) for the social sign-in case. However, this would prevent me from doing more sophisticated MFA triggers, since I presume these UI modifications only apply to the initial login/QR enrollment page.
@jon6 Social Login flows have to be interactive (unless a session already exists in Auth0). There is no way to make them non-interactive at the moment.