Add user authentication

Now that your todo list application has some basic functionality, you can add a login screen and use the Auth component to implement user authentication. This ensures that only known/trusted users can access your application.
Note: To test the Auth component, you cannot use the Preview panel; you must first deploy your application. To learn more about deploying your application, see Get started: Deploy your app section.
To add user authentication to your todo list application:
1.​Add an authentication provider​
2.​Add a simple login screen​
3.​Connect the login screen​
4.​Add a username to the todo list​
5.​Test the app​
Add an authentication provider
Apps commonly use an existing third-party authentication provider to verify the authenticity of a user. This avoids the need to build a database of users and passwords, and leverages existing databases from trusted providers.
This example uses a sample Firebase database that returns information for a user named "Fake User" for any email/password combination provided to it:
1.Open your application and select the Auth tab.
2.Click Configure to set up an authentication provider.
3.Click the Provider drop-down menu and select Firebase.
4.Populate the Provider Connector Settings with the required information.
5.Click Confirm to set your provider.
After you set up your authentication provider, continue to the next section to Add a simple login screen.
Add a simple login screen
This section outlines how to build a simple login screen for users to submit their authentication credentials:
1.Click Design to enter the Design view.
2.Open the Explorer panel and click the Add a page icon to add a page.
3.Name the page Login page.
4.Navigate to the Properties panel and enable Make this the homepage. This ensures that the Login page is the first page visible when the app runs.
5.Open the Libraries panel and drag-and-drop a Container component into your application.
6.Drag-and-drop a Form component into the Container. This component already includes a Text and Text Input component.
7.Drag and drop the following components into the Form:
(2) Text
Text Input
Button
8.Arrange the Text and Text Input components in alternating order, with the third Text component at the top of the Form and the Button at the bottom.
9.Double-click the top Text component and change the label to Login.
10.Name the components as follows:
First Text and Text Input:
Email
emailInput
Second Text and Text Input:
password
passwordInput
The Login page should look like this:
11.Double-click the Button component's text label and change it to Submit.
12.Select the button and set the type to Submit. When the user clicks the button, this submits the form information.
Your completed Login page should look like this:
Connect the login screen
This section outlines how to connect the Login screen from the previous section to your application's authentication provider:
1.Click Logic to enter the Logic view and select the Login page.
2.Open the Libraries panel and drag-and-drop the following component references into your application:
Button
emailInput
passwordInput
3.Drag-and-drop an Auth component into your application.
4.Select the Auth component and open the quick selection Actions menu.
5.Click loginWithUsername to add the node to your application. This enables you to submit the Login Page information to the Auth component.
6.Build the following node connections:
(emailInput) getValue > (Auth) username: Sets the Auth component's username field to the email entered by the user.
(passwordInput) getValue > (Auth) password: Sets the Auth component's password field to the password entered by the user.
(Button) onClick > (Auth) loginWithUsername: Tells the Auth component to authenticate when the user clicks the Submit button.
(Auth) OnLogin > (Go to Page) call: Redirects to the Home page.
Add a username to the todo list
Before you build your application logic, update the todo list to display the logged-in user's name at the top of the todo list:
1.Navigate back to the Home page.
2.Drag-and-drop a Container component directly above your application title, and name the component authLabel.
3.Drag-and-drop a Text component into the container, and name it User.
4.Navigate to the Logic view, open the Libraries panel, and drag-and-drop the following into your application:
Auth component
Get Value at Path component
User reference
5.Select the Auth component and open the quick selection Actions menu.
6.Add the onInitialized action.
7.Select the Get Value at Path component and open the quick selection Actions menu.
8.Build the following node connections:
(Auth) onInitialized > (User) setLabel: Tells the User component to update its text label.
(Auth) authInfo > (Get Value at Path) object: Forwards the authenticated user's information so that specific fields can be extracted.
(Get Value at Path) value > (User) label: Sets the label's text to that user's display name.
Test the app
1.Ensure the Login page is selected and preview the app. Upon running it, the app should display the Login page first.
2.Enter credentials in the Email and Password fields, and click Submit. This sends the credentials to the Firebase authentication provider.
3.The app should redirect to the todo list screen. The user's display name retrieved from the Firebase authentication provider should be visible in the User component added earlier.
4.(Optional) Verify the information retrieved for the user by expanding the three dots to the left of Auth component's userInfo node. This example shows the user information returned from the Firebase provider configured earlier: