custom auth page

K

kapa.ai•9/3/24, 6:57 PM

Hi @Anddy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•9/3/24, 6:57 PM

----------------------
You can customize the login and signup forms in Wasp by using the

LoginForm

LoginForm

LoginForm

LoginForm and

SignupForm

SignupForm

SignupForm

SignupForm components respectively. These components are part of Wasp's Auth UI and can be customized by passing props to them.

For the login form, you can use the

LoginForm

LoginForm

LoginForm

LoginForm component to build your login page. Here is an example:

// main.wasp
// ...  
route LoginRoute { path: "/login", to: LoginPage }  
page LoginPage {  
 component: import { LoginPage } from "@src/LoginPage.jsx"  
}  

// src/LoginPage.jsx
import { LoginForm } from 'wasp/client/auth'  
  
// Use it like this  
export function LoginPage() {  
 return <LoginForm />  
}

// main.wasp
// ...  
route LoginRoute { path: "/login", to: LoginPage }  
page LoginPage {  
 component: import { LoginPage } from "@src/LoginPage.jsx"  
}  

// src/LoginPage.jsx
import { LoginForm } from 'wasp/client/auth'  
  
// Use it like this  
export function LoginPage() {  
 return <LoginForm />  
}

// main.wasp
// ...  
route LoginRoute { path: "/login", to: LoginPage }  
page LoginPage {  
 component: import { LoginPage } from "@src/LoginPage.jsx"  
}  

// src/LoginPage.jsx
import { LoginForm } from 'wasp/client/auth'  
  
// Use it like this  
export function LoginPage() {  
 return <LoginForm />  
}

// main.wasp
// ...  
route LoginRoute { path: "/login", to: LoginPage }  
page LoginPage {  
 component: import { LoginPage } from "@src/LoginPage.jsx"  
}  

// src/LoginPage.jsx
import { LoginForm } from 'wasp/client/auth'  
  
// Use it like this  
export function LoginPage() {  
 return <LoginForm />  
}

The

LoginForm

LoginForm

LoginForm

LoginForm component will automatically show the correct authentication providers based on your

main.wasp

main.wasp

file source (https://wasp-lang.dev/docs/auth/ui#auth-components).

For the signup form, you can use the

SignupForm

SignupForm

SignupForm

SignupForm component to build your signup page. Here is an example:

// main.wasp
// ...  
route SignupRoute { path: "/signup", to: SignupPage }  
page SignupPage {  
 component: import { SignupPage } from "@src/SignupPage.jsx"  
}  

// src/SignupPage.jsx
import { SignupForm } from 'wasp/client/auth'  
  
// Use it like this  
export function SignupPage() {  
 return <SignupForm />  
}

// main.wasp
// ...  
route SignupRoute { path: "/signup", to: SignupPage }  
page SignupPage {  
 component: import { SignupPage } from "@src/SignupPage.jsx"  
}  

// src/SignupPage.jsx
import { SignupForm } from 'wasp/client/auth'  
  
// Use it like this  
export function SignupPage() {  
 return <SignupForm />  
}

// main.wasp
// ...  
route SignupRoute { path: "/signup", to: SignupPage }  
page SignupPage {  
 component: import { SignupPage } from "@src/SignupPage.jsx"  
}  

// src/SignupPage.jsx
import { SignupForm } from 'wasp/client/auth'  
  
// Use it like this  
export function SignupPage() {  
 return <SignupForm />  
}

// main.wasp
// ...  
route SignupRoute { path: "/signup", to: SignupPage }  
page SignupPage {  
 component: import { SignupPage } from "@src/SignupPage.jsx"  
}  

// src/SignupPage.jsx
import { SignupForm } from 'wasp/client/auth'  
  
// Use it like this  
export function SignupPage() {  
 return <SignupForm />  
}

The

SignupForm

SignupForm

SignupForm

SignupForm component will automatically show the correct authentication providers based on your

main.wasp

main.wasp

file source (https://wasp-lang.dev/docs/auth/ui#signup-form).

You can also customize the appearance of these forms by passing the

appearance

appearance

prop to them. This allows you to customize the form colors (via design tokens), the path to your logo, and the layout of the social buttons source (https://wasp-lang.dev/docs/auth/ui#customization-).

K

kapa.ai•9/3/24, 6:57 PM

If you need to add additional fields to the signup form, you can do so by passing the

additionalFields

additionalFields

prop to the

SignupForm

SignupForm

SignupForm

SignupForm component. This can be either a list of extra fields or a render function source (https://wasp-lang.dev/docs/auth/overview#2-customizing-the-signup-component).

If you require more control in your authentication flow, you can create your own UI and use

signup

signup

and

login

login

actions, or create your custom sign-up action which uses the lower-level API, along with your custom code source (https://wasp-lang.dev/docs/auth/username-and-pass#customizing-the-auth-flow).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•9/3/24, 6:58 PM

Sorry @Anddy, 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?

custom auth page

Similar Threads

Similar Threads

Similar Threads