Skip to main content
Version: 2.4.0

Register

The @abpjs/account package provides user registration components.

New in v0.9.0

RegisterForm now makes actual API calls for registration and automatically logs in the user after successful registration.

Self-Registration Setting (v2.0.0)

If Abp.Account.IsSelfRegistrationEnabled is set to false in ABP settings, RegisterForm will automatically redirect users to the login page. Use the useSelfRegistrationEnabled hook to check this setting in custom components.

RegisterForm Component​

The RegisterForm component provides a complete registration interface:

import { RegisterForm } from '@abpjs/account';
import { useNavigate } from 'react-router-dom';

function RegisterPage() {
  const navigate = useNavigate();

  return (
    <RegisterForm
      onSuccess={() => navigate('/login')}
      onError={(error) => console.error('Registration failed:', error)}
      showLoginLink
    />
  );
}

Props​

PropTypeDefaultDescription
onSuccess() => void-Called after successful registration
onError(error: Error) => void-Called on registration error
showLoginLinkbooleanfalseShow "Already have an account?" link
loginPathstring/loginPath for login link

Form Fields​

The RegisterForm includes the following fields:

  • Username - Required, validated for format
  • Email - Required, validated for email format
  • Password - Required, validated for strength
  • Confirm Password - Must match password

Pre-built Register Page​

Use the pre-built RegisterPage component:

import { RegisterPage } from '@abpjs/account';
import { Route } from 'react-router-dom';

// In your routes
<Route path="/register" element={<RegisterPage />} />

Custom Registration Form​

Build a custom registration form:

import { useState } from 'react';
import { RestService } from '@abpjs/core';
import { useToaster } from '@abpjs/theme-shared';

interface RegisterInput {
  userName: string;
  emailAddress: string;
  password: string;
  appName: string;
}

function CustomRegisterForm() {
  const [formData, setFormData] = useState<RegisterInput>({
    userName: '',
    emailAddress: '',
    password: '',
    appName: 'MyApp',
  });
  const [loading, setLoading] = useState(false);
  const toaster = useToaster();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      await RestService.post('/api/account/register', formData);
      toaster.success('Registration successful! Please login.');
    } catch (error: any) {
      toaster.error(error.response?.data?.error?.message || 'Registration failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit" disabled={loading}>
        {loading ? 'Registering...' : 'Register'}
      </button>
    </form>
  );
}

Styling​

Customize the RegisterForm with Chakra UI:

import { Box, Container, Heading } from '@chakra-ui/react';
import { RegisterForm } from '@abpjs/account';

function StyledRegisterPage() {
  return (
    <Container maxW="md" py={20}>
      <Box bg="white" p={8} borderRadius="lg" boxShadow="xl">
        <Heading size="lg" mb={6} textAlign="center">
          Create Account
        </Heading>
        <RegisterForm
          onSuccess={() => {}}
          showLoginLink
        />
      </Box>
    </Container>
  );
}

Check Self-Registration Status (v2.0.0)​

Use the useSelfRegistrationEnabled hook to check if registration is enabled:

import { useSelfRegistrationEnabled } from '@abpjs/account';

function ConditionalRegisterLink() {
  const isEnabled = useSelfRegistrationEnabled();

  if (!isEnabled) {
    return <span>Registration is disabled</span>;
  }

  return <Link to="/register">Create an account</Link>;
}