Wasp-lang•7mo ago

customize auth UI button shape

Hi, I see there is an appearance to customize the color of the auth UI, how can I change the shape or add more details? @miho

4 Replies

kapa.ai•7mo ago

Hi @terrence. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but based on the provided knowledge sources, there is no direct way to customize the shape of the Auth UI buttons in Wasp. The customization options provided by Wasp for Auth UI mainly include changing the colors via the appearance prop, adding a logo via the logo prop, and changing the layout of the social buttons via the socialLayout prop. However, Wasp uses Stitches (https://stitches.dev/) for styling the Auth UI and Tailwind CSS (https://tailwindcss.com/) for styling the pages. You might be able to use these libraries to further customize the appearance of your Auth UI, including the shape of the buttons. Here is an example of how you can customize the colors of the Auth UI:

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

import { LoginForm } from 'wasp/client/auth'  
import { authAppearance } from './appearance'  
  
export function LoginPage() {  
 return (  
 <LoginForm  
 // Pass the appearance object to the form  
 appearance={authAppearance}  
 />  
 )  
}

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

import { LoginForm } from 'wasp/client/auth'  
import { authAppearance } from './appearance'  
  
export function LoginPage() {  
 return (  
 <LoginForm  
 // Pass the appearance object to the form  
 appearance={authAppearance}  
 />  
 )  
}

For more detailed customization, you might need to create your own custom components or styles. Please refer to the Wasp documentation (https://wasp-lang.dev/docs) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @terrence, 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?

miho•7mo ago

You can't customize the shape with the current setup, you can of course use plain CSS to target the button element inside of some class you put on the parent div 🙂

terrenceOP•7mo ago

so if I use a customized AUTH UI component, how can I integrate the auth process? I see the authentication process integrated within the loginform

miho•7mo ago

Here we described it in detail, you can use Auth UI or you can just use the Wasp backend and write your own components https://wasp-lang.dev/docs/auth/ui

Auth UI | Wasp

To make using authentication in your app as easy as possible, Wasp generates the server-side code but also the client-side UI for you. It enables you to quickly get the login, signup, password reset and email verification flows in your app.

Gaming

Programming

customize auth UI button shape