Login
Prompt users to log in using action buttons in public apps
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 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
User clicks the action button
Login modal appears with authentication form
User enters credentials and logs in
User is now authenticated
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:
Go to Settings → Public Access
Enable public access for your app
Configure which pages are publicly accessible
Set up sign-up options if needed
Step 2: Create the Action Button
In build mode, navigate to a public page or record
Click the "+" button in the Action Buttons section
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:
Login: User authenticates
Create Record: Form submission creates record
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:
Login: User authenticates
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:
Login: User authenticates
Update Record: Add item to cart
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:
Login: User authenticates
Update Record: Log download in system
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:
Login: User authenticates
Add Comment: User can now add comment
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:
Login: User authenticates
Create Record: Contact request created with user info
Run Workflow: Send notification emails
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:
Login: User authenticates
Create Record: Create favorite/bookmark record linking user to item
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:
Login: User authenticates
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:
Login: User authenticates
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 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
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
Enable Public Access:
Settings → Public Access → Enable
Configure Public Pages:
Select which pages are accessible without login
Set default redirect for authenticated users
Configure sign-up options
Set Up Authentication:
Email/password
Social login (Google, etc.)
SSO if needed
2FA options
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:
Browse freely (no login)
Save favorites → Login prompted
Advanced features → Login required
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
Last updated
Was this helpful?