Power App PIN pad locking. Unlock with password - PIN

I needed to create a locking screen for one of my apps, which could be unlocked by PIN.

It was a separate screen, which user will be sent to if they were inactive for period of time, similar to an Online Banking App: you get 30 sec warning that screen will be locked and you need to log in again if "Confirm" button is not clicked.

I will share the timer part some other day, but for now let me share PIN pad.

I used gallery for buttons, I peaked this idea from one of Reza Dorrani's video where he used it for buttons to switch between tabs.

In this example on success app navigates to next screen.

Although if you need for app to send you back to the screen you were chucked out it is better to use variable .

Set it to Home screen On Start and then set var to Back() so it takes you to most resent screen. 

You cannot use Back() for other buttons on active screens, otherwise it will take you to PIN pad screen. Hope it makes sense... 

Anyway, enough chit-chat. 

Coding below and video to demo App in action.

For App On Start we setting varPIN to Blank()     

Set(varPIN,Blank())

 Eye Icon lets us peak the PIN we entered . OnSelect property

If(
    PinV = varPIN,
    UpdateContext(
        {
            PinV: Concat(
                Sequence(Len(varPIN)),
                "*"
            )
        }
    ),
    UpdateContext({PinV: varPIN})
)

A very simple code for PIN**** label  Text property

PinV

PINpad is a Gallery control and Items property is 

["1","2","3","4","5","6","7","8","9","C",0,"OK"]

And lastly for Buttons OnSelect property

If(

    ThisItem.Value = "OK" && varPIN = "0000",

    Navigate(Screen2) && Set(

        varPIN,

        Blank()

    ) && UpdateContext({PinV: ""}),

    If(

        ThisItem.Value = "C",

        Set(

            varPIN,

            Blank()

        ) && UpdateContext({PinV: ""}),

        If(

            ThisItem.Value <> "OK" && ThisItem.Value <> "C",

            Set(

                varPIN,

                varPIN & ThisItem.Value

            ) && UpdateContext({PinV: PinV & "*"})

        )

    )

)

If you wish to say thank you please donate to the charity I use to work for.

Donate here