How to Implement MFA in PowerApps Login Screen?

Recently I received many requirements for MFA (Multi-Factor Authentication) in PowerApps login screen. So, let’s deep dive into how to implement MFA in the PowerApps login screen in this blog. 

What is MFA (Multi-Factor Authentication)?

Multi-factor Authentication: In this method, the user needs to authenticate twice or more than that.

OK. Now we will see how we can achieve the above demo video.

PowerApps Screen

Here I have created two PowerApps screen using canvas app.
1. Login Screen – User keys in login details.
2. Application Screen – User will navigate to this screen after successfully login.

Login Screen

User Login

My Login screen consists of Labels, Text inputs and buttons. Follow below steps to create your login screen

• Add user name label and text input
• Password label and text input
• Login button.
• Create Data Connections
• Create a SharePoint list to store the user credentials.

• Add SharePoint list data connection.
• Also add Office 365 outlook connection to send OTP.
• Set the Mode of password text input to Password to mask the data.

Formula on Login Button:

If(
!IsBlank(
LookUp(
'User Details',
UserName = TextInput1.Text And UserPassword = TextInput1_1.Text
).UserName
),
UpdateContext({otpGrp: true}),
Notify("Invalid User or Password. Please conatct your System Administrator")
);
Set(
otp,
100000 + RoundDown(
999999 * Rand(),
0
)
);
If(
!IsBlank(
LookUp(
'User Details',
UserName = TextInput1.Text And UserPassword = TextInput1_1.Text
).UserName
),
Office365Outlook.SendEmail(
LookUp(
'User Details',
UserName = TextInput1.Text And UserPassword = TextInput1_1.Text
).UserEmail,
"OTP to login",
"Your OTP is: " & otp
)
);

OTP Section

We will use this section to facilitate our MFA in PowerApps login Screen.

• Create a group of OTP input, Resent OTP button and Confirm OTP icon.
• Set visibility of this group to otpGrp.
• On select of Confirm OTP icon is below formula

If(otp=Value(TextInput3.Text),Navigate(AppScreen),Notify("Ivalid OTP"))

Formula on select of Resend OTP:

Set(
otp,
100000 + RoundDown(
999999 * Rand(),
0
)
);
Office365Outlook.SendEmail(
LookUp(
'User Details',
UserName = TextInput1.Text And UserPassword = TextInput1_1.Text
).UserEmail,
"OTP to login",
"Your OTP is: " & otp
)

Application Screen

Add a success screen to show successful login.

Whoopee !! Our Multi-Factor authentication login screen is ready.

Hope you all will like this post. 

You may also like: How to get started with Microsoft Fluid Framework Preview