Wasp•3mo ago

How can I edit the Auth login/logout screens?

Sorry if this has been asked already, I tried searching but no luck. I am trying to edit the login/logout inputs, text, and styles but it looks like it is being imported like so:

import { LoginForm } from "wasp/client/auth";

import { LoginForm } from "wasp/client/auth";

since everything is being imported from wasp client how do we have control over the styling and updating any of the text? Its my understanding that is is build directory and probably shouldn't be edited.

7 Replies

kapa.ai•3mo ago

Hi @cmcglynn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're right that the Auth UI components are imported from Wasp and shouldn't be directly edited. However, Wasp provides ways to customize these components without modifying the build directory. Here's how you can edit the Auth login/logout screens: 1. Customizing Colors and Appearance: You can customize the colors and appearance of the Auth UI components by passing an appearance prop. This allows you to override the default theme tokens.

   import { LoginForm } from 'wasp/client/auth'
   
   const authAppearance = {
     colors: {
       brand: '#5969b8', // blue
       brandAccent: '#de5998', // pink
       submitButtonText: 'white',
     },
   }
   
   export function LoginPage() {
     return <LoginForm appearance={authAppearance} />
   }

   import { LoginForm } from 'wasp/client/auth'
   
   const authAppearance = {
     colors: {
       brand: '#5969b8', // blue
       brandAccent: '#de5998', // pink
       submitButtonText: 'white',
     },
   }
   
   export function LoginPage() {
     return <LoginForm appearance={authAppearance} />
   }

You can find a list of all available tokens to customize in the Wasp Auth UI documentation (https://wasp-lang.dev/docs/auth/ui#customization-). 2. Adding a Logo: You can add your own logo to the Auth forms by passing a logo prop:

   import { LoginForm } from 'wasp/client/auth'
   import todoLogo from './todoLogo.png'
   
   export function LoginPage() {
     return <LoginForm logo={todoLogo} />
   }

   import { LoginForm } from 'wasp/client/auth'
   import todoLogo from './todoLogo.png'
   
   export function LoginPage() {
     return <LoginForm logo={todoLogo} />
   }

3. Customizing Social Button Layout: If you're using social auth providers, you can customize the layout of the social buttons:

   <LoginForm socialLayout="horizontal" />

   <LoginForm socialLayout="horizontal" />

4. Building Custom Forms: If you need more control over the form structure or want to completely customize the login/logout screens, you can create your own forms using Wasp's auth functions and hooks. For example:

   import { login, signup } from "wasp/client/auth";
   
   // Then create your own custom form components using these functions

   import { login, signup } from "wasp/client/auth";
   
   // Then create your own custom form components using these functions

Note that if you're customizing the signup process, you'll also need to define a userSignupFields function as mentioned in the Wasp Auth documentation (https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process). Remember, while you can't directly edit the imported components, Wasp provides these customization options to give you control over the styling and content of the Auth UI. Auth UI Customization (https://wasp-lang.dev/docs/auth/ui#customization-) Auth Components Overview (https://wasp-lang.dev/docs/auth/ui#auth-components) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @cmcglynn, 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?

martinsos•3mo ago

Yup, check Auth docs and you will see some ways to customize the form. Beyond that, you can either directly target HTML/CSS of the form to modify it (even hide stuff and add your content -> a bit hacky but works), and finally, you can impelment your own form if you need more control (docs for Auth have instructions for that).

mstalberg•2mo ago

Where are the docs for Auth api? On the site Im only finding stuff with these premade forms and am curious about making a custom form and being able to handle error codes on my own, as well as provide custom password requirements and stuff like that.

martinsos•2mo ago

It should be in the docs, you can write your own Login Form that uses actions that Wasp provides, but I do admit it is harder to find in docs than I expected hm! I found it for Username and pass here: https://wasp-lang.dev/docs/auth/username-and-pass#1-using-the-signup-and-login-actions . But I actually failed to find it for Email method. Is it possible that this is not doable for email and pass method @miho ? Or we forgot to document it?

Username & Password | Wasp

Wasp supports username & password authentication out of the box with login and signup flows. It provides you with the server-side implementation and the UI components for the client side.

martinsos•2mo ago

Oh actually we have an issue for this, it is missing in docs indeed! Uff we should add this https://github.com/wasp-lang/wasp/issues/1438

GitHub

Email auth docs don't explain how to use signup and login actio...

We want to add something similar to what we did for Username & password auth: https://wasp-lang.dev/docs/auth/username-and-pass#customizing-the-auth-flow

martinsos•2mo ago

I put it back on triage so we can potentially prioritize it

mstalberg•2mo ago

Thank you for the follow up and response! Good to know it’s on the radar at least

Gaming

Programming

How can I edit the Auth login/logout screens?

Did you find this page helpful?