How to set up user authentication

User authentication is one of the first tasks that many apps perform. Authentication ensures that only known/trusted users can access the subsequent pages and resources available through the app.
This tutorial shows how to create a simple app that authenticates a user on a login page with the Auth component and redirects the user to a new page showing their user ID information.
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 Deploy your app.
The tutorial is organized into the following sections:
1.​Add an authentication provider​
2.​Add a simple login page​
3.​Set up the login page logic​
4.​Create the signed-in page​
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.
The steps below show how to prepare an app to use a third-party authentication provider. 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.Create a Blank Starter app and give it a name.
2.Navigate to the Connect tab > authentication (shield) icon and click Configure. This is where the authentication provider is configured:
3.Select a Provider, populate the provider-specific configuration settings, and click Confirm. In this example, Firebase has been selected as the provider:
The authentication provider is now set up for the app to use. The next section shows how to Add a simple login page.
Add a simple login page
Now that an authentication provider has been configured, it can be used to authenticate a user.
The steps below show how to design the corresponding login form for users to submit their credentials:
1.Navigate to the Design view and drag-and-drop a Form component onto your app.
2.Rename the Form to Login Form.
3.Drag-and-drop an extra Text Label and Text Input field as well as a Button onto the form.
4.Rename and re-title the components as follows:
First Text Label and Text:
Name: Email Label
Title: Email
Second Text Label and Text:
Name: Password Label
Title: Password
Button:
Name: Submit Button
Title: Button
5.Click the Submit button component's State menu and set the type to submit.
The login form should look similar to this:
The next section shows how to set up the login page logic.
Set up the login page logic
After you configure the login page UI, set up its underlying logic.
The steps below show how to connect the login page's components to the Auth component and redirect an authenticated user to a new page.
1.Navigate to the Logic view to start designing the app's logic.
2.Open the Libraries panel and drag-and-drop the following references from the Design References section onto the app:
Login Form
Email
Password
3.Drag-and-drop an Auth component onto the app, click the Actions menu, and add a loginWithUsername action.
4.Connect the Login Form component's onSubmit action to the Auth component's loginWithUsername action.
5.Connect the getValue actions of the Email and Password components to the Auth component's the username and password inputs. The Home page's connections should look as follows:
6.Drag-and-drop a Go to page component onto the app and connect the Auth component's onLogin action to the Go to page component's call action.
7.Click the Go to Page component's Actions menu and set its page parameter to /SignedInView.
The Home page's final connections should look as follows:
The next section outlines how to create a new page where the app will redirect authenticated users.
Create the signed-in page
After a user is authenticated, an app typically redirects them to a new page and may use their authentication information for subsequent operations.
The steps below show how to create a new page where the app will redirect an authenticated user. The page displays the authenticated user's ID and name to demonstrate how this information can be obtained from an Auth component:
1.Navigate to the Design view and select the Pages section.
2.Add a new page and rename it SignedInView.
3.Drag-and-drop two Text components onto the app's SignedInView page. Name and re-title the components to ID and Name.
4.Navigate to the Logic view, open the Libraries panel, and drag-and-drop the following components onto the app:
Auth
Get Value at Path
String Template
5.Drag-and-drop the ID component from the SignedInView page onto the app.
6.Click the Auth component's Actions menu and add the onInitialized action.
7.Connect the components as follows:
(Auth) onInitialized > (ID) setLabel
(Auth) authInfo > (Get Value at Path) object
(Get Value at Path) value > (String Template) name
(String Template) output > (ID) label
The logic should look as follows:
8.Click the Get Value at Path component's Actions menu and set its path to user.id. This specifies that the id field be extracted from the authentication information.
9.(Optional) Click the String Template component's Actions menu, and change or remove the Hello, prefix and/or exclamation mark suffix in the template setting.
10.Click on the Explorer pane, select the Home page, and test the app. Upon entering and submitting user information on the Home page, the app will redirect to the SignedInScreen which should display the value for the user's ID followed by the string Name:
11.Repeat steps 4 through 10 for the Name field and re-test the app. For Step 7, set path to user.displayName. The logic should look like this:
The final app should look as follows:
Congratulations! You've successfully built a simple app that authenticates a user, redirects them to a different page, and displays their authentication information.