Where can I find the code for the login form?

5 Replies

Hi @mb23. 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 login form is provided as a pre-built component that you can import and use in your application. You can find the code for using the login form in your application in the Wasp documentation here (https://wasp-lang.dev/docs/auth/ui#login-form). Here is an example of how you can use the LoginForm component in your application: For JavaScript:

import { LoginForm } from 'wasp/client/auth'  
  
export function LoginPage() {  
 return <LoginForm />  
}

import { LoginForm } from 'wasp/client/auth'  
  
export function LoginPage() {  
 return <LoginForm />  
}

For TypeScript:

import { LoginForm } from 'wasp/client/auth'  
  
export function LoginPage() {  
 return <LoginForm />  
}

import { LoginForm } from 'wasp/client/auth'  
  
export function LoginPage() {  
 return <LoginForm />  
}

This component will automatically show the correct authentication providers based on your main.wasp file. If you want to customize the login form, such as adding your logo or custom colors, you can do so by passing props to the LoginForm component. You can find more information about customizing the login form in the Wasp documentation here (https://wasp-lang.dev/docs/auth/ui#2-using-your-logo) and here (https://wasp-lang.dev/docs/auth/ui#lets-put-everything-together-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mb23, 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?

miho•5mo ago

Did the bot answer your question? 😄

mb23OP•5mo ago

@miho not really 😄 (although I'm feeling a bit dumb haha)

miho•5mo ago

1️⃣ If you want to use Wasp's Auth UI, here are the docs going into details: https://wasp-lang.dev/docs/auth/ui You can import the LoginForm and use it, customize it etc. 2️⃣ If you want to check out the actual code of the React component and maybe study it for some reason, you can see the generated code in the .wasp/out/sdk/wasp/auth/forms/Login.tsx file. ⚠️ But you can't really edit that file since the next time Wasp regenerates your project, your changes will be overridden. 3️⃣ If you are looking to create your custom login form different from the Auth UI that Wasp gives you, you can write your own React component which only uses Wasp's backend actions. Here's an example for Username & password login: https://wasp-lang.dev/docs/auth/username-and-pass#1-using-the-signup-and-login-actions

mb23OP•5mo ago

@miho great, thanks!

Gaming

Programming

Where can I find the code for the login form?