LoginForm and SignupForm components respectively. These components are part of Wasp's Auth UI and can be customized by passing props to them.LoginForm component to build your login page. Here is an example:LoginForm component will automatically show the correct authentication providers based on your main.wasp file source (https://wasp-lang.dev/docs/auth/ui#auth-components).SignupForm component to build your signup page. Here is an example:SignupForm component will automatically show the correct authentication providers based on your main.wasp file source (https://wasp-lang.dev/docs/auth/ui#signup-form).appearance prop to them. This allows you to customize the form colors (via design tokens), the path to your logo, and the layout of the social buttons source (https://wasp-lang.dev/docs/auth/ui#customization-).additionalFields prop to the SignupForm component. This can be either a list of extra fields or a render function source (https://wasp-lang.dev/docs/auth/overview#2-customizing-the-signup-component).signup and login actions, or create your custom sign-up action which uses the lower-level API, along with your custom code source (https://wasp-lang.dev/docs/auth/username-and-pass#customizing-the-auth-flow).LoginFormLoginFormLoginFormSignupFormSignupFormSignupFormSignupForm// main.wasp
// ...
route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
component: import { LoginPage } from "@src/LoginPage.jsx"
}
// src/LoginPage.jsx
import { LoginForm } from 'wasp/client/auth'
// Use it like this
export function LoginPage() {
return <LoginForm />
} // main.wasp
// ...
route SignupRoute { path: "/signup", to: SignupPage }
page SignupPage {
component: import { SignupPage } from "@src/SignupPage.jsx"
}
// src/SignupPage.jsx
import { SignupForm } from 'wasp/client/auth'
// Use it like this
export function SignupPage() {
return <SignupForm />
}