auth wasp language
Is it possible to edit the auth generated by wasp? I would like to internationalize the form content for multiple languages. https://wasp.sh/docs/auth/ui
5 Replies
Hi @Gabriell. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Wasp provides auto-generated Auth UI components (like LoginForm and SignupForm) that you can use and customize to some extent, such as changing colors, adding a logo, or adjusting the layout of social login buttons by passing props like appearance, logo, and socialLayout to the forms. However, the knowledge sources do not mention built-in support for internationalizing (i18n) the form content or editing the default text directly through props or configuration.
If you need full control over the form content (for example, to support multiple languages), the recommended approach is to build your own custom auth forms using the lower-level auth actions (like login and signup) provided by Wasp. This way, you can fully control the UI and text, including internationalization, while still leveraging Wasp's backend auth logic. You can import these actions and build your own forms as needed:
For more details on customizing the signup process and using custom forms, see the official documentation: Customizing the Signup Process and Customizing the Auth Flow.
In summary:
- The default Auth UI does not support i18n out of the box. - For internationalization, you should create your own forms and use Wasp's auth actions in your components. If you need to hide or style certain elements in the default forms, some users have used CSS/JS workarounds, but this does not provide true i18n and is not recommended for full language support. For complete control, building your own forms is the best path forwardAuth UICustomizing the Signup Process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gabriell, 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?
- The default Auth UI does not support i18n out of the box. - For internationalization, you should create your own forms and use Wasp's auth actions in your components. If you need to hide or style certain elements in the default forms, some users have used CSS/JS workarounds, but this does not provide true i18n and is not recommended for full language support. For complete control, building your own forms is the best path forwardAuth UICustomizing the Signup Process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gabriell, 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?
would it work with crowdin? how could i internationalize the standard wasp forms.
@kapa.ai would it work with crowdin? how could i internationalize the standard wasp forms.
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but the knowledge sources do not contain any information about integrating Wasp's standard auth forms with Crowdin or any other i18n platform. There is also no documentation on internationalizing the default, auto-generated Wasp auth forms or changing their text content for multiple languages.
The only documented way to achieve full internationalization is to build your own custom auth forms using Wasp's lower-level auth actions (such as login and signup). This approach allows you to control all text and integrate any i18n solution you prefer, including Crowdin, but it requires you to forgo the standard Wasp forms and implement your own UI logic Customizing the Signup Process.
In summary:
- There is no built-in support for i18n or Crowdin in the standard Wasp auth forms. - To internationalize auth forms, you need to create custom forms and use Wasp's auth actions in your components. If you need more advanced i18n features, building your own forms is currently the recommended approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gabriell, 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?
- There is no built-in support for i18n or Crowdin in the standard Wasp auth forms. - To internationalize auth forms, you need to create custom forms and use Wasp's auth actions in your components. If you need more advanced i18n features, building your own forms is currently the recommended approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gabriell, 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?
Hey @Gabriell, I don't think you'll have an easy time with this
We have an open issue for supporting i18n in auth: https://github.com/wasp-lang/wasp/issues/1104
Maybe @miho can tell you something more than I can
Auth UI has currently hard-coded strings, and this is something we want to improve. But for now, you are stuck with our string if you'd like to use our UI. You can always create your own custom UI and use only our backend part of auth: https://wasp.sh/docs/auth/email/create-your-own-ui
Create your own UI | Wasp
When using the email auth provider, users log in with their email address and a password. On signup, Wasp validates the data and sends a verification email. The user account is not active until the user clicks the link in the verification email. Also, the user can reset their password through a similar flow.