Create a sign-in page

If you don't want your app to be public to everyone, you can require users to sign in before they can access it.
  1. 1.
    Set up two pages: a Sign in page and a Home page. Set up app configuration as follows. This setup will first show the Sign in page when a user enters the app. Once they sign in, they will see the Home page.
  2. 2.
    The page configuration should look like the following. Make sure to turn Authentication Required on for the Home page to ensure that only signed-in users will be able to access the page.
  3. 3.
    The next step is setting up the Sign in page. You will need to drag a Container, Form, Input, and Button to the page. For a better experience, you can rename the Elements in the configuration panel.
  4. 4.
    Input configuration: For the input elements, you'll need to set up "Form item name" in Config -> Property. Set the email input item name to "email" and the password input to "password". This is an example of the email input.
  5. 5.
    Form configuration: Next we'll need to configure the form that the inputs are in. Add an interaction on the form element with a Submit event. Then add an action, selecting API Service -> App User Sign In. Under Action parameters map the user input values to its corresponding fields using ${} and ${event.form.password}.
  6. 6.
    Button configuration: You'll also need a button to trigger the form to submit. Select your button and add a Click button event. Then add an action and select Element -> Form (This is the name of the element. If you've changed it, select the appropriate name) -> Submit Form.
  7. 7.
    To add a user, please reference App User Management (IAM). Now it’s time to Preview your App to see how it looks.