Unanswered

Login in the Canvas Using OTP

(0) Share

Report

Posted on by Sidhant_02

986

Hi everyone,
I had designed a normal login page where Username and Password are checked from a share point list. But now I wanted to add an option of Login-In using One Time Password. So for that I added a new button on the login screen named 'Login with OTP' like:

Note: When any user uses the normal login (without OTP), a check is done to see if the user has filled the additional details or not (along with checking the credentials), so similarly when user selects the Login with OTP I want to perform a similar check (after user gets the OTP, they enter it it should first check if the additional details are filled or not. If they are not then navigate to Additional Details page-> then Home screen (after all the fields in additional page is filled); else if the user has already filled the additional details then navigate them to Home screen (after entering the OTP)
So for the above flow I did use the following expression:

On Send OTP button (on OTPLogin screen):

The above expression is working fine, I am able to get the OTP. But there is one issue which I thought as I am generating the number using random(), in some cases it might generate a number 0.009876612 and when it is multiplied by 10000 and applying RoundDown, output will be 98, here the length of the OTP will be 2 instead of 4 😕 this was one minor issue.
Like this:

The second issue is:

The above expression is on 2nd button (which is Login: that user clicks on after entering the OTP), here after the user enters the OTP, as I had mentioned earlier I want to perform a check if the additional details are filled or not for which I have already created a SharePoint list named AdditionalDetails (In power Apps it is named as AdditionalDetails_1).

Example: Assume a user Jimmy who has already filled the additional details and he opts for Login with OTP option-> Enters the official email and gets the OTP -> Enters the OTP -> He should be navigated to Home screen not AdditionalDetails page (as details are already filled in)

But on Login button On-Select when a user enters the correct OTP it is navigating to Home screen but also displaying the notification message: The OTP you entered is incorrect & the Login with OTP screen was not getting reset (the text inputs for OTP was visible which should be only be visible after user enters email and click on Get OTP button)

The OTP TextInput and the login button will only be visible once user enters an email id and clicks on Generate OTP button, so for the textInput (to enter OTP) and the Login button I have used a variable which is set to True only when Generate OTP is clicked which is:

For reference:
Login Details (SharePoint List):

AdditionalDetails (ShatrePoint List):

The 3rd requirement that I had was: If a user opts for Login with OTP option and when they enter the email, an OTP should only be sent to the user email id if and only if they are registered in the application (here the data must be present in Login list: which has their credentials) if they are not registered in the application then a message should be shown please register first to login

So if anyone can help me with these requirements, it would be helpful (as 50% part is implemented) only some of the test case scenarios that I thought of I have mentioned here and if you feel any updates would be helpful (in the expression) do share them as well.

Also there is one query that I have posted on Forum 2 weeks back, so if you guys can have a look at it, it would be quite helpful as well:
Block user after entering invalid details after few wrong attempts

If you have some time please have a look at this: @RezaDorrani

Regards,
Sidhant

I have the same question (0)

All responses (19)

Answers (0)

Sidhant_02 986 on at

Like (0)

Report

Re: Login in the Canvas Using OTP

I am able to resolve the error message part (on submit of correct OTP) and clearing all the fields and resetting them made few changes:

So now I tried testing it using a user credentials who has not filled the Additional Details yet, in the above expression I am checking whether the Email is present in the AdditionalDetails SharePoint list or not if it's not present then directly navigate to AdditionalDetails screen. But now even if a user has not filled the Additional Details they are navigated to Home screen after entering the OTP.

Also the email that is sent in its sub-title (just above) can it be changed like a dummy application email (the highlighted part in the image below)

I tried the following:

But in this as well even if a user has entered the additional details they are being navigated to the Additional Details page (the second if statement is not getting checked)

I even tried the following:
If(
IsBlank(
LookUp(
AdditionalDetails_1,
Email = TextInput6.Text
).Form
),

If(
Text(OTPGenerator) = TextInput6.Text,
Navigate(Home),
Notify("Incorrect OTP",NotificationType.Information);

), //Inner If-block
/*
Notify(
"Invalid OTP or Email",
NotificationType.Error,
3000
)
*/
Notify("Please fill your Additional Details",NotificationType.Information),
Navigate(AdditionalDetails)
);
Reset(TextInput6);
Reset(TextInput9);
Set(Varvisible,false);

(Even after entering correct OTP, its showing Incorrect OTP message)
o/p: It was displaying Incorrect OTP notification. Please let me know what's wrong and how to fix it.

Regards,
Sidhant.

Was this reply helpful? Yes No
Pstork1 68,324 Most Valuable Professional on at

Like (0)

Report

Re: Login in the Canvas Using OTP

I would suggest doing a few things.

1) Send the OTP password formatted as Text. use Text(OTPPassword,"0000000#". That will fill in leading zeros if the password doesn't have enough digits.

2) Check for the registration information before sending them the OTP. That will also solve the navigation problem because a user who needs to fill in information will never get an OTP.

Was this reply helpful? Yes No
Sidhant_02 986 on at

Like (0)

Report

Re: Login in the Canvas Using OTP

Hi @Pstork1 ,
So where should I append the 0's and these zeros should be appended to the OTP variable only when the length of OTP generated using random is less than lets say 4 and then while checking how will it differentiate between updated OTP (with appended 0's and shorter one)
Example: Assume that random function generates an OTP: 25 so now if add 0's at start or end then while comparing how will it validate it.
So the above expression is on the OTP login screen so how should I proceed could you share some steps?. Also for the second point how should the check be done as you said before sending the OTP check if the given user is registered so in my case the user has to enter the email address so before sending the OTP, I want to check if the given email address is registered or not in my SP list (named Login list), which is:
Like if Sam enters the email address an OTP should be sent but lets say if John who is not registered and he enters his email address then an OTP should not be sent instead a message should be shown "Please Register to use the functionality"

Regards,
Sidhant.

Was this reply helpful? Yes No
Pstork1 68,324 Most Valuable Professional on at

Like (1)

Report
Re: Login in the Canvas Using OTP

You would use the formula when you do the Set() after rounding down. By using a Text function to format the results of your rounding you can convert the random onetime password into a specific length string with leading zeros.

Text(OTPPassword,"0000000#")

Was this reply helpful? Yes No
Sidhant_02 986 on at

Like (0)

Report

Re: Login in the Canvas Using OTP

Hi ,
I will try this in the application and let you know if I need any help. But I have also mentioned in my previous response that how to append 0's when the length is than a specific value (here 4) and how will it differentiate between the original and updated, (I have explained the scenario in my previous reply could you just have a look at it again @Pstork1 )

Thanks,
Sidhant

Was this reply helpful? Yes No
Pstork1 68,324 Most Valuable Professional on at

Like (1)

Report

Re: Login in the Canvas Using OTP

You aren't appending 0's with the formula I am suggesting. You are prepending them. So if The OTP generator rounds the number to 258 you would get a password of 00000258. If it returned 34567 you would get an OTP of 00034567. It would always be 8 characters no matter what the number was.

Was this reply helpful? Yes No
Sidhant_02 986 on at

Like (0)

Report

Re: Login in the Canvas Using OTP

Okay understood so we are adding 0's at start (prepending). In my case the OTP generated is always a 4 digit number so if the OTP generator generates an OTP of length 4 then I was saying it should not prepend anything as it is valid, but let's say if it generates an OTP of length of 2 like 27 then in that case if we Prepend 0's to it and send an email to user (for the OTP) and user enters that OTP (with prepended 0's) so will it be considered as Valid as the OTP generated original length was 2 and now it's modified as 4 so how will check be valid, is there any change that needs to be made?.

This is the expression: (To Generate OTP):

This is the expression after user Enters the OTP and submits (here the OTP check happens)

Regards,
Sidhant.

Was this reply helpful? Yes No
Pstork1 68,324 Most Valuable Professional on at

Like (1)

Report

Re: Login in the Canvas Using OTP

If you use a format string of "000#" then you will always end up with a 4 digit number. If the generated number is 2356 then the OTP would be 2356. But if the generated number is 27 then the OTP would be 0027. So the value you store as the OTP will always be 4 digits.

Was this reply helpful? Yes No
Sidhant_02 986 on at

Like (0)

Report

Re: Login in the Canvas Using OTP

Hi @Pstork1 ,
So as per your reply I did one addition after setting the OTPGenerator variable (of length 4). So to revisit my point how the system will compare the new value (with prepended zero's) and without 0's so for that I have added a if condition to check if the length is less than 4 then I have prepended 0's else use the normal string generated by random function.

So is this correct?.

So now I am getting the OTP but the issue which I have mentioned in my query or one of the replies even after entering the correct OTP I am being displayed Incorrect OTP Notification message on Screen

This is the expression On-Select of the Submit button which is visible after user enters the OTP.
So it should check if the user has already filled the Additional Details or not (which is a form with some fields like First Name, Middle Name, Secondary contact) through the email entered at start to send the OTP. For which I have created an SP List named AdditionalDetails, if the details are already filled user should be shown the Home screen else the Additional details screen.

So now the issue is I was trying out on a user who has already registered in my app and filled the Additional Details. So after entering the correct OTP it directed me to the Additional Details screen instead of navigating to Home Screen:

Here is the expression:
If(
IsBlank(
LookUp(
AdditionalDetails_1,
Email = TextInput6_1.Text
).Form
),

If(
Text(OTPGenerator) = TextInput9_1.Text,
Navigate(Home),
Notify("Incorrect OTP",NotificationType.Information);

), //Inner If-block
/*
Notify(
"Invalid OTP or Email",
NotificationType.Error,
3000
)
*/
Notify("Please fill your Additional Details",NotificationType.Information),
Navigate(AdditionalDetails)
);
Reset(TextInput6_1);
Reset(TextInput9_1);
Set(Varvisible,false);

In my case the Inner If block is not getting executed instead directly the else part which is the false part is getting executed which is I am expecting that after the OTP is compared with the Input from (TextInput9_1) user it should execute the Navigate(Home) instead it jumps out and executes the last statement .
(In short if the user has already filled his/her additional details then they should be shown the Additional details page and directly be navigated to Home screen after entering the correct OTP)
So could you please let me know what is going wrong here?.

Regards,
Sidhant.

Was this reply helpful? Yes No
Pstork1 68,324 Most Valuable Professional on at

Like (0)

Report

Re: Login in the Canvas Using OTP

The OTP is now a text string with leading zeros. You don't need to check the length, just see if it matches the OTP that you save as a 4 digit string.

For your other question what kind of column is Form? If its not a column then you should be using IsEmpty() not isBlank(). I suspect that is the problem.

Was this reply helpful? Yes No