Wasp-lang•8mo ago

What file contains the styles for the login and signup page

I'm trying to edit the styling of the Auth UI Component because it doesn't fit with the color scheme of my website, but I don't know where the code for it is actually located. Can someone help with this?

4 Replies

kapa.ai•8mo ago

Hi @rithvik12345678. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, the styles for the Auth UI components such as the login and signup forms are not located in a specific file. Instead, you customize the appearance of these forms by passing props to them. To change the color scheme, you can pass an appearance prop to the form. This prop is an object that contains a colors field, which you can use to customize the form colors. 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',  
 },  
}

Then, in your form component, you can pass this authAppearance object as a prop:

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}  
 />  
 )  
}

You can define your authAppearance in a separate file and import it into your components. This way, you can easily manage the styles for all your forms in one place. For more details, you can refer to the Wasp documentation on customizing the Auth UI (https://wasp-lang.dev/docs/auth/ui#customization-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @rithvik12345678, 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?

rithvik12345678OP•8mo ago

Okay but I don't just want to modify the style of the buttons. I want to be able to modify the background color, and the colors of all the text, etc. Is it possible to modify absolutely anything on the Auth UI page using this method or is there another way to do it.

martinsos•8mo ago

There is a limit to how modifyable Auth UI is. Although I guess you could write CSS that will target the elements of it and apply styling -> you can inspect in the dev console and based on that write proper CSS selectors that will modify the styling. That said, I think we don't have direct support for that level of customization. Right @miho ?

miho•8mo ago

The docs point to the list of all tokens: https://github.com/wasp-lang/wasp/blob/release/waspc/data/Generator/templates/react-app/src/stitches.config.js You can get pretty far with the brand and submitButtonText tokens 🙂 Check this out and try what you can do: https://wasp-lang.dev/docs/auth/ui#customization- if that doesn't work for you, you can always just use the backend part of the auth instead of using Auth UI 😄

GitHub

wasp/waspc/data/Generator/templates/react-app/src/stitches.config.j...

The fastest way to develop full-stack web apps with React & Node.js. - wasp-lang/wasp

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

What file contains the styles for the login and signup page