Skip to content

SignInPage API

API reference docs for the React SignInPage component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import { SignInPage } from '@toolpad/core/SignInPage';
// or
import { SignInPage } from '@toolpad/core';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
providersArray<{ id: 'apple'
| 'auth0'
| 'cognito'
| 'credentials'
| 'discord'
| 'facebook'
| 'fusionauth'
| 'github'
| 'gitlab'
| 'google'
| 'instagram'
| 'keycloak'
| 'line'
| 'linkedin'
| 'microsoft-entra-id'
| 'okta'
| 'slack'
| 'spotify'
| 'tiktok'
| 'twitch'
| 'twitter', name: string }>		[]

The list of authentication providers to display.

signInfuncundefined

Callback fired when a user signs in.

Signature:function(provider: AuthProvider, formData: FormData, callbackUrl: string) => void | Promise
  • provider The authentication provider.
  • formData The form data if the provider id is 'credentials'.\
  • callbackUrl The URL to redirect to after signing in.
slotProps{ emailField?: object, forgotPasswordLink?: object, passwordField?: object, signUpLink?: object, submitButton?: object }{}

The props used for each slot inside.

slots{ emailField?: elementType, forgotPasswordLink?: elementType, passwordField?: elementType, signUpLink?: elementType, submitButton?: elementType }{}

The components used for each slot inside.

See Slots API below for more details.

The component cannot hold a ref.

Slots

Slot nameClass nameDefault componentDescription
emailFieldTextFieldThe custom email field component used in the credentials form.
passwordFieldTextFieldThe custom password field component used in the credentials form.
submitButtonLoadingButtonThe custom submit button component used in the credentials form.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.