Authentication
Login, signup, password reset, and OTP verification forms.
Login Form
Email and password login form with remember me checkbox and validation.
Sign in
Enter your credentials to access your account.
import { LoginForm } from "@launchapp/design-system/blocks/auth";export default function Page() { return ( <LoginForm onSubmit={async (values) => { console.log(values); }} onSignUpClick={() => console.log("sign up")} /> );}Sign Up Form
User registration form with name, email, and password fields.
Create an account
Fill in the details below to get started.
import { SignUpForm } from "@launchapp/design-system/blocks/auth";export default function Page() { return ( <SignUpForm onSubmit={async (values) => { console.log(values); }} onSignInClick={() => console.log("sign in")} /> );}Forgot Password Form
Password reset request form with email input and success state.
Forgot password
Enter your email address and we'll send you a reset link.
import { ForgotPasswordForm } from "@launchapp/design-system/blocks/auth";export default function Page() { return ( <ForgotPasswordForm onSubmit={async (values) => { console.log(values); }} onBackToLoginClick={() => console.log("back to login")} /> );}OTP Verification
One-time password input for two-factor authentication.
Verify your email
We sent a 6-digit code to alice@example.com.
Didn't receive a code?
import { OTPVerification } from "@launchapp/design-system/blocks/auth";export default function Page() { return ( <OTPVerification onVerify={async (otp) => { console.log(otp); }} onResend={() => console.log("resend")} /> );}Auth Form Block
Configurable auth form supporting login, signup, and forgot-password modes.
No preview available
See the code snippet below for usage.
import { AuthFormBlock } from "@launchapp/design-system/blocks/auth";export default function Page() { return ( <AuthFormBlock mode="login" onLogin={async (email, password) => console.log("login", email)} onSignup={async (email, password) => console.log("signup", email)} /> );}Reset Password Form
Form for setting a new password after receiving a reset token.
No preview available
See the code snippet below for usage.
import { ResetPasswordForm } from "@launchapp/design-system/blocks/auth";export default function Page() { return ( <ResetPasswordForm onSubmit={async (password) => console.log("reset password", password)} /> );}