Sign In Masterpost

Tutorials and DIY Guides
,
1

This topic will be a thread of posts explaining the different aspects of adding a Sign In component to your app and creating a new version of the Sign In template.

Link to the template here.

Part 1: Firebase

This post will walk you through creating a Firebase project, adding Email Authentication to the project, and adding your project to a Thunkable project.

You can also follow these steps to add a Firebase DB to your Thunkable project - just don’t follow the steps for adding email authentication to your project!

Create your project

Log in with google to console.firebase.google.com. On the console screen, click Click ‘Add Project’.

Console
Console1266×627 129 KB

Fill in the details for your project and click ‘Create Project’.

Create
Create1265×625 132 KB

Building your project can take a few seconds. Once your project is ready, you’ll be taken to the Project Overview page.

overview
overview1263×565 113 KB

Add Email Authentication

Click on the ‘Authentication’ option in the Develop sidebar.

authentication
authentication1270×625 71.8 KB

Click the button that says ‘Set up sign-in method’.

Email
Email1280×631 57.3 KB

If you hover your mouse over the ‘Email/Password’ option, you’ll see a pencil. Click this pencil to enable/disable Email + Password Authentication in your Firebase project. Click ‘Save’ to save these settings.

saveemail
saveemail1272×630 57.3 KB

Add your Firebase DB to your App Project

Click the gear icon next to the ‘Project Overview’ text, underneath the Firebase logo, to access the Settings page. You can find the Web API key in the General tab of the Settings page.

13
131280×631 64.4 KB

You can find the databaseURL in the ‘Service accounts’ tab of the Settings page.

45
451280×631 79.6 KB

To add these details to your Thunkable X App Project, click on your project title/app icon. This will show your App Settings in the Properties tab on the right-hand side of the screen.

Scroll down to the ‘Firebase Settings’ section and paste in your API Key and your database URL.

Firebase_Settings
Firebase_Settings800×440 1.91 MB

Your project is now connected to your Firebase DB!

3 Likes
2

Part 2: Sign Up

Link to the template here.

The Sign In template demonstrates the 4 functions of the Sign In component: Sign Up, Sign In, Sign Out, and Reset Password.

The Sign Up/Sign In functions will be demonstrated on the same screen. This screen looks so beautiful because it is based on a remix of the existing Sign In screen.

Sign Up Screen:

Sign%20Up%20Screenshot
Sign%20Up%20Screenshot1067×1864 43 KB

Sign In Screen:

Sign%20In%20screenshot
Sign%20In%20screenshot1054×1863 39.9 KB

Components

Because this is more complex than other Screens I have demonstrated in tutorials, I will show the component tree and explain which components are visible when a user is signing in or signing up.

signinupcomponenttree

Visible in both: Email Input, Password Input, RememberDetailsRow (containing RememberDetailsLabel and Remember_Switch), SignIn-Up, SwitchFunctionButton, and ResultLabel (when there is a result to be shown).

Visible only when signing up: Password Input 2

Visible only when signing in: ForgotPassword

Invisible Components: Alert1, Sign_In1

We’ll be setting the Title and Message of the Alert in the blocks, so you just need to set the Confirm Button text and the Cancel Button text for it in the Design tab.

alertsettings

Blocks

Begin by initialising some variables.

s1b1

We will initialize some stored variables that can store the user’s email and password, and some app variables that will be displayed as the text of different Buttons depending on whether the user is signing in or signing up.

The user will see a Button saying ‘Sign In’ when they sign in and a Button saying ‘Sign Up’ when they sign up.

The user will see an option to switch to signing up on the Sign In screen, and to switch to signing in on the Sign Up screen.

We can turn these settings into functions.

switchfunc
switchfunc754×534 65.2 KB

When the user switches to ‘sign in’, we’ll show them the text described above, we’ll show them a password recovery option, and we’ll hide the second password input box.

When the user switches to ‘sign up’, we’ll show them the text described above, we’ll show the second password input box, and we’ll hide the ‘forgot password’ Button.

Sign Up Blocks

When the user clicks the ‘Sign Up’ button, which is the Button ‘signinup’ when the text says ‘sign up’, they will call the ‘sign up’ function seen below.

signupblocks
signupblocks1012×332 59.9 KB

First, the blocks check if the passwords in both Password inputs match.

If they do, the ‘sign up’ function of the Sign In component will be called. The user will either be shown an error or will be asked to check their email to verify their email address.

Once they have verified their email address, they will be able to sign in.

The extra function saying ‘remember_details_cond’ is very simple: if the user has set the ‘remember my details’ switch to be true, the app will save their email and password as stored variables.

You can learn how to sign someone in with stored email and password details in the next post in this series.

3 Likes
3

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.

Screenshot
Screenshot899×376 52.2 KB

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.

saved_details
saved_details778×489 48.5 KB

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
4

Part 4: Reset Password

Link to the template here.

This post will explain how to add a Reset Password function to your Sign In screen.

The Sign In template lets users reset their password from the Sign In Screen, but you can also put this function inside your app.

This method will bring the user to another Screen in order to reset their password.

Accessing Reset Password Screen

On our Sign In screen, you can see that there is a Button that says ‘Forgot Your Password?’

Sign%20In%20screenshot
Sign%20In%20screenshot1054×1863 39.9 KB

When the user clicks this, an alert will show with the title ‘Forgot Password?’ and the text ‘You will be sent an email in order to reset your password.’

resetalertblocks
resetalertblocks692×347 31.7 KB

If the user confirms this Alert, they will be taken to the Reset Screen.

Reset Screen Design

resetscreen
resetscreen286×513 13.3 KB

This screen is very simple, with a Text Input, a ‘Reset Password’ button, and a ‘Back’ button. There is also an Error Label (which currently has no text) and a Loading Icon (currently set to invisible).

Reset Screen Blocks

resetscreenblocks

On this Screen, if the user clicks ‘Go Back’, they will be brought to the Sign In screen.

If they click ‘Send Reset Password Email’, the user’s stored password will be set to blank and we’ll show the Loading Icon.

A reset password email will be sent to the email address entered into the Text Input.

If there’s an error, the Error Label will display it.

If there’s no error, the user will be brought back to the Sign In screen.

Once they’ve completed the password reset process, they can sign in as usual.

What about if a user has successfully logged in in the past but now wants to sign out? The next post will demonstrate how to use the Sign Out function.

1 Like
5

Part 5: Sign Out

Link to the template here.

So your user logged in successfully, has been enjoying your app, and now wants to sign out. Of course, you have the best app ever, so it’s weird that someone would want to sign out. Maybe they want to make their friends create an account right now! Maybe they have a bunch of accounts because your app is that good!

Either way, it is frowned upon to trap users inside your app, so you have to give them a Sign Out button.

Design

signout
signout322×587 27.3 KB

This app also has an empty Label which will display any error the user has with signing out.

l1
l2

This sign-out method also uses the Alert component.
If you followed the previous post’s instructions about adding a Password Reset to your app, you already have an Alert in your app.

Blocks

signoutblocks
signoutblocks812×440 30.7 KB

When the user clicks the Sign Out Button, these blocks set the Alert’s Title to ‘Sign Out?’ and the Message to ‘You will be signed out of this account’.

If the user confirms this decision, we’ll clear the stored email and password and call the Sign Out function of our Sign In component.

If there’s an error, the Label I mentioned above will show the error.

If there’s no error, the user will be brought back to the Sign In Screen.

And that’s the Sign In component masterpost! Let me know if you have any questions or feedback in the comments.

2 Likes
6

What about automatic sign-in,am still having troubles with that

7

Hi there.i have solved by Jane before.now im going to send to you

Screenshot_2019-06-05_063639
Screenshot_2019-06-05_063639720×603 173 KB

I hope this will be help you :slight_smile:

1 Like
8

@jane this is what shows up a the sign-up

Screenshot_20190605-174539
Screenshot_20190605-174539600×1024 410 KB

9

can you share the copy link of your project?

11

Hi there,

I’d added a copy link to the first post in this thread, but I’ll add it to every post to make it easier to find.

Here it is again for the sake of convenience. :smile:

1 Like
12

https://x.thunkable.com/copy/4827ddb10afb48df76ef71a42ab8df21

thanks in advance

13

i have checked and checked again it still the same

14

Please read the messages I sent you about this app.

1 Like
15

Good work Jane! I really like your remember_details_cond function/flag so the user can choose to save and pre-populate their email and password.

I added a post on the Sign In Component a few weeks ago that included my video tutorials. Do you think we should merge the posts?

3 Likes
16

i think there is something wrong with your app … 1. reset password option is not working…
2. signout button is also not working
3. while starting app first it shows sign in screen then after 5-6 secs it shows login screen… how is this possible as you created both on a single screen…? please check this :grinning:

17

1.i didn’t add the reset button
2.To sign out from the app you have to go to the Feedback screen.-there you can find the Sign out option.
3.I don’t get you right

18

Hi there,

Thanks for catching this! There was an issue with the Alert, but it should be fixed now.
I had added in a block saying that when the Screen opens, show the Sign In page, with the idea that it would show when a user opened the Screen from the password reset or sign out Screen. Since it didn’t look great when the app opened, I took this block out.

I’ve updated the links reflecting these changes. Thanks for catching them! :grinning:

1 Like
19

ok mam let me check whether this works now or not… well this is really a great upgrade to the prev. sign in project if it works well.:sunglasses:

1 Like
20

Okay, i appreciate

21

Everything is alright .it is working fine now.:sunglasses:

1 Like