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.
The tutorial is organized into the following sections:
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:
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:
- Second Text Label and Text:
- 5.Click the Submit button component's State menu and set the type to submit.The login form should look similar to this:
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
- 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.
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
- 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:
- 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:
The logic should look as follows:
authInfo> (Get Value at Path)
- (Get Value at Path)
value> (String Template)
- (String Template)
- 8.Click the Get Value at Path component's Actions menu and set its path to
user.id. This specifies that the
idfield 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.