Skip to main content
Version: Next

SignUp Component

The SignUp component is a versatile registration interface that provides users with options to sign up using Google or email. It's designed for use in Next.js applications and includes responsive styling with Tailwind CSS.

Importing the Component​

To use the SignUp component in your Next.js application, import it as follows:

import SignUp from "@/components/SignUp"

Basic Usage​

Here's a basic example of how to use the SignUp component:

<SignUp />

Functionality​

The SignUp component provides the following functionality:

  1. Google Sign-Up
  2. Email Sign-Up
  3. Navigation back to the home page
  4. Link to the sign-in page
  5. Display of a testimonial (on larger screens)

State Management​

The component uses React's useState hook to manage the following state:

  • isSigningUpWithGoogle: Boolean to track if Google sign-up is in progress
  • isSigningUpWithEmail: Boolean to track if email sign-up is in progress
  • email: String to store the user's input email

Authentication Methods​

Google Sign-Up​

The component uses NextAuth's signIn function to initiate Google authentication:

const onGoogleSignUp = () => {
  setSigningUpWithGoogle(true);
  signIn("google", {
    callbackUrl: window?.location
      ? `${window.location.origin}/dashboard`
      : "",
  });
};

Email Sign-Up​

Email authentication is also handled by NextAuth's signIn function:

const onEmailSignUp = async () => {
  setSigningUpWithEmail(true);
  await signIn("email", {
    email,
    callbackUrl: window?.location
      ? `${window.location.origin}/dashboard`
      : "",
  });
  setSigningUpWithEmail(false);
};

UI Components​

The SignUp component uses several UI components from your custom UI library:

  • Button: Used for the Google sign-up, email sign-up, and back navigation
  • Card and CardContent: Wraps the entire sign-up form
  • Input: Used for the email input field
  • Separator: Creates a visual separation between sign-up options
  • Logo: Displays your application's logo
  • TestimonialItem: Displays a testimonial on larger screens

Styling​

The component uses Tailwind CSS for styling. Key styling features include:

  • Responsive design that adjusts layout for different screen sizes
  • Full-width layout on mobile, split layout on larger screens
  • Custom styling for the Google sign-up button
  • Use of Card component for a clean, boxed layout
  • Testimonial display on larger screens with a contrasting background

Props​

The SignUp component doesn't accept any props as it's a self-contained component with its own state management.

Dependencies​

This component relies on several external libraries and internal utilities:

  • next/navigation: For routing
  • next-auth/react: For authentication
  • isemail: For email validation
  • react-icons: For icons (Google and arrow icons)
  • Internal components: Logo, TestimonialItem, Button, Card, CardContent, Input, Separator
  • Internal utilities: Routes for route definitions, SiteConfig for configuration, testimonials for testimonial data

Best Practices​

  1. Ensure that the callback URL for authentication is correctly set to handle post-registration navigation.
  2. Implement proper error handling for failed sign-up attempts (not shown in the current implementation).
  3. Consider adding loading states or spinners during the authentication process for better user feedback.
  4. Ensure that the Google authentication is properly set up in your NextAuth configuration.
  5. Make sure the testimonial data is properly populated and matches the expected format.

Accessibility​

The SignUp component includes several accessibility features:

  • Proper labeling for the email input field
  • Disabled states for buttons during sign-up processes
  • Use of semantic HTML elements like <label>

To further improve accessibility:

  1. Add appropriate aria-label attributes to icon-only buttons.
  2. Ensure color contrast ratios meet WCAG standards for both light and dark themes.
  3. Implement keyboard navigation support for all interactive elements.

Customization​

To customize the SignUp component:

  1. Modify the callback URL to change the post-registration redirect.
  2. Adjust the Tailwind classes to match your design system.
  3. Replace the Logo component with your own branding.
  4. Modify the authentication providers or add additional ones as needed.
  5. Update the testimonial content or remove it if not needed.

Remember to update this documentation if you make significant changes to the component's functionality or API.

Example Usage​

Here's an example of how you might use the SignUp component in a Next.js page:

import SignUp from "@/components/SignUp"

export default function SignUpPage() {
  return (
    <div className="min-h-screen bg-gray-100">
      <SignUp />
    </div>
  )
}

This example demonstrates how to use the SignUp component within a page, providing a full-height background.

By using the SignUp component, you can provide a comprehensive and user-friendly registration interface in your Next.js application. Remember to configure your authentication providers and callback URLs appropriately to ensure smooth functionality.