wasp/web/docs/guides/auth-ui.md

title
Auth UI

Auth UI

Usage

The UI changes dynamically as you update the config

Based on your main.wasp file on the authentication providers you enabled, the Auth UI will show the corresponding buttons.

For example, if you only enabled e-mail authentication:

app MyApp {
  title: "My app",
  //...
  auth: {
    methods: {
      email: {},
    },
    // ...
  }
}

We'll get this:

And then we enable Google and Github:

app MyApp {
  title: "My app",
  //...
  auth: {
    methods: {
      email: {},
      google: {},
      github: {},
    },
    // ...
  }
}

The form will automatically update itself to look like this:

Available components

Let's take a look at the components that are available for you to use.

Login form

Useful for username & password and email authentication.

You can use the LoginForm component to build your own login form.

import { LoginForm } from '@wasp/auth/forms/Login'

// Use it like this
<LoginForm />

Signup form

Useful for username & password and email authentication.

You can use the SignupForm component to build your signup form.

import { SignupForm } from '@wasp/auth/forms/Signup'

// Use it like this
<SignupForm />

Forgot password form

Useful for email authentication.

You can use the ForgotPasswordForm component to build your own forgot password form.

import { ForgotPasswordForm } from '@wasp/auth/forms/ForgotPassword'

// Use it like this
<ForgotPasswordForm />

Reset password form

Useful for email authentication.

You can use the ResetPasswordForm component to build your reset password form.

import { ResetPasswordForm } from '@wasp/auth/forms/ResetPassword'

// Use it like this
<ResetPasswordForm />

Verify email form

Useful for email authentication.

You can use the VerifyEmailForm component to build your own verify email form.

import { VerifyEmailForm } from '@wasp/auth/forms/VerifyEmail'

// Use it like this
<VerifyEmailForm />

Customization

You customize all of the available forms by passing props to them.

Props you can pass to all of the forms:

• appearance - appearance of the form, see below (optional)
• logo - path to your logo (optional)
• socialLayout - layout of the social buttons, which can be vertical`` or horizontal` (optional)

Theme colors override

We used Stitches to style the Auth UI. You can customize the styles by overriding the default theme tokens.

import { LoginForm } from '@wasp/auth/forms/Login'

// Define your appearance
const appearance = {
  colors: {
    brand: '#5969b8', // blue
    brandAccent: '#de5998', // pink
    submitButtonText: 'white',
  },
}

// Use it like this
<LoginForm appearance={appearance} />

See the list of all available tokens here. We'll be adding more tokens soon 🙂

Adding your logo

You can add your logo to the Auth UI by passing the logo prop to any of the components.

import { LoginForm } from '@wasp/auth/forms/Login'

// Use it like this
<LoginForm logo="/img/logo.png" />

Social buttons layout

You can change the layout of the social buttons by passing the socialLayout prop to any of the components.

If we pass in vertical:

import { LoginForm } from '@wasp/auth/forms/Login'

// Use it like this
<LoginForm
  socialLayout="vertical"
/>

We get this:

Example of a custom login form

If we provide the logo and custom colors:

import { LoginForm } from '@wasp/auth/forms/Login'

import { appearance } from './appearance'
import todoLogo from '../../todoLogo.png'

// Use it like this
<LoginForm
  appearance={appearance}
  logo={todoLogo}
/>

We get this: