MFA using our own custom UI

I am using AuthJS and have custom login form, which is working fine. When I enable MFA for my user, after login I am being redirected to OKTA hosted factor screen. Instead I want to use my own custom screen.

I saw in one of the forum post that we can’t use Okta Signin widget, and have to use low level library such as AuthJS.

However, I am finding it hard to implement it using AuthJS as I could not find any post to implement the same. After login the status that I am getting is SUCCESS not MFA_REQUIRED, so kind of stuck there, would appreciate any help in that direction.

First of all - widget is totally capable of dealing with this sort of challenges, so I’d recommend using it.

Not quite sure, how from your custom login screen user is redirected to Okta factor screen, unless you do that on purpose. Maybe you can elaborate a bit more about this moment.

Implementing all those flows is a pain, unless you want to limit your users on factors supported etc. I had to do that once, and we only chose one factor to limit the variety of screens to develop/support. Also, don’t forget about situations where users can be locked/forgot password/…

Bottom line - if possible, switch to widget, unless you have strong reasons not to do that. Just my 2 cents, please don’t take it as a directive :slight_smile:

Thanks for answering my query.

I couldn’t make sign-in widget work with MFA custom screen What I got was OKTA hosted screen. The I went to the forums and found out it’s not possible using Sign-in widget. If you know how to make it work with SignIn widget or have some link please let me know.

With AuthJS plugin
In OKTA application I enabled MFA from security and sign-on policy etc and enrolled a user for Google Authenticator. I mean whatever is required to enable MFA I followed from the documentation and I am able to see the MFA screen and able to successfully login as well.

Only thing is instead of using OKTA’s factor screen I wanted to use mine. So, I was trying to understand the code flow and how it’s working and how can I achieve that.

Looking at AuthJS plugin documentation, I was expecting in case of MFA after entering Username and password transaction status should be MFA_REQUIRED, however the status I am getting is SUCCESS.

So, little confused how redirection is happening for MFA screen to show up?

Hi Vivek,

Sorry, I misunderstood your requirements then. You are correct, widget uses its own screens for MFA, you can’t customize them (unless you want to rewrite the widget, which is possible also).

Let me ask you about the user: if you go to the okta standard login screen and try to login as this user, do you see MFA being requested? I have a feeling like something wrong with the way you configured your policy. Please validate/confirm.

MFA is being requested there is no issue with MFA, after entering the factor I am able to login as well. Functionally it’s working as expected.

I only want to customize the user experience, instead of showing OKTA hosted MFA screen. I want to show my own.

Hi Vivek, if you want to build your own experience, you would need to either customize the widget (styles, etc) or build your own login screen using okta-auth-js.

Are you trying to say that with Okta login screen you see MFA being requested, but when you try to build your own, you are not?

I am sorry if I am not clear, I am asking how this code flow works with MFA configured? In the doc it says after entering username and password, STATUS that we get is MFA_REQUIRED, however I am getting as SUCCESS. Even though status is SUCCESS I am being redirected to OKTA hosted MFA screen.

Hi @vivekprm

Can you please provide a sample code from okta-auth-js to better understand the scenario you are experiencing?

Hi @dragos ,

Thanks for replying.

When I enabled MFA from the security > Authentication > Sign-on policy, I was seeing local MFA screen. But when I enabled MFA from application sign-on policy it shows Okta hosted MFA screen.

As mentioned in this post

Was wondering why different behaviours in both the cases?

Hi @vivekprm

Under Security >> Authentication >> Sign On, you are setting up an org level MFA (MFA prompt when logging in), while under the application you are setting up an application level MFA (MFA prompt when accessing directly the application).

Hi @dragos
I have the same issue and the policy is on the MFA app level (app - sign-on - policy), for this case the sign-in return success but the authoroze throw execption login_required .

So the question is how to handle the MFA app level with custom ui


Hi @zouhir.a.job

I don’t think there is a way to make it work as redirection happens from okta Authorize end point.

In our case we were using same okta account across teams to use same user base.
So it would have been ideal if we could control at app level.

As a workaround what we did is we created different group and assign the group to application and at org level enable MFA for that group.

Not sure if it helps…

@vivekprm Thanks a lot for the replay. the workaround make sens but I’m surprized that MFA app level case is not support through the API …

I’m running into this exact problem with okta-auth-js and MFA. signIn returns “SUCCESS” (in fact nothing in the response body indicates MFA), and getWithoutPrompt says re-authentication or MFA is required. It’s really disappointing to discover that MFA isn’t supported by okta-auth-js.