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:
- Google Sign-Up
- Email Sign-Up
- Navigation back to the home page
- Link to the sign-in page
- 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 progressisSigningUpWithEmail
: Boolean to track if email sign-up is in progressemail
: 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 navigationCard
andCardContent
: Wraps the entire sign-up formInput
: Used for the email input fieldSeparator
: Creates a visual separation between sign-up optionsLogo
: Displays your application's logoTestimonialItem
: 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 routingnext-auth/react
: For authenticationisemail
: For email validationreact-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
- Ensure that the callback URL for authentication is correctly set to handle post-registration navigation.
- Implement proper error handling for failed sign-up attempts (not shown in the current implementation).
- Consider adding loading states or spinners during the authentication process for better user feedback.
- Ensure that the Google authentication is properly set up in your NextAuth configuration.
- 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:
- Add appropriate
aria-label
attributes to icon-only buttons. - Ensure color contrast ratios meet WCAG standards for both light and dark themes.
- Implement keyboard navigation support for all interactive elements.
Customization
To customize the SignUp component:
- Modify the callback URL to change the post-registration redirect.
- Adjust the Tailwind classes to match your design system.
- Replace the
Logo
component with your own branding. - Modify the authentication providers or add additional ones as needed.
- 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.