Auth Page Logic | To Do App | FlutterFlow for Beginners

Summary

This video tutorial guides viewers on setting up logic for a user interface with non-functional buttons, focusing on integrating Firebase authentication for sign-up and login processes. It covers configuring text fields, including password security features, and binding actions to buttons. The tutorial also addresses form validation, error handling, and conditional visibility for different user interface elements based on the active tab. Finally, it demonstrates testing the application and navigating between pages upon successful authentication.

Takeaways

• 🔧 The video focuses on setting up logic for a sign-up and login page using Flutter Flow.
• 🔄 The UI for the page is already set up, but the buttons need to be bound with actions for user interaction.
• 🔗 The backend services using Firebase are prepared to handle authentication for the logic defined.
• 📝 The user input for email, password, and confirmation password is required to create a user account.
• 🔑 The tutorial guides through selecting and configuring the correct action blocks for authentication.
• 📱 Flutter Flow recognizes text fields and their properties, which are used to bind data for authentication.
• 🛠️ Password fields are configured with security features like hiding the password and providing a clear field icon.
• 🔄 The 'submit type' for password fields is set to navigate to the next field or dismiss the keyboard.
• 📑 The video demonstrates creating a user document in Firebase and binding fields from the UI.
• 🚀 Automatic navigation after account creation is an option, but it's turned off to handle onboarding manually.
• 🔄 Conditional visibility is used to show and hide sign-up and login buttons based on the selected tab.

Q & A

What is the main focus of the video?

The main focus of the video is to set up the logic for a page with a user interface that includes buttons for signing up and logging in, ensuring they are functional and connected to Firebase authentication.

What backend services are mentioned as being prepared for the logic?

Firebase is mentioned as the backend service prepared for the logic, specifically for handling user authentication.

What are the two tabs that the user can interact with in the UI?

The two tabs in the UI are a 'Login Tab' and a 'Signup Tab', which allow users to either create a new account or log into an existing one.

How does the video suggest triggering the action flow for user sign up?

The video suggests using the 'onTap' event of the signup button to trigger the action flow for user sign up.

What is the purpose of the 'action flow editor' mentioned in the video?

The 'action flow editor' is used to define blocks of logic that should be executed when certain actions or conditions are met, such as a user clicking a button.

What authentication provider is used in the video for user account creation?

The video uses the email provider for user account creation, as it was the only one set up during the authentication setup.

How does Flutter Flow recognize text fields for binding?

Flutter Flow automatically recognizes text fields based on their widget names, which are used to bind data to actions within the action flow editor.

What is the significance of setting the submit type on a password field?

Setting the submit type on a password field determines the text of the button on the keyboard and the action it triggers, such as moving to the next field or dismissing the keyboard.

Why might the video suggest creating a user document in the same action as account creation?

Creating a user document in the same action as account creation is suggested to streamline the process by avoiding the need for an additional action, thus simplifying the workflow.

What is the role of the 'conditional visibility' widget in the video?

The 'conditional visibility' widget is used to show or hide UI elements based on certain conditions, such as which tab is currently selected, allowing for dynamic UI adjustments.

How does the video handle the navigation after a user signs up?

The video handles navigation after a user signs up by manually directing the user to an 'onboarding' page instead of automatically navigating to the login page, as is typical after account creation.

What is the purpose of form validation as discussed in the video?

Form validation is used to ensure that user inputs meet certain criteria, such as password length, before the data is accepted and processed, enhancing security and data integrity.

Outlines

00:00

🛠️ Setting Up UI Logic for User Authentication

The video begins by outlining the process of setting up the logic for a user interface that includes a sign-up and login feature. The UI is ready, but the buttons do not yet function. The focus is on binding actions to these buttons to enable user sign-up and login. It's mentioned that Firebase and authentication have already been set up in previous videos, so the backend services are ready for the logic that will be defined. The video then walks through the process of setting up the sign-up tab, explaining how to trigger actions when the user clicks the sign-up button. It introduces the action flow editor in Flutter, where logic for actions is defined, and demonstrates how to add action blocks and conditions. The process of creating a user account through Firebase authentication is detailed, including how to select the email provider and input fields for email, password, and confirmation password.

05:01

🔑 Configuring Text Fields and Authentication Logic

This paragraph delves into configuring text fields for password input, emphasizing security and usability features like the hide password icon and submit button types. It also covers setting up the confirmation password field and disabling autofocus to enhance the user experience. The video script explains how to bind text fields to widget states for dynamic data input. The authentication logic is further detailed, including creating a user document in the 'users' collection and setting default variable values to avoid null errors. The video also discusses conditional navigation after account creation, opting to handle it manually due to the presence of an onboarding page, and demonstrates how to add an additional action in the action flow editor to navigate users to the onboarding page after sign-up.

10:02

🔄 Adjusting UI for Conditional Visibility and Login Logic

The script moves on to address the need for conditional visibility of sign-up and login buttons based on the selected tab. It suggests adding an additional button and using a stack to manage which button is visible, then demonstrates how to set conditional visibility based on the tab bar's current index. The process involves checking the tab bar's current index against a condition to show or hide the buttons. The video also revisits the login button's logic, removing duplicated actions, and redefines the action block for logging in a user. It sets up navigation to the main tasks page after successful login and discusses the importance of form validation, showing how to wrap text fields in a form validation block and set validation criteria.

15:04

🔒 Implementing Form Validation and Final Testing

The final paragraph focuses on implementing form validation to ensure data integrity, such as checking for valid email formats and minimum password lengths. It explains how to set up validation options and error messages within the form validation block and demonstrates integrating validation logic into the action flow editor. The video shows how to test the sign-up feature, including form validation, and addresses any errors that arise. It also mentions setting up a logout button and testing the login feature, suggesting that viewers set up validation for the login form as a challenge. The video concludes with a reminder to check the users' collection in Firebase to confirm that a new user document has been created successfully.

Keywords

💡Flutter

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. In the video, Flutter is used to build the user interface, including buttons and text fields, for a login and signup page.

💡Firebase

Firebase is a platform developed by Google for creating mobile and web applications. It provides services like analytics, databases, messaging, and crash reporting. In the video, Firebase is used for backend services, particularly for authentication, to handle user sign-up and login.

💡Authentication

Authentication is the process of verifying the identity of a user. In the context of the video, it refers to the process of creating user accounts and allowing users to sign in using email and password, facilitated by Firebase Authentication.

💡Action Flow Editor

The Action Flow Editor is a tool within the Flutter Flow interface where developers define the logic for UI elements. In the video, it is used to bind actions to buttons, such as sign-up and login, and to define the sequence of actions that occur when these buttons are clicked.

💡UI

UI stands for User Interface, which is the space where interactions between the user and a device occur. In the video, the UI setup includes the login and signup tabs, as well as the email and password fields for user interaction.

💡Text Field

A text field is a UI element that allows users to input and edit text. In the video, text fields are used for email addresses and passwords. They are configured to be password fields with features like hiding the password and providing a clear field icon.

💡Conditional Visibility

Conditional Visibility is a feature that allows UI elements to be shown or hidden based on certain conditions. In the video, it is used to show or hide the signup and login buttons depending on which tab (login or signup) is selected.

💡Form Validation

Form validation is the process of checking user input to ensure it meets certain criteria before it is accepted. In the video, form validation is used to ensure that the password meets a minimum length requirement and that the email is in a valid format before the authentication process occurs.

💡Widget State

Widget State in Flutter refers to the current state of a widget, which can be used to manage and track changes. In the video, widget state is used to access the values from text fields and to determine the current index of the tab bar for conditional visibility.

💡Stack

A Stack in Flutter is a widget that positions its children relative to the edges of its box. In the video, a Stack is used to overlay the signup and login buttons, allowing them to be shown or hidden based on the selected tab.

💡Onboarding Page

An Onboarding Page is typically the first experience a user has with an app, often used to introduce features or gather additional information. In the video, after a user signs up and logs in, they are navigated to an onboarding page to collect their birthday and profile image.

Highlights

Setting up logic for a sign-up and log-in page using Flutter Flow.

Binding actions to buttons for user interaction.

Utilizing Firebase for backend services and authentication.

Creating user accounts with email and password through the sign-up tab.

Defining triggers for action flows based on user interactions.

Exploring the action flow editor for organizing logic blocks.

Selecting and configuring action blocks for authentication.

Setting up text fields for email and password with Flutter Flow.

Configuring password fields with security features like hiding the password.

Adjusting submit types for keyboard actions on text fields.

Disabling autofocus for text fields to enhance user experience.

Creating a user document in Firebase upon successful sign-up.

Manually navigating users to an onboarding page after sign-up.

Setting up conditional visibility for buttons based on the active tab.

Adding logic to the login button for user authentication.

Testing the UI and logic in Flutter Flow's test mode.

Implementing form validation for secure user input.

Using form validation to ensure password length and email validity.

Adjusting error border color for better visual feedback on validation errors.

Challenge for viewers to set up validation in the login form.

Transcripts

in this video we're going to set up the

logic for this page so all we've got is

the UI set up right here but none of the

buttons actually work so we're going to

bind our actions our logic to these

buttons so that the user can sign up and

log in now in the previous videos we

already set up Firebase right here and

authentication so our backend services

are prepared for the logic that we're

going to Define now all right so what do

we want to happen well we have two tabs

right here a login Tab and a signup Tab

and so let's start up with the signup

tab so when the user puts in their email

and their password and a confirmation

password and presses this button we want

them to be able to sign in we want to

create a user account for them okay so

where do we start with this logic well

we want this to trigger when the user

clicks on the button so let's select the

button and in flutter flow all of our

logic is defined in this second tab here

where we have our action flow Ed edor so

here you'll add actions blocks of logic

that you want executed and here you can

add it by clicking this button or if you

want to check for some condition first

and then execute some action based on

whether that condition is true or false

you could click on this but let's add an

action now I find that it's easier to

Define our action inside this action

flow editor so let's open that up and

this is the same thing as what we just

saw but we have more space now the first

thing to look at is our triggers up here

here that is what will be the event that

initiates this action flow whether we

have one action or multiple actions so

right now we have on tap so when the

user Taps this button then all of this

logic will execute if we go over here

there's no actions defined yet so let's

go back to over to our ontap and here's

our first action block so let's select

it here and you can see that we have all

the different action blocks that we have

available to us what we want to do is we

want to do something with authentic

ation so I know that it's in this

backend in database right here and we've

got a whole section devoted to Firebase

authentication so when we tore this open

we see a bunch of different action

blocks we have available and what we

want to do is we want to create a user

account now after we select the action

block then over here we'll be given the

options that are particular to that

action block if you want to change that

action block of course you can come in

here and select a different one but this

is the one that we want so let's just

walk through these options so the first

one is the off provider that is what

kind of authentication is this well back

when we set up our authentication we

only set up email at this point so

that's the only one that we can do right

here and then we have these next three

options where we have to pass this data

send this data to Firebase

authentication so we need to send an

email address a password and then a

confirmation password so let's set our

email field and you can see this is

pre-populated with a bunch of stuff

right here well where are these coming

from well flutter flow automatically

recognizes text Fields those are those

text inputs right here on the page and

we have three here and two in this tab

so that's why we're seeing five in our

action flow editor right here and these

names are coming from the names of the

widgets so if you see down here that's

this first one up here and this name is

coming from there okay so then we can

just bind it to our signup email widget

beautiful next we've got a password

field and when we twirl this open we

can't even twirl it open because there's

no available password field but why is

this happening well this is because we

haven't actually set up this text field

to be a password text fields are very

robust widgets because they're the

fundamental way that you're going to

pass information into your app and into

your backend so it needs to have a bunch

of features for security and

accessibility and usability so let's

take a look at some of these now now

these first options up here are going to

have to do with styling and when you

scroll down to the end here you're going

to see some of these options and the

first one is the password field so let's

click this on and after we turn this on

we can see that now that error has gone

away and we have one field available to

us so we can just select that now but

let's look at a few other options on

this text field widget when we click

this on this new Option appeared toggle

hide password icon and so let's just

give it a size of here of say 24 pixels

and you can see that we get this hide

password icon so by default their

password will be hidden so it'll use

those dots instead of the actual

password to ensure security so people

can't see it when they're typing in you

can set the icon color we'll just leave

it at the default and that's all we need

for this password field now the one

other thing we're going to do is we're

going to set this submit type now what

this will do is it'll set the text of

the button on the keyboard so the

keyboard that pops up what should the

big button at the bottom right say and

what action should that trigger well we

want it to trigger to go to the next

field okay great that's all we need here

next let's set our confirmation password

configuration so we want this to be a

password field as well we can set the

same toggle size and we'll set the

submit type to done so it'll dismiss the

keyboard so they can press the button

the last thing we're going to do is

we're going to turn off autofocus right

here whichever text field has

autofocused that's where the cursor will

end up with the keyboard popping up when

the page loads we're not going to set

this on anything because the user has an

option whether to sign in or log in and

if they're trying to log in but it auto

focuses to email then they'll have to

click away to close the keyboard and

then click login next we're going to

show clear field icon that's just an X

that allows them if they make a mistake

to clear it quickly it's helpful for

accessibility and user experience next

let's scroll down to our keyboard type

and this is very helpful to set because

it'll determine what will appear on the

keyboard board so here will be an email

address so we'll add that as the

keyboard type and we'll set the submit

type to next beautiful next let's go

over to login and we'll set the fields

here first let's just fix this text

right here cuz that should be email

address so let's go down here and say

email and then we can scroll down here

we don't want our autofocus and this

will be an email address we also want

that clear field icon so let's set that

and accept the default color and set our

submit type to next and come down to our

password turn off autofocus turn on

password field give it an icon size and

select our submit type to done all right

our text fields are set up so let's go

back into our authentication logic and

complete that so we can come into our

button right here let's go back to this

tab select our button and come into our

confirm password field and we've got

this confirm password beautiful we're

almost done here we've got a toggle

about whether we want to create a user

document now what this is saying is that

we have set up a collection of users

here and this is just a normal

collection and normally you want to have

a user document so this is just a

helpful way to create one inside of this

action so you don't have to have an

additional action we just select which

collection it is it's our users

collection and then we need to set the

fields what are the fields well the

fields are each one of these individual

things here so we can set our email and

let's open this up this is the email

field it's already selected if you want

a specific value so you would hardcode

it in here but we want it Dynamic we

want it coming from this field here so

we want it from a variable and so when

we click in here we can see all of the

data sources we have available to us now

there's a shortcut here where you can

just click on the canvas right here and

it'll bind it but so you know where it

comes from let's go edit this binding

right here and it's coming from this

widget State because it's coming from

the widget itself and because we've got

these named helpfully we know that it's

coming from our sign up email so those

are two ways to do the same thing and

finally we always want to set our

default variable value this is to avoid

any null errors and we can just put

example at email.com and confirm let's

set one more field and that's the

created time so let's go to that and we

can bind this from the global property

of the current time and confirm now

we're not collecting any of the other

fields so we're all done lastly we've

got this option about whether we want to

automatically navigate the users if this

is on this will navigate the user to the

page you have specified right here the

log in page because after we create the

account they will be logged in and so

they can be forwarded here now we

actually don't want to navigate them

automatically because in our designs we

have an onboarding page where we're

going to collect their birthday and

profile image so we're going to handle

navigation manually so we can just click

this off so let's just create that page

right now so we'll create a blank page

we'll call it onboarding and go back to

our login page to this button and now we

want to navigate the users to that page

well how do we do that well we don't

want to do it in this view right here

because we can only apply and configure

logic that has one block so let's open

up our action flow editor here and we

just want to add this Plus right here

we're going to add an additional action

next we want to navigate the user so

let's search this time navigate and we

want to navigate to this onboarding page

now the only option that we want to

change right here is allow back

navigation so that's when a user swipes

their finger from the left to the right

and we want to disallow that action

because they've already been logged in

so we're going to turn that off and

everything else will keep at the default

beautiful so let's close this and we're

almost ready to test but let's just

finish out the logic for this page so

we've got this other tab of our login

right here we've already configured our

text Fields so we can just go straight

to our button except for that won't work

that's of course because we've already

defined our Logic on this button and

this will often happen sometimes you

won't discover what your UI needs until

you start building out the logic and

there's nothing wrong with this so how

do we solve this well the easiest way to

solve this is to add another button so

we have one button for signing up and

one for logging in and then show and

hide them based on what tab is selected

so we can come into this button right

here and let's change the text in here

and change it to sign up and then let's

wrap this inside a stack so that these

two buttons will be stacked on top of

one another so we'll use one of our

three most important keyboard shortcuts

Commander control B to wrap a widget and

we'll wrap it in a stack then we'll just

grab our button again we'll command D

duplicate it and we'll change this one

to Lo Lo in and let's change the name of

them so we know what these are in the

widget tree and our other button this

will be sign up button great now

remember the little aphorism in Stacks

the top is the bottom so the top of the

stack that you see right here will be

the bottom widget if we just hide this

for a second here we can see our login

so we're hiding the bottom one which is

the top one so we can see this one here

okay so how do we conditionally show and

hide these well we're already in here in

visibility and we're on our sign up

button right here so let's click on our

conditional visibility widget and come

in here and so what do we do well what

we want to do is that this expression

that is what's in here is expecting a

Boolean whatever this evaluates to if

it's true then this will be shown and if

it's false it will be hidden so what do

we want to check for well we want to

check for something about this tab bar

that is is if the user is on the right

Tab and if we want to check for

something in the tab bar then we want to

look to widget state so if we twirl this

open we can see that the first option is

what we want the tab bar current index

that is it gives us an index a number

that flutter flow will automatically

update when the user clicks between the

different tabs so that's what we want

let's grab that now flutter flow did a

nice thing for us right here because we

actually did something wrong this this

is expecting a Boolean a true or false

value but we selected an integer a

number so what it did is it pop that

inside a conditional this would be the

same as if we did something like this

come into a condition single condition

and then set this value to our widget

state of our tab bar this is just a

really helpful utility function and

these are all over the place okay so we

want to check if the first value our

Tabb bar index is equal to

what well we're on the sign up button

right here and these tab bars are zero

indexed so this first one over here

isn't one but it's zero okay so we want

to check if it's equal to zero so if

it's equal to zero then this expression

right here that is tab bar current in

index equal to zero will evaluate will

be true and so it'll be shown now if you

see these two equals here and might and

think that it's a typo it's not a typo

in most programming languages if you

have 1 equals that is assignment that is

you're assigning the value of whatever

is on the left hand right here to

whatever is on the right hand over here

if you want to check for a condition

like equality here then you use two

equal signs okay so this is great let's

confirm this then let's set up the same

logic on our second button but instead

of just doing all that work again we can

come in here and just grab this value

let's copy this value then come over to

our Lin button come into our conditional

visibility in here and then you see

we've got this little paste button and

we paste it in then we just have to

change this value to one because the

login is an index of one and confirm

beautiful and because we have

conditional visibility set we have these

little icons right here okay so we're

almost ready to test it but we have to

add the logic to our login button now

you can see here we already have two

actions bound here and that's just

because we duplicated the button so

let's come in here we're in our login

button let's open this up and let's

delete this second action here and we

can come in here and we can redefine

this action block we want to log the

user in so let's come into backend

database Firebase authentication and log

in here the email provider is set

correctly but we don't want to sign up

the email we want the login email

remember these are the widgets where

this data is coming from and then login

password finally we've got the navigate

automatically and we can do that here

because if the user is logging in

they've probably already completed that

onboarding and just want to go to the

main tasks page beautiful so this is all

set up and we're ready to test it so

let's come up here to test and it'll pop

open a new window this will take 2 to 3

minutes to spin up the first time but

then it'll hot reload instantly whenever

we make a change all right so first

let's test our conditional visibility so

we see our sign up button that looks

good so let's click over to our login

and we can see that now we've got our

login button beautiful that works so

let's sign up a user and sign up

beautiful it looks like it worked but

let's go over and check our users's

collection to see if a user document was

created so we can come over to our fire

store here and into manage content and

there I am beautiful next let's test our

our login feature but we need some way

to log our user out and this is simple

so we can just go to our task screen

let's just add a button right here and

call this log out then we can just

Define some logic and let's search for

log out and there it is then we go back

to our test mode Let's instantly reload

then we can log out and come over to

login and put in those same credentials

and log in beautiful now there's one

other best practice I want to show you

that we haven't covered yet and that is

form validation whenever you're

receiving data there's normally rules

that you want applied before you accept

the data and you can check for those

with form validation and these would be

things like making sure your password is

of sufficient length and you can do that

by wrapping your text fields in a form

validation block and it doesn't have to

be the immediate parent so here I've got

three and I'm going to go up to my

column here and use my trusty command B

to wrap these in a form validation block

so now here I'm in my form validation

block and when I scroll down I've got

with properties and I'm just going to

leave that as is because I'm handling

that elsewhere and then I've got these

options under validation which are the

most important ones now these will be

populated with any fields that support

validation and if you want them

validated you can just select them here

and when you select them you'll see what

validation options you have available so

you can put in a specific message

minimum maximum allowed characters and

text validator so here from my email I

want to make sure that it's a valid

email for my password and confirmation I

want to make sure that they are a

minimum of seven characters so I'm going

to add that in Okay so we've set up the

validation criteria but then we need to

tell flutter flow when to execute this

logic and because this is logic it

should go where all the rest of the

logic goes in the action flow editor but

we don't want it on this form block

because we want to defined on the actual

buttons so let's come over to our sign

up button over here come into our action

flow editor let's give some more space

right here and when do we want to run

this well we want to run this before the

authentication action occurs because we

want to stop the execution flow if it's

not valid but how do we get it up there

let me show you so let's add in a

validation action so just search for

validation validate form select which

form we haven't named it yet so it's

just this form one and then we can use

these arrows to move this up beautiful

let's name this so let's close this out

let's come into our form here and let's

call this form dasign up beautiful so

when we come back into our action flow

editor here we can see that name all

right let's try this out to see these

changes we're going to instantly reload

let's put in a new user but let's put in

a password that's insufficiently long

and when we click sign up we can see

that we get this error message and we

get our error color and we also have an

overflow error so where is this color

coming from and let's fix this error

this color is coming from when you're in

your text field down here and scroll all

the way down you can see we get this

error border color so that's where

that's coming from let's come up to our

container here and give a little bit

more room so we have room for that error

and this authentication is done lastly

we need to set up validation in our

login form and then this authentication

page is done I'll leave that up to you

for a challenge for this video and we'll

see you in the next one