FreeTemplate · Auth pages
Auth Pages
Sign in, sign up and forgot-password screens in Vue 3 with a split brand panel, inline validation and a password visibility toggle. Tailwind CSS, dark mode.
by Vueplay
Vue login and signup page templates
Login, signup and password reset screens are small but get used by everyone. These Vue 3 auth page templates provide the forms and layouts, built with Tailwind CSS 4 and class-based dark mode, so you can connect them to the auth provider you already use.
They emit form values rather than calling a specific service, and have no dependencies besides vue. Install one with npm, copy the source, or adjust the layout in the Vueplay Studio.
FreeGood to know
Building auth pages that hold up
- Help password managers
- Use autocomplete="username", "current-password" and "new-password" on the right fields and keep them inside a real <form>. Password managers and browser autofill depend on it.
- Allow showing the password
- A show/hide toggle reduces typos and makes confirm-password fields unnecessary. Make it a button with aria-pressed and a clear label.
- Keep error messages safe and specific
- Say "Email or password is incorrect" rather than revealing which one was wrong. Announce errors with role="alert" so screen reader users hear them.
- Prevent double submits
- Disable the submit button and show a loading state while the request is in flight, and re-enable it on failure.
FAQ
Questions
Which auth providers do these templates work with?
Any of them. The templates only handle the UI and emit form values, so you call your own API, Supabase, Firebase, Auth0 or a session-based backend.
Do the templates include social login buttons?
Some layouts include buttons for third-party sign-in. They are plain buttons or links you point at your provider's OAuth flow.