Twinr Builder Resources
  • 🙌Getting Started
    • What is Twinr?
    • Fun Fact
  • 📱Create App
    • Create App from Template
      • Blank
      • E-Commerce App
      • News App
      • Restaurant App
  • 👥Organization
    • Create Organization
    • Invite Members
  • 🖥️Dashboard
    • App Dashboard
    • Preview App
    • Delete App
  • 📲Setup Branding Info
    • App info
    • Launch screen
    • App Permissions
      • Camera Permission
      • Photo Library Permission
      • Microphone Permission
      • App Tracking Transparency
      • Location Permission
      • Read External Storage
    • App Settings
      • Enable portrait only mode
      • Prevent App Sleep
      • Enable/Disable iPad Support
      • Customize Minimum Android Version
  • 🎨Setup Theme
    • Overview
    • App Theme
      • Color Theme
      • Text Theme
      • Button Theme
    • Bottom Tab bar
    • Navigation bar
      • Button setting
    • Status bar
  • 📲Screen Customization
    • External URL Handling
    • Apply Custom CSS
    • Apply Custom JavaScript
    • Hide Elements
    • Page Refresh
    • Login
      • General
      • Login Page
    • Tab bar(Bottom tabs)
      • Add New Screen
      • Delete Screen
      • Rearrange Screen
      • General
      • Navigation Bar
        • Navigation Bar Title
        • Navigation Bar Buttons
          • Back Button
          • Linker Button
          • Cart Button
          • Custom Button
          • Hamburger Menu
          • Native Link Sharing
          • Native Notification Screen Button
      • Tab Screen - External URL Handling
      • Responsible URL
      • Tab Screen - Hide Elements
      • Tab Screen - CSS
      • Tab Screen - Scripts
  • Native Screen
    • Title Element
    • Paragraph Element
    • Button Element
    • Image Element
    • Spacer Element
    • Divider Element
    • Banner Element
      • Banner Element(with Background Image)
      • Banner Element(with Background Color)
    • List Element
      • List Grid Element
      • List Vertical Element
      • List Horizontal Element
    • Product List Element
    • Setting List Element
  • 🛠️App Configuration
    • Add New Configuration
  • 🔗Extensions
    • Overview
    • Page Loader
    • Pull to Refresh
    • Custom User Agent
    • Custom Fonts
    • Cache Policy
    • No Internet View
    • App Review
    • App Onboarding
    • Multi Language
    • In-App Purchase (IAP)
      • iOS In-App Purchase (IAP)
      • Android In-App Purchase (IAP)
    • Deeplink
    • Force App Update
    • Account Delete
    • Dynamic Titles
  • ⚙️Integrations
    • Overview
    • Firebase Push Notification
      • Enable Push Notification
      • Send Push Notification
    • Push Permission Reminder
    • Personalized Push Notification
    • Abandoned Cart Push Notification
    • Native Notification Screen
    • AdMob
      • Create Android & iOS Apps
      • Create Ads on AdMOb
      • Setup AdMob Integration
    • Firebase Analytics
      • Auto Tracked Analytics
      • Custom Analytics
      • How to check Analytics in Firebase?
  • Plugins
    • Overview
    • WooCommerce
    • Shopify
    • Preshtashop
  • Engage
    • Overview
    • Engage Dashboard
    • One Time Campaigns
    • Event Triggered Campaigns
      • Order Created
      • Order Status Change
      • Product Created
      • Product Re-stock
      • Product Out-of-stock
      • Product Low Stock
      • Coupon Created
    • Welcome Push Notification
    • Inactivity Push Notification
  • 📊App Analytics
    • Overview
    • Acquisition & Retention
      • Number of Sessions
      • Number of Unique Sessions
      • Daily Active Users
      • Total App Sessions
      • New App Sessions
      • Session by Platform
      • Average Session Length
      • Session by Devices
      • Retention
    • Revenue
      • Sales
      • Orders
      • Total Revenue - Current vs Previous Period
      • Total Orders - Current vs Previous Period
      • Revenue by Device
      • Average Order Value by Device
      • Order by Device
      • Orders by New vs. Returning Users
      • Top 10 Popular Products
      • Promo Code Revenue vs Revenue
  • JS Bridge
    • What is the JS Bridge?
    • AdMob Interstitial Ad
    • Change App Language
    • Push Notification - Device Token
    • Request Account Delete
    • Native Datastore
  • 🚀Publish Apps
    • Publishing to the Google Play Store
      • Setup Android Signing Information
      • Get Android Build File
      • Create Your Google Developer Account
      • Setup your App on Google Play Store
      • Submit Your App to Production
      • Reset Android Signing Key
    • Publishing to the Apple App Store
      • Create Your Apple Developer Account
      • Setup Annual Payment for your Apple Developer Account
      • Create Your Apple Bundle ID
      • Setup iOS Signing Info
      • Get iOS Build File
      • Add Users to Your App Store Connect Team (Optional)
      • Add Users to TestFlight (Optional)
      • Submit Your Build to The App Store
  • 👤Twinr Account
    • Change Password
    • Billing & Payments
    • Invoices
    • Update Payment Method
    • Enable 2-Step Authentication
  • 👩‍💼Support
    • Contact Support
    • On-demand Services
      • End-to-End App Solution(All Inclusive)
      • App Development
      • App Publishing
      • App Screenshots
      • Login Script
      • Push Notification Setup
  • 🤝Partnership & Earnings
    • Twinr Partnership Model
    • Agency Plan
    • Become an Affiliate
  • ❓FAQs
    • Subscription
    • Preview your App
    • App Customization
    • Build APK & IPA
    • Publishing App
Powered by GitBook
On this page
  • When should you use Login?
  • Questions that can help you decide if you want to enable login
  • Login status check script
  • Example Script
  • How to test the login script?
  • Login Page Selectors

Was this helpful?

  1. Screen Customization
  2. Login

General

Login feature is very important when you want your users to login first before accessing the application screens.

PreviousLoginNextLogin Page

Last updated 2 years ago

Was this helpful?

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

  • If you want to enable login for your app or not.

  • Do you want your users to first login and then see tab screens?

  • Do you want to keep users logged in every time they open the app?

Based on your selections, few options will gets enabled/disabled.

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.

  • 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.

Status names must match exactly as mentioned above.

Example Script

*NOTE: Do not copy the same. You have to find the selector from your website.

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

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!

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.

📲
Enable Login
Setup login