Adding Authentication
This guide walks you through adding user authentication to your app, allowing users to create accounts, log in, and access their personal data.What You’ll Build
- Sign up with email and password
- Log in to existing account
- Persistent login sessions
- Protected routes (only accessible when logged in)
- Logout functionality
Step 1: Add Auth Screens
Start by asking the AI to create the authentication UI:Step 2: Connect to Backend
Now add the backend authentication logic:This creates the necessary API endpoints in Liquid Backend:
/api/auth/register, /api/auth/login, and /api/auth/me.Step 3: Protect Routes
Make certain screens require authentication:Step 4: Add Logout
Add a way for users to sign out:Step 5: Add User Profile
Show user information in the app:Testing Your Auth Flow
Test the complete flow:1
Sign Up
Create a new account with test credentials
2
Verify Login
After signup, you should be on the home screen
3
Test Persistence
Reload the preview - you should still be logged in
4
Logout
Sign out and verify you’re back at login
5
Login Again
Log in with your test credentials
Common Authentication Patterns
Showing Auth Status
Forgot Password
Social Login
Apple & Google Login with Supabase
Using Supabase as your backend? Follow the step-by-step walkthrough for Sign in with Apple and Google.
User-Specific Data
Once authentication is set up, associate data with users:Best Practices
Validate Input
Check email format and password strength
Clear Error Messages
Tell users exactly what went wrong
Loading States
Show loading indicators during auth operations
Secure Storage
Auth tokens are stored securely automatically
Troubleshooting
Login fails with valid credentials
Login fails with valid credentials
- Check the backend logs for errors
- Verify the account was created successfully
- Try creating a new account
Session not persisting
Session not persisting
- Tell the AI: “The login session is not persisting across app restarts”
- Verify secure storage is being used correctly
Can't access protected screens
Can't access protected screens
- Check the auth state logic
- Verify the auth check runs on app launch
Next Steps
Connect Database
Store user-specific data
Add Payments
Monetize with subscriptions