Sign In Masterpost

Part 3: Sign In

Link to the template here.

The previous post explained how to let a user sign up for your app, as well as explaining how to make one Screen function as a Sign In screen and a Sign Up screen with a few minor tweaks.

This post will explain how to sign a user in. This post will also show you how to log a user in with saved details.

When the user clicks the Sign In button, which is the Button ‘signinup’ showing the text ‘Sign In’, we will call the Sign In component’s ‘sign in’ function.

If the user isn’t verified, we’ll ask them to verify their email.

If there is an error signing the user in, the error message will display.

If the user is verified and there is no error signing them in, we’ll call the remember_details_cond function and then show whatever the first screen of the app itself is.

As we saw in the last post, the function remember_details_cond will save a user’s email and password as stored variables if the user has set the ‘remember my details’ Switch to TRUE.

But how do we sign a user in with these details?

We’ll actually do this before the user has the chance to press any buttons.

When the Sign In Screen opens, we’ll check if the user has saved values for their email and password as stored variables in their device. This is simply done by seeing if the stored variables ‘email’ and ‘password’ are more than 0 characters long.
(NB: this function uses the pink length of’ block from the Text drawer of blocks, not the blue ‘length of’ block from the List drawer of blocks!)

If they have saved values for ‘email’ and ‘password’, we’ll sign them in with these details.

If they haven’t, we’ll show them the Sign Up screen.

But what if the user didn’t save their details, and now they’ve forgotten their password?

The next post will show you how to use the ‘Recover Password’ function of the Sign In component.

3 Likes