Auth Flow

Auth Flow — Modern & Secure

Complete authentication flow with login, signup, forgot password, and email verification screens.

Compatible with:

cursorlovableclaude

Create a modern authentication flow with these screens:

LOGIN SCREEN:
- Centered card (max-width: 400px)
- Email and password inputs
- "Remember me" checkbox
- "Forgot password?" link
- Primary login button
- "Or continue with" social login options (Google, GitHub)
- "Don't have an account? Sign up" link at bottom

SIGNUP SCREEN:
- Similar layout to login
- Fields: Name, Email, Password, Confirm Password
- Password strength indicator
- Terms of service checkbox
- Social signup options
- "Already have an account? Log in" link

FORGOT PASSWORD:
- Email input only
- "Send reset link" button
- Back to login link
- Success message state

EMAIL VERIFICATION:
- Illustration or icon
- "Check your email" message
- Resend email button
- Countdown timer for resend

STYLING:
- Clean, minimal design
- Soft shadows on cards
- Blue accent color for buttons (#3b82f6)
- Input focus states with border color change
- Error states in red
- Success states in green
- Loading states on buttons

How to Use

1Click the "Copy Prompt" button above
2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
3Paste the prompt and let the AI generate your UI
4Customize the output to match your brand and content

💡 Tips

Integrate with your backend auth system. Add proper form validation. Consider adding 2FA screens if needed.