Sign-up Page 🚧

A customizable sign-up component that abstracts away the pain needed to wire together a secure sign-up/register page for your application.

The SignUpPage component is a quick way to generate a ready-to-use registration page with multiple OAuth providers, or a credentials from.

Basic Usage

import { AppProvider } from '@toolpad/core/AppProvider';
import { SignUpPage } from '@toolpad/core/AuthPage';

export default function App() {
  return (
    <AppProvider>
      <SignUpPage
        providers={[...]}
        signUp={async (provider) => {
          // Your sign in logic
        }}
      />
    </AppProvider>
  );
}

OAuth

The SignUpPage component can be set up with an OAuth provider by passing in a list of providers in the providers prop, along with a signUp function that accepts the provider as a parameter.

const providers = [
  { id: 'github', name: 'GitHub' },
  { id: 'google', name: 'Google' },
  { id: 'facebook', name: 'Facebook' },
  { id: 'twitter', name: 'Twitter' },
  { id: 'linkedin', name: 'LinkedIn' },
];

// ...

const promise = new Promise((resolve) => {
  setTimeout(() => {
    console.log(`Sign up with ${provider.id}`);
    resolve({ error: 'This is a fake error' } as SignUpActionResponse);
  }, 500);
}) as Promise<SignUpActionResponse>;

// ...

<AppProvider theme={theme}>
  <SignUpPage signUp={signUp} providers={providers} />
</AppProvider>

const providers = [
  { id: 'github', name: 'GitHub' },
  { id: 'google', name: 'Google' },
  { id: 'facebook', name: 'Facebook' },
  { id: 'twitter', name: 'Twitter' },
  { id: 'linkedin', name: 'LinkedIn' },
];

// ...

const promise = new Promise((resolve) => {
  setTimeout(() => {
    console.log(`Sign up with ${provider.id}`);
    resolve({ error: 'This is a fake error' } as SignUpActionResponse);
  }, 500);
}) as Promise<SignUpActionResponse>;

// ...

<AppProvider theme={theme}>
  <SignUpPage signUp={signUp} providers={providers} />
</AppProvider>

Press Enter to start editing

Credentials

To use the Credentials provider, add it to the providers array and implement your own sign-up logic.

const providers = [{ id: 'credentials', name: 'Email and Password' }];

// ...

<AppProvider theme={theme}>
  <SignUpPage
    signUp={signIn}
    providers={providers}
    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
  />
</AppProvider>

const providers = [{ id: 'credentials', name: 'Email and Password' }];

// ...

<AppProvider theme={theme}>
  <SignUpPage
    signUp={signIn}
    providers={providers}
    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
  />
</AppProvider>

Press Enter to start editing

Alerts

The signUp prop takes a function which can either return void or a Promise which resolves with an SignUpActionResponse object of the form:

interface SignUpActionResponse {
  error?: string;
  success?: string;
}

resolve({
  error: 'Invalid credentials.',
});

// ...

<AppProvider theme={theme}>
  <SignUpPage
    signUp={signUp}
    providers={providers}
    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
  />
</AppProvider>

resolve({
  error: 'Invalid credentials.',
});

// ...

<AppProvider theme={theme}>
  <SignUpPage
    signUp={signUp}
    providers={providers}
    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
  />
</AppProvider>

Press Enter to start editing

This renders an alert with the error string as the message.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<SignUpPage />