Wasp•3mo ago

Change auth UI text (Different language)

As title says, I'm reading the AUTH UI document page, but I can't find anything about text content. I know "log in" is pretty clear, but I would like to know if there's a way to change the text so it displays "inicia sesión" (spanish)

12 Replies

kapa.ai•3mo ago

Hi @varo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, I don't have specific information about changing the text content of the Auth UI to a different language like Spanish. The documentation mainly focuses on customizing colors, logos, and layouts of the auth forms, but doesn't mention text localization. However, there are a couple of options you might consider: 1. Custom Forms: Instead of using the pre-built Auth UI components, you could create your own custom forms using the auth functions provided by Wasp. As mentioned in one of the Discord support threads:

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

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

Discord support thread (https://discord.com/channels/686873244791210014/1220299304087060510) This approach would allow you to create forms with your desired text in Spanish. 2. Feature Request: It seems that more customization options for the Auth UI are being considered for future versions of Wasp. There's an open issue on GitHub related to making the signup form more flexible: GitHub Issue #1617 (https://github.com/wasp-lang/wasp/issues/1617) You might want to follow this issue or create a new one specifically requesting language customization for the Auth UI. For now, if you need to display the auth forms in Spanish, the most straightforward approach would be to create custom forms using Wasp's auth functions. This way, you have full control over the text content. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @varo, 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?

varoOP•3mo ago

so best approach is making my own login form? @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, based on the information available, creating your own custom login form seems to be the best approach for now. This way, you can control the text content and display it in Spanish or any other language. Here's a basic example of how you can import the login function from Wasp and use it in your own form:

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

// Your custom login form
function MyLoginForm() {
  // form handling logic here
  // when form is submitted, you can call the login function
  login({ email: '[email protected]', password: 'password' })
    .then(user => {
      // handle successful login
    })
    .catch(error => {
      // handle failed login
    });
}

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

// Your custom login form
function MyLoginForm() {
  // form handling logic here
  // when form is submitted, you can call the login function
  login({ email: '[email protected]', password: 'password' })
    .then(user => {
      // handle successful login
    })
    .catch(error => {
      // handle failed login
    });
}

Remember to also handle the signup process if you're creating a signup form. You can import the signup function in a similar way:

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

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

For more details on customizing the signup process, you can refer to the Wasp documentation (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 @varo, 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?

VS•3mo ago

Yeah auth is a little locked right now, you can change colors or use the aftersignin add another form to get more information. They will change it soon

varoOP•3mo ago

yeah I know about the colors, it's just the big "Sign up" or "log in to your account" what I want to change. It seems I can't, I don't know what's the aftersignin you comment. Thanks anyway🫡

VS•3mo ago

Hmm well you can change the fields around the signup if that's what you mean. The literal form is a little locked, check under the auth folder there they have some of the forms described. Ah check the beforesignup and aftersignup hook definitely! You can ask the user some other information which is what a lot of other websites actually do as well Äh im sorry! I see you meant in Spanish I'm not correct here - i apologize, i do think that is locked but actually I just realized I need that definitely, the wasp team will definitely respond

miho•3mo ago

This is something we want to work on in the future: https://github.com/wasp-lang/wasp/issues/2174 Some people had success with hiding the title with CSS as a workaround, maybe you could try that 🙂

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

varoOP•3mo ago

Great! I was looking at playing with CSS yeah, I managed to change some stuff

MEE6•3mo ago

Wohooo @varo, you just became a Waspeteer level 2!

VS•3mo ago

Did you figure it out? Would love to know this

miho•3mo ago

We haven't added support for this yet, but the CSS workaround we talked above means using CSS to hide the h1 tag e.g. .my-auth-form h1 { display: none; }

VS•2mo ago

For others, this is the exact code to put in your css .relative.z-10.flex-auto.bg-primary.px-4.py-10.shadow-2xl h2[class^="c-"] { display: none !important; margin-top: -2rem; }

Gaming

Programming

Change auth UI text (Different language)

Did you find this page helpful?