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
kapa.aiβ€’3mo 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?
rithvik12345678
rithvik12345678β€’3mo 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
martinsosβ€’3mo 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
mihoβ€’3mo 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.