# Authenticate with API Web Flow Template

![authenticate0.png](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-9649adfe0b65435d87602fe44f2a752a4954c5e5%2Fauthenticate-with-api-web-flow-template-v1715-0.png?alt=media)

### Overview

This [Web Flow template](../building-apps/kitcloud/web-flow-templates) has pre-configured components for app builders to authenticate users by having them enter their username and password and pass that to an authentication API. From [Activity Builder](../studio/builder-bar/web-builder), this Web Flow can be tailored for a customized experience.

### Authenticate with API Web Flow template components

This Web Flow contains an Authenticate Web Page with the following components:

* A [Label](../web-controls/label-web-control) control with the title.
* A Label and a [Text Input](../web-controls/text-input-web-control) control for users to enter their name.
* A Label and a Secure String Input for users to enter their password.
* A Label indicating the number of attempts that shows up when login fails.
* A Label indicating that the maximum number of login attempts was exceeded that shows up if that is the case.
* A C[ontainer](../web-controls/container-web-control) with a Login [Button](../web-controls/button-web-control) control that runs the Authenticate [Event](../studio/events).

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-ba80950b3d6780564433b0dcf2007753f42c90fd%2Fauthenticate-with-api-web-flow-template-v1715-1.png?alt=media)

### Variables

This Web Flow has the following [Variables](../working-with-data/variable-scopes) saving the information and choices of the user:

[Text](../variable-data-types/the-text-variable-data-type)

* password
* user\_name

### Events

This Web Flow has two Events:

The Authenticate Event is triggered by the Login Button control and includes the following Variables:

* password
* User\_name
* Attempt
* ma\_attempts

In [Journey Builder](../studio/builder-bar/journey-builder), actions or nodes can be added to this Event to extend the application’s path.

The Max Attempts Exceeded Event is ready to be used and includes the following Variables:

* user\_name

### Use Cases

* Allow app builders to perform a simple username and password authentication to connect to existing APIs.
