LoginForm colors is the only things customizeable

i want to add my one things

1 Reply

Hi @Ozy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- No, the LoginForm colors are not the only customizable aspect of the Wasp's Auth UI. You can customize several aspects of the Auth UI, including: 1. Colors: You can customize the form colors by passing an appearance prop to the form. This prop should be an object that defines the colors for different parts of the form. You can define this object in a separate file and import it into your components. source (https://wasp-lang.dev/docs/auth/ui#customization-)

export const authAppearance = {  
 colors: {  
 brand: '#5969b8', // blue  
 brandAccent: '#de5998', // pink  
 submitButtonText: 'white',  
 },  
}

export const authAppearance = {  
 colors: {  
 brand: '#5969b8', // blue  
 brandAccent: '#de5998', // pink  
 submitButtonText: 'white',  
 },  
}

2. Logo: You can add your logo to the Auth UI by passing the logo prop to any of the components. This prop should be the path to your logo. source (https://wasp-lang.dev/docs/auth/ui#2-using-your-logo)

import { LoginForm } from 'wasp/client/auth'  
import Logo from './logo.png'  
  
export function LoginPage() {  
 return (  
 <LoginForm  
 // Pass in the path to your logo  
 logo={Logo}  
 />  
 )  
}

import { LoginForm } from 'wasp/client/auth'  
import Logo from './logo.png'  
  
export function LoginPage() {  
 return (  
 <LoginForm  
 // Pass in the path to your logo  
 logo={Logo}  
 />  
 )  
}

3. Social Layout: You can customize the layout of the social buttons by passing the socialLayout prop to the form. This prop can be either vertical or horizontal. 4. Additional Fields: You can add extra fields to your signup process and save them in the User entity. You can do this by passing in the additionalFields prop to the SignupForm. This prop can be either a list of extra fields or a render function. source (https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process)

import {  
 SignupForm,  
 FormError,  
 FormInput,  
 FormItemGroup,  
 FormLabel,  
} from 'wasp/client/auth'  
  
export const SignupPage = () => {  
 return (  
 <SignupForm  
 additionalFields={[  
 {  
 name: 'address',  
 label: 'Address',  
 type: 'input',  
 validations: {  
 required: 'Address is required',  
 },  
 },  
 (form, state) => {  
 return (  
 <FormItemGroup>  
 <FormLabel>Phone Number</FormLabel>  
 <FormInput  
 {...form.register('phoneNumber', {  
 required: 'Phone number is required',  
 })}  
 disabled={state.isLoading}  
 />  
 {form.formState.errors.phoneNumber && (  
 <FormError>  
 {form.formState.errors.phoneNumber.message}  
 </FormError>  
 )}  
 </FormItemGroup>  
 )  
 },  
 ]}  
 />  
 )  
}

import {  
 SignupForm,  
 FormError,  
 FormInput,  
 FormItemGroup,  
 FormLabel,  
} from 'wasp/client/auth'  
  
export const SignupPage = () => {  
 return (  
 <SignupForm  
 additionalFields={[  
 {  
 name: 'address',  
 label: 'Address',  
 type: 'input',  
 validations: {  
 required: 'Address is required',  
 },  
 },  
 (form, state) => {  
 return (  
 <FormItemGroup>  
 <FormLabel>Phone Number</FormLabel>  
 <FormInput  
 {...form.register('phoneNumber', {  
 required: 'Phone number is required',  
 })}  
 disabled={state.isLoading}  
 />  
 {form.formState.errors.phoneNumber && (  
 <FormError>  
 {form.formState.errors.phoneNumber.message}  
 </FormError>  
 )}  
 </FormItemGroup>  
 )  
 },  
 ]}  
 />  
 )  
}

If you need finer control over the form, you can build your own form using the login and signup functions provided by Wasp. source (https://discord.com/channels/686873244791210014/1220299304087060510) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Ozy, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gaming

Programming

LoginForm colors is the only things customizeable