Auth UI
To make using authentication in your app as easy as possible, Wasp generates the server-side code but also the client-side UI for you. It enables you to quickly get the login, signup, password reset and email verification flows in your app.
Below we cover all of the available UI components and how to use them.
Remember that if you need a more custom approach, you can always create your own UI.
Overviewβ
After Wasp generates the UI components for your auth, you can use it as is, or customize it to your liking.
Based on the authentication providers you enabled in your main.wasp file, the Auth UI will show the corresponding UI (form and buttons). For example, if you enabled e-mail authentication:
- JavaScript
- TypeScript
appMyApp{
//...
auth: {
methods: {
email: {},
},
// ...
}
}
appMyApp{
//...
auth: {
methods: {
email: {},
},
// ...
}
}
You'll get the following UI:
And then if you enable Google and Github:
- JavaScript
- TypeScript
appMyApp{
//...
auth: {
methods: {
email: {},
google: {},
github: {},
},
// ...
}
}
appMyApp{
//...
auth: {
methods: {
email: {},
google: {},
github: {},
},
// ...
}
}
The form will automatically update to look like this:
Let's go through all of the available components and how to use them.
Auth Componentsβ
The following components are available for you to use in your app:
Login Formβ
Used with Username & Password, Email, Github, Google, Keycloak, Slack and Discord authentication.
You can use the LoginForm component to build your login page:
- JavaScript
- TypeScript
// ...
routeLoginRoute{path: "/login",to: LoginPage}
pageLoginPage{
component: import{LoginPage}from"@src/LoginPage"
}
import{LoginForm}from'wasp/client/auth'
// Use it like this
exportfunctionLoginPage(){
return<LoginForm/>
}
// ...
routeLoginRoute{path: "/login",to: LoginPage}
pageLoginPage{
component: import{LoginPage}from"@src/LoginPage"
}
import{LoginForm}from'wasp/client/auth'
// Use it like this
exportfunctionLoginPage(){
return<LoginForm/>
}
It will automatically show the correct authentication providers based on your main.wasp file.
Signup Formβ
Used with Username & Password, Email, Github, Google, Keycloak, Slack and Discord authentication.
You can use the SignupForm component to build your signup page:
- JavaScript
- TypeScript
// ...
routeSignupRoute{path: "/signup",to: SignupPage}
pageSignupPage{
component: import{SignupPage}from"@src/SignupPage"
}
import{SignupForm}from'wasp/client/auth'
// Use it like this
exportfunctionSignupPage(){
return<SignupForm/>
}
// ...
routeSignupRoute{path: "/signup",to: SignupPage}
pageSignupPage{
component: import{SignupPage}from"@src/SignupPage"
}
import{SignupForm}from'wasp/client/auth'
// Use it like this
exportfunctionSignupPage(){
return<SignupForm/>
}
It will automatically show the correct authentication providers based on your main.wasp file.
Read more about customizing the signup process like adding additional fields or extra UI in the Auth Overview section.
Forgot Password Formβ
Used with Email authentication.
If users forget their password, they can use this form to reset it.
You can use the ForgotPasswordForm component to build your own forgot password page:
- JavaScript
- TypeScript
// ...
routeRequestPasswordResetRoute{path: "/request-password-reset",to: RequestPasswordResetPage}
pageRequestPasswordResetPage{
component: import{ForgotPasswordPage}from"@src/ForgotPasswordPage"
}
import{ForgotPasswordForm}from'wasp/client/auth'
// Use it like this
exportfunctionForgotPasswordPage(){
return<ForgotPasswordForm/>
}
// ...
routeRequestPasswordResetRoute{path: "/request-password-reset",to: RequestPasswordResetPage}
pageRequestPasswordResetPage{
component: import{ForgotPasswordPage}from"@src/ForgotPasswordPage"
}
import{ForgotPasswordForm}from'wasp/client/auth'
// Use it like this
exportfunctionForgotPasswordPage(){
return<ForgotPasswordForm/>
}
Reset Password Formβ
Used with Email authentication.
After users click on the link in the email they receive after submitting the forgot password form, they will be redirected to this form where they can reset their password.
You can use the ResetPasswordForm component to build your reset password page:
- JavaScript
- TypeScript
// ...
routePasswordResetRoute{path: "/password-reset",to: PasswordResetPage}
pagePasswordResetPage{
component: import{ResetPasswordPage}from"@src/ResetPasswordPage"
}
import{ResetPasswordForm}from'wasp/client/auth'
// Use it like this
exportfunctionResetPasswordPage(){
return<ResetPasswordForm/>
}
// ...
routePasswordResetRoute{path: "/password-reset",to: PasswordResetPage}
pagePasswordResetPage{
component: import{ResetPasswordPage}from"@src/ResetPasswordPage"
}
import{ResetPasswordForm}from'wasp/client/auth'
// Use it like this
exportfunctionResetPasswordPage(){
return<ResetPasswordForm/>
}
Verify Email Formβ
Used with Email authentication.
After users sign up, they will receive an email with a link to this form where they can verify their email.
You can use the VerifyEmailForm component to build your email verification page:
- JavaScript
- TypeScript
// ...
routeEmailVerificationRoute{path: "/email-verification",to: EmailVerificationPage}
pageEmailVerificationPage{
component: import{VerifyEmailPage}from"@src/VerifyEmailPage"
}
import{VerifyEmailForm}from'wasp/client/auth'
// Use it like this
exportfunctionVerifyEmailPage(){
return<VerifyEmailForm/>
}
// ...
routeEmailVerificationRoute{path: "/email-verification",to: EmailVerificationPage}
pageEmailVerificationPage{
component: import{VerifyEmailPage}from"@src/VerifyEmailPage"
}
import{VerifyEmailForm}from'wasp/client/auth'
// Use it like this
exportfunctionVerifyEmailPage(){
return<VerifyEmailForm/>
}
Customization π π»β
You customize all of the available forms by passing props to them.
Props you can pass to all of the forms:
appearance- customize the form colors (via design tokens)logo- path to your logosocialLayout- layout of the social buttons, which can beverticalorhorizontal
1. Customizing the Colorsβ
We use CSS variables in our styling so you can customize the styles by overriding the default theme tokens.
See the list of all available tokens which you can override.
- JavaScript
- TypeScript
exportconst authAppearance ={
colors:{
brand:'#5969b8',// blue
brandAccent:'#de5998',// pink
submitButtonText:'white',
},
}
import{LoginForm}from'wasp/client/auth'
import{ authAppearance }from'./appearance'
exportfunctionLoginPage(){
return(
<LoginForm
// Pass the appearance object to the form
appearance={authAppearance}
/>
)
}
importtype{ CustomizationOptions }from'wasp/client/auth'
exportconst authAppearance: CustomizationOptions['appearance']={
colors:{
brand:'#5969b8',// blue
brandAccent:'#de5998',// pink
submitButtonText:'white',
},
}
import{LoginForm}from'wasp/client/auth'
import{ authAppearance }from'./appearance'
exportfunctionLoginPage(){
return(
<LoginForm
// Pass the appearance object to the form
appearance={authAppearance}
/>
)
}
We recommend defining your appearance in a separate file and importing it into your components.
2. Using Your Logoβ
You can add your logo to the Auth UI by passing the logo prop to any of the components.
- JavaScript
- TypeScript
import{LoginForm}from'wasp/client/auth'
importLogofrom'./logo.png'
exportfunctionLoginPage(){
return(
<LoginForm
// Pass in the path to your logo
logo={Logo}
/>
)
}
import{LoginForm}from'wasp/client/auth'
importLogofrom'./logo.png'
exportfunctionLoginPage(){
return(
<LoginForm
// Pass in the path to your logo
logo={Logo}
/>
)
}
3. Social Buttons Layoutβ
You can change the layout of the social buttons by passing the socialLayout prop to any of the components. It can be either vertical or horizontal (default).
If we pass in vertical:
- JavaScript
- TypeScript
import{LoginForm}from'wasp/client/auth'
exportfunctionLoginPage(){
return(
<LoginForm
// Pass in the socialLayout prop
socialLayout="vertical"
/>
)
}
import{LoginForm}from'wasp/client/auth'
exportfunctionLoginPage(){
return(
<LoginForm
// Pass in the socialLayout prop
socialLayout="vertical"
/>
)
}
We get this:
[η»ε:Vertical social buttons]
Let's Put Everything Together πͺβ
If we provide the logo and custom colors:
- JavaScript
- TypeScript
exportconst appearance ={
colors:{
brand:'#5969b8',// blue
brandAccent:'#de5998',// pink
submitButtonText:'white',
},
}
import{LoginForm}from'wasp/client/auth'
import{ authAppearance }from'./appearance'
importtodoLogofrom'./todoLogo.png'
exportfunctionLoginPage(){
return<LoginFormappearance={appearance}logo={todoLogo}/>
}
importtype{ CustomizationOptions }from'wasp/client/auth'
exportconst appearance: CustomizationOptions['appearance']={
colors:{
brand:'#5969b8',// blue
brandAccent:'#de5998',// pink
submitButtonText:'white',
},
}
import{LoginForm}from'wasp/client/auth'
import{ authAppearance }from'./appearance'
importtodoLogofrom'./todoLogo.png'
exportfunctionLoginPage(){
return<LoginFormappearance={appearance}logo={todoLogo}/>
}
We get a form looking like this: