# General

### When should you use Login?

When you want the user to login into the account first before he enters the main screens, you should enable this feature. As an example, Web Portals, in which the dashboards and other screens are only visible after login.

### Questions that can help you decide if you want to enable login

Login section will help you decide authentication flow of your app. Here, you can decide 

* <mark style="color:orange;">If you want to enable login for your app or not.</mark>&#x20;
* <mark style="color:orange;">Do you want your users to first login and then see tab screens?</mark>&#x20;
* <mark style="color:orange;">Do you want to keep users logged in every time they open the app?</mark>

Based on your selections, few options will gets enabled/disabled.&#x20;

![Enable Login](/files/Nqqa5FpQ16e0GYlQUZy7)

![Setup login](/files/wmZy4vaglKcu7g9IjW8J)

### Login status check script

This is the most important part of the login process. Here, you need to add JavaScript which will help Twinr Framework identify login status of the user. Your script must return following four statuses.

* **loggedIn**: This status means user is currently logged in and we allow them see post login screens.
* **notLoggedIn**: This status means user is currently not logged in.&#x20;
* **authError**: This means user has entered wrong username and password.
* **unknown**: This means auth status is currently unknown. This should be default status as well.&#x20;

Status names must match exactly as mentioned above.

### Example Script

<mark style="color:red;">\*</mark><mark style="color:red;">**NOTE:**</mark> <mark style="color:red;"></mark><mark style="color:red;">Do not copy the same. You have to find the selector from your website.</mark>

{% code lineNumbers="true" %}

```javascript
if(document.querySelector('#login_front')) {'notLoggedIn'}
else if(document.querySelector('.fa-sign-out-alt')) {'loggedIn'} 
else if(document.querySelector('.alert-danger')){'authError'}
else {'unknown'}
```

{% endcode %}

Understanding of above code:

* ```
  if(document.querySelector('#login_front')) {'notLoggedIn'}

  // If you find a unique element "#login_form" from the page, please return the status "notLoggedIn".
  // All the login pages generally have login forms. So you have to find the selector for that form. It is most likely under the <form> tag.
  // Selector can be any unique element that a login page can have.
  // Checkout this video to see how to find elements. https://youtu.be/2UE5RLltKHo
  ```
* ```
  if(document.querySelector('.fa-sign-out-alt')) {'loggedIn'}

  // If you find a unique element ".fa-sign-out-alt" from the page, please return the status "loggedIn".
  // You can choose this element from the first page the user see after loggin in.
  ```
* ```
  if(document.querySelector('.alert-danger')){'authError'}

  // If you find a unique element ".alert-danger" from the page, please return the status "authError".
  // When the user enters incorrect information, one error message is shown. You have to select the element for that error message.
  // Note that there can be different messages for different errors. Like incorrect username, incorrect password, something went wrong, or anything that you have put. You have to put them all in if statement. For example, if(document.querySelector('#username-error') || document.querySelector('#input-password-error') || document.querySelector('.alert-danger')){'authError'}
  ```
* ```
  else {'unknown'}

  // This is a status you return when there is any errors other than any of above.
  ```

### How to test the login script?

You can test the login script on the browser's console. If the status it returns is correct, then you are good to go!                                                                                                                                                                                                                        &#x20;

### Login Page Selectors

Here, give the elements we are asking for.

* **Login form selector**:  Enter the login form selector here.
* **Submit button selector**: Enter login form submit button selector.
* **Username field selector**: Enter username field selector.
* **Password field selector**: Enter password field selector.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.twinr.dev/screen-customization/login/general.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.