Wasp-lang•3mo ago

Update Google Auth style

Hi I currently using google auth for my app and I want update the Google Auth styles and labels, wondering how should I approach this, as this component is created behind the scenes by wasp and less control on configuration #auth #google

5 Replies

kapa.ai•3mo ago

Hi @ml. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can customize the appearance of your Google Auth form by passing props to the form. Wasp uses Stitches (https://stitches.dev/) to style the Auth UI. You can customize the styles by overriding the default theme tokens. Here's an example of how you can customize the colors:

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, you can pass this appearance object to your 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}  
 />  
 )  
}

You can also pass a logo prop to the form to customize the logo, and a socialLayout prop to customize the layout of the social buttons. The socialLayout can be either vertical or horizontal. For more details, you can refer to the Wasp documentation on Auth UI customization (https://wasp-lang.dev/docs/auth/ui#customization-). However, if you need more control over the form, you might need to create your own form using the login and signup functions provided by Wasp, as suggested in the Discord support thread (https://discord.com/channels/686873244791210014/1220299304087060510).

import { login, signup } from "wasp/client/auth";

import { login, signup } from "wasp/client/auth";

Please note that if you choose to create your own form, you'll also need to define a userSignupFields function. You can find more information about this in the Wasp documentation on customizing the signup process (https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ml, 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?

wardbox•3mo ago

one thing i recently found was wrapping the page in a div with a class, if the built in authappearance can't do what you need ie LoginPage.tsx

export function LoginPage() {
  return (
    <div className="login h-full max-w-lg mx-auto p-8">
      <LoginForm />
      <br />
      <span>
        I don't have an account yet (<Link to="/signup">go to signup</Link>).
      </span>
    </div>
  );

export function LoginPage() {
  return (
    <div className="login h-full max-w-lg mx-auto p-8">
      <LoginForm />
      <br />
      <span>
        I don't have an account yet (<Link to="/signup">go to signup</Link>).
      </span>
    </div>
  );

Main.css

.login svg {
  fill: var(--foreground);
}

.login a {
  @apply text-primary;
  text-decoration: underline;
  transition-duration: 300ms;
}

.login a:hover {
  color: white;
  transition-duration: 300ms;
}

.login svg {
  fill: var(--foreground);
}

.login a {
  @apply text-primary;
  text-decoration: underline;
  transition-duration: 300ms;
}

.login a:hover {
  color: white;
  transition-duration: 300ms;
}

swap it out with whatever styles you want

MEE6•3mo ago

Wohooo @wardbox, you just became a Waspeteer level 6!

miho•3mo ago

@wardbox nice trick you got there! What can we do to make it the best DX for you?

wardbox•3mo ago

i only did that because i couldn't figure out how to get it to work with my dark mode colors. so the input text color is white because my foreground text color is white but the input background color doesn't have an option in the stitches config

Gaming

Programming

Update Google Auth style