Changing auth social buttons style

Hey there! Is there a way to style the social buttons in the Auth UI?

6 Replies

MEE6•2w ago

Wohooo @Andrea, you just became a Waspeteer level 1!

Hi @Andrea. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can change the layout of the social buttons in the Auth UI by passing the socialLayout prop to any of the components. The socialLayout prop can be either vertical or horizontal (default). Here is an example of how you can do it:

import { LoginForm } from 'wasp/client/auth'  
  
export function LoginPage() {  
 return (  
 <LoginForm  
 // Pass in the socialLayout prop  
 socialLayout="vertical"  
 />  
 )  
}

import { LoginForm } from 'wasp/client/auth'  
  
export function LoginPage() {  
 return (  
 <LoginForm  
 // Pass in the socialLayout prop  
 socialLayout="vertical"  
 />  
 )  
}

This will arrange the social buttons vertically. If you want them to be arranged horizontally, you can pass horizontal to the socialLayout prop. For more details, you can check the official documentation (https://wasp-lang.dev/docs/auth/ui#3-social-buttons-layout). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Andrea, 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?

Andrea•2w ago

@kapa.ai can I change the colors?

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can customize the colors of the Auth UI forms in Wasp by passing an appearance prop to them. This prop should be an object that defines the colors for different parts of the form. Here's an example:

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

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

You can then pass this authAppearance object to the form:

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

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

This will change the colors of the form according to the authAppearance object. The brand color is used for the main color of the form, the brandAccent color is used for accent elements, and the submitButtonText color is used for the color of the text on the submit button. For more details, you can check the official documentation (https://wasp-lang.dev/docs/auth/ui#customization-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Andrea, 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?

Andrea•2w ago

This doesn't work for social buttons, only for email auth

miho•2w ago

Yep, we didn't expose the styling of OAuth buttons, sorry about that! Mentioned your thread here: https://github.com/wasp-lang/wasp/issues/2174

GitHub

Make Auth UI Signup / Login forms more customizable · Issue #2174 ·...

allow changing the order of the default fields allow customizing text allow adding additional text

Gaming

Programming

Changing auth social buttons style