# Login

The "Login" action displays the login form in a modal when clicked. This action is specifically designed for **public apps** where unauthenticated users can access certain pages. It allows you to prompt users to log in before accessing restricted content or performing specific actions.

## What Are Public Apps?

Public apps in Noloco allow unauthenticated users to access certain pages without logging in. This is useful for:

* Marketing/landing pages
* Public forms
* Content that should be accessible to everyone
* Public product catalogs or listings

Learn more about [Public Access](https://guides.noloco.io/settings/public-access) settings.

## When to Use the Login Action

Use the Login action when you want to:

* **Gate premium content**: Allow preview but require login for full access
* **Protect actions**: Let users browse but require login to submit forms or update data
* **Enforce authentication**: Prompt login before specific operations
* **Create hybrid experiences**: Mix public and authenticated content
* **Chain with other actions**: Require login before executing subsequent actions
* **Conversion flows**: Encourage sign-ups at key moments

## How the Login Action Works

1. User clicks the action button
2. Login modal appears with authentication form
3. User enters credentials and logs in
4. User is now authenticated
5. If part of a multi-step action, subsequent actions execute

**Key Feature**: The action waits for successful login before proceeding to next steps, making it perfect for chaining actions.

## Setting Up the Login Action

### Step 1: Enable Public Access

Before using the Login action:

1. Go to **Settings** → **Public Access**
2. Enable public access for your app
3. Configure which pages are publicly accessible
4. Set up sign-up options if needed

### Step 2: Create the Action Button

1. In build mode, navigate to a public page or record
2. Click the "+" button in the Action Buttons section
3. Click the edit icon to configure the button

### Step 3: Configure Button Appearance

* **Button Text**: Clear call-to-action (e.g., "Login to Continue", "Sign In", "Login to Access")
* **Appearance**: Usually Success (green) or Default
* **Icon**: User icon, lock icon, or login icon
* **Button Tooltip**: Explain why login is required
* **Type**: Usually "One click" (shows login immediately)

### Step 4: Configure the Login Action

**What Should Happen**: Select **Login**

**Configuration**:

* No additional settings needed
* The login modal appears automatically
* Uses your app's configured authentication methods

### Step 5: Chain with Other Actions (Optional)

The Login action can be the first step in a multi-step action sequence:

**Example**:

* **Step 1**: Login (user authenticates)
* **Step 2**: Create record (now authenticated)
* **Step 3**: Navigate to dashboard

## Common Use Cases

### 1. Login to Submit Form

**Scenario**: Public form that requires authentication to submit

**Button Configuration:**

* Button Text: "Login to Submit"
* Icon: Lock icon
* Appearance: Success
* Type: One click

**Action Sequence:**

1. **Login**: User authenticates
2. **Create Record**: Form submission creates record
3. **Show Message**: "Submission successful!"

**Use Case**: Job applications, contact forms, or service requests where you want to know who submitted.

***

### 2. Login to View Premium Content

**Scenario**: Tease content to public, require login for full access

**Button Configuration:**

* Button Text: "Login to Read More"
* Icon: User icon
* Type: One click

**Action Sequence:**

1. **Login**: User authenticates
2. **Navigate To**: Full article page (restricted to authenticated users)

**Placement**: At the bottom of preview content on public page.

***

### 3. Login to Purchase

**Scenario**: E-commerce where users can browse but must login to buy

**Button Configuration:**

* Button Text: "Login to Purchase"
* Icon: Shopping cart icon
* Appearance: Success

**Action Sequence:**

1. **Login**: User authenticates
2. **Update Record**: Add item to cart
3. **Navigate To**: Checkout page

***

### 4. Login to Download Resource

**Scenario**: Free resource that requires registration

**Button Configuration:**

* Button Text: "Login to Download"
* Icon: Download icon
* Appearance: Success

**Action Sequence:**

1. **Login**: User authenticates
2. **Update Record**: Log download in system
3. **Navigate To**: Download URL or trigger download workflow

***

### 5. Login to Comment

**Scenario**: Public blog or forum where reading is public but commenting requires login

**Button Configuration:**

* Button Text: "Login to Comment"
* Icon: Message icon

**Action Sequence:**

1. **Login**: User authenticates
2. **Add Comment**: User can now add comment
3. **Show Message**: "Comment added successfully!"

***

### 6. Login to Contact

**Scenario**: Contact form visible to all, but submissions require login

**Button Configuration:**

* Button Text: "Login to Contact Us"
* Icon: Mail icon

**Action Sequence:**

1. **Login**: User authenticates
2. **Create Record**: Contact request created with user info
3. **Run Workflow**: Send notification emails
4. **Show Message**: "We'll be in touch soon!"

***

### 7. Login to Save/Favorite

**Scenario**: Users can browse items publicly but must login to save favorites

**Button Configuration:**

* Button Text: "Login to Save"
* Icon: Heart icon
* Appearance: Default

**Action Sequence:**

1. **Login**: User authenticates
2. **Create Record**: Create favorite/bookmark record linking user to item
3. **Show Message**: "Saved to your favorites!"

***

### 8. Login to Access Dashboard

**Scenario**: Public landing page with login button to access main app

**Button Configuration:**

* Button Text: "Login to Dashboard"
* Icon: User icon
* Appearance: Success
* Type: One click

**Action Sequence:**

1. **Login**: User authenticates
2. **Navigate To**: Main dashboard page

**Placement**: Header or hero section of public homepage.

***

### 9. Conditional Login Prompt

**Scenario**: Show different buttons based on authentication status

**Button 1** (show to unauthenticated users):

* Text: "Login to Continue"
* Action: Login

**Button 2** (show to authenticated users):

* Text: "Continue"
* Action: Navigate or perform action

**Implementation**: Use visibility rules (if Noloco supports checking authentication status in rules).

***

### 10. Login to Edit Record

**Scenario**: Public record view where editing requires authentication

**Button Configuration:**

* Button Text: "Login to Edit"
* Icon: Edit icon

**Action Sequence:**

1. **Login**: User authenticates
2. **Navigate To**: Edit page for record

***

## Multi-Step Authentication Flows

### Register or Login Flow

Create two buttons for flexibility:

**Button 1**: "Sign Up"

* Navigate to: Public sign-up page

**Button 2**: "Already have an account? Login"

* Login action

***

### Progressive Authentication

Collect some info publicly, then require login for completion:

**Step 1 - Create Record** (public):

* User fills initial form fields
* Record created as "Draft"

**Step 2 - Login**:

* User must authenticate

**Step 3 - Update Record**:

* User completes remaining fields
* Record updated to "Complete"

***

### Login with Context

Pass context about why login is needed:

**Modal Configuration:**

* Modal Title: "Login Required"
* Modal Description: "Please log in to {{action\_description}}"

Where action\_description explains the next step.

***

## Best Practices

### Button Placement

* ✅ Place login buttons prominently where authentication is needed
* ✅ Show at conversion points (forms, downloads, premium content)
* ✅ Include in navigation for easy access
* ✅ Position before locked content or actions

### Button Labels

* ✅ Be clear about what happens after login
* ✅ Use action-oriented text: "Login to \[action]"
* ✅ Avoid generic "Login" if context helps
* ✅ Consider "Sign In" vs "Login" based on your audience

### User Experience

* ✅ Explain why login is required
* ✅ Make sign-up option visible if needed
* ✅ Remember user's intended action after login
* ✅ Redirect appropriately after authentication
* ✅ Don't overuse—only require login when necessary

### Authentication Methods

* ✅ Support multiple login methods if possible (email, Google, SSO)
* ✅ Offer password reset option
* ✅ Make sign-up process clear and easy
* ✅ Consider social login for faster authentication

### Security

* ✅ Use HTTPS for all authentication
* ✅ Follow security best practices for login forms
* ✅ Implement rate limiting
* ✅ Support 2FA if needed
* ✅ Clear session management

***

## Troubleshooting

### Login Button Appears Unresponsive

**Issue**: Login button on a public page doesn't work when clicked

**Solutions**:

* Ensure the button action is configured to use the **Login** action (not Navigate or other actions)
* Verify the action is set to show login **in a modal** rather than redirecting
* Check that [public access](https://guides.noloco.io/settings/public-access) is enabled in Settings
* Confirm you're testing on a page configured as public
* Test in incognito mode to rule out cached sessions
* Check browser console for JavaScript errors

{% hint style="info" %}
For public apps, the login button must be configured to open the login form in a modal. This ensures seamless user interaction without page redirects.
{% endhint %}

***

### Login Modal Doesn't Appear

**Issue**: Clicking button does nothing

**Solutions**:

* Verify public access is enabled in settings
* Check that you're testing on a public page
* Ensure login is configured correctly in settings
* Test in incognito mode to rule out cached sessions
* Check browser console for errors

***

### General Login Access Problems

**Issue**: Problems accessing the app, magic links not working, or password reset issues

**Solutions**:

* **Verify Email Address**: Ensure you're using the correct email associated with your account
* **Clear Browser Cache**: Outdated or corrupted cache data can cause login issues
  1. Clear your browser's cache and cookies
  2. Close and reopen your browser
  3. Attempt to log in again
* **Check Magic Link Email**:
  * Check spam/junk folders for the magic link email
  * Ensure the link hasn't expired (usually valid for 15 minutes)
  * Request a new magic link if needed
* **Password Reset**:
  * Use the "Forgot Password" option if available
  * Check email for reset instructions
  * Follow password requirements when setting new password
* **Browser Compatibility**: Try a different browser or update your current one
* **Network Issues**: Check your internet connection stability

If issues persist after these steps, contact your app administrator or [Noloco support](https://guides.noloco.io/settings/support).

***

### Already Logged In Users See Login

**Issue**: Authenticated users still see login prompts

**Solutions**:

* Use visibility rules to hide login buttons for authenticated users
* Check session management settings
* Verify user is actually logged in (check session)
* Clear browser cache and cookies

***

### Login Succeeds But Next Actions Don't Execute

**Issue**: User logs in but chained actions don't run

**Solutions**:

* Verify subsequent actions are configured correctly
* Check user has permissions for subsequent actions
* Test each action independently
* Review action logs for errors
* Ensure no visibility rules blocking subsequent steps

***

### Redirect After Login Not Working

**Issue**: User logs in but stays on same page

**Solutions**:

* Check navigation action is configured
* Verify destination page exists
* Ensure user has permission to access destination
* Test with different user roles
* Check for conflicting navigation in settings

***

### Users Can't Sign Up

**Issue**: New users can't create accounts

**Solutions**:

* Enable sign-up in Public Access settings
* Configure sign-up page/form
* Check email verification settings
* Verify sign-up permissions
* Test sign-up flow separately

***

## Public Access Configuration

### Setting Up Public Pages

1. **Enable Public Access**:
   * Settings → Public Access → Enable
2. **Configure Public Pages**:
   * Select which pages are accessible without login
   * Set default redirect for authenticated users
   * Configure sign-up options
3. **Set Up Authentication**:
   * Email/password
   * Social login (Google, etc.)
   * SSO if needed
   * 2FA options
4. **Create Login/Signup Pages**:
   * Public login page (or use modal)
   * Public signup form
   * Password reset flow

***

## Conversion Optimization

### Encouraging Login

**Tease value before login**:

* Show preview of premium content
* Display limited results, login for full access
* Offer sample, login for complete resource

**Clear value proposition**:

* Explain benefits of logging in
* Show what they'll get access to
* Highlight exclusive features

**Reduce friction**:

* Social login options
* Remember me checkbox
* Quick sign-up process
* Auto-fill where possible

**Timing**:

* Don't require login too early
* Let users explore before gating
* Prompt at high-intent moments

***

## Security Considerations

### Authentication Security

* ⚠️ Always use HTTPS
* ⚠️ Implement rate limiting on login attempts
* ⚠️ Use secure password requirements
* ⚠️ Consider 2FA for sensitive apps
* ⚠️ Session timeout for inactive users

### Session Management

* ⚠️ Secure session tokens
* ⚠️ Clear sessions on logout
* ⚠️ Handle concurrent sessions appropriately
* ⚠️ Protect against session hijacking

### Data Protection

* ⚠️ Don't expose sensitive data on public pages
* ⚠️ Verify authentication before showing protected content
* ⚠️ Check permissions server-side, not just client-side
* ⚠️ Log authentication events for audit

***

## Advanced Patterns

### Soft Gate vs Hard Gate

**Soft Gate** (recommended):

* Users can browse and explore
* Login required only for specific actions
* Better for discovery and conversion

**Hard Gate**:

* Login required immediately
* Use sparingly, only when necessary
* May reduce engagement

***

### Progressive Disclosure

Start with public access, gradually introduce login:

1. Browse freely (no login)
2. Save favorites → Login prompted
3. Advanced features → Login required
4. Premium content → Login + subscription

***

### Guest vs Authenticated Experiences

**Guest Mode**:

* Limited functionality
* View-only access
* No personalization

**Authenticated Mode** (after login):

* Full functionality
* Personalized experience
* Save progress/preferences
* Access protected features

Use visibility rules and permissions to differentiate.

***

## Mobile Considerations

### Mobile Login Experience

* Login modal should be mobile-responsive
* Touch-friendly login form
* Social login buttons (one-tap)
* Remember device option
* Face ID/Touch ID support if available

### Mobile-Specific Patterns

* Use native login prompts when possible
* Support autofill for passwords
* Large touch targets for buttons
* Clear error messages
* Easy password reset flow

***

## Analytics and Tracking

### Tracking Login Prompts

* Track how often login button is shown
* Monitor click-through rate
* Measure conversion (login completion)
* Track where users abandon

### Optimization Metrics

* Login prompt → Login attempt rate
* Login attempt → Success rate
* Login success → Next action completion
* Time to complete login

Use this data to optimize:

* Button placement
* Button text
* Login flow
* Sign-up process

***

## Accessibility

### Keyboard Navigation

* Tab to login button
* Enter/Space to trigger
* Focus management in login modal
* ESC to close modal

### Screen Readers

* Clear button labels
* Announce modal opening
* Proper form labels in login form
* Error messages announced

### Visual Accessibility

* Clear focus indicators
* Sufficient color contrast
* Readable text sizes
* Clear error states