Are you tired of complex signup processes that confuse your users? Do you want to streamline the user onboarding experience on your platform? Look no further than Remix-Run! In this blog post, we'll explore how you can leverage Remix-Run to create a smooth and efficient signup flow for your application.

Remix-Run is a powerful framework for building web applications with React. It offers a robust set of tools and conventions to help you create delightful user experiences. One of its key features is the ability to handle server-side rendering (SSR) and client-side rendering (CSR) seamlessly, providing fast loading times and improved SEO.

Today, we'll focus on implementing a signup page using Remix-Run. We'll cover everything from form handling to server-side validation, ensuring that your signup process is both user-friendly and secure.

 

// Signup.tsx

import { Form, Link, useActionData, useNavigation } from '@remix-run/react';
import { useEffect, useRef } from 'react';
import { toast } from 'sonner';
import Input from '~/components/shared/Input';
import FormLabel from '~/components/shared/FormLabel';
import { action } from './signup';

export default function Signup() {
  // Hooks for handling form submission and navigation
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const formRef = useRef<HTMLFormElement | null>(null);

  // Effect to display toast messages based on form submission result
  useEffect(() => {
    if (actionData?.errors?.response) {
      toast.error('An error occurred', {
        description: actionData?.errors?.response,
      });
    }

    if (actionData?.success?.response) {
      if (formRef.current) formRef.current.reset();
      toast.success('Successful', {
        description: actionData?.success?.response,
      });
    }
  }, [actionData]);

  return (
    <>
      <h1 className="mt-10 text-center text-3xl font-bold lg:text-4xl">
        Signup
      </h1>

      <Form ref={formRef} method="post" className="mx-auto mt-5 lg:mt-8">
        {/* Form fields */}
      </Form>
    </>
  );
}

// signup.ts

import { ActionFunctionArgs, json } from '@remix-run/node';
import { getSession } from '~/sessions';
import { backendUrl } from '~/constants/backendUrls';
import http from '~/lib/http';
import type { ISignupResponse } from '~/types/auth';

export async function action({ request }: ActionFunctionArgs) {
  // Form validation and submission logic
}

// signup.ts

export async function action({ request }: ActionFunctionArgs) {
  // Extract form data and session information
  const formData = await request.formData();
  const email = String(formData.get('email'));
  const password = String(formData.get('password'));
  const accountName = String(formData.get('bussinessName'));
  const session = await getSession(request.headers.get('Cookie'));

  // Form field validation
  const errors: Record<string, string> = {};
  const fields = ['firstName', 'lastName', 'email', 'password', 'businessName'];
  fields.forEach((field) => {
    const value = formData.get(field);
    if (!value) {
      errors[field] = 'Please provide a valid value';
    }
  });

  // If no validation errors, attempt user registration
  if (!Object.keys(errors).length) {
    try {
      const response = await http.post(backendUrl.signup, {
        email,
        password,
        accountName,
      });
      const data = response.data as ISignupResponse;

      // Store user session information
      session.set('accessToken', data.response.accessToken);
      session.set('email', data.response.email);

      // Success message
      const success: Record<string, string> = {};
      success['response'] =
        'Successfully registered... Redirecting you to the home page';

      // Return success response
      return json({ success }, {
        headers: {
          'Set-Cookie': await commitSession(session),
        },
      });
    } catch (error) {
      // Error message for invalid credentials
      errors['response'] = 'Incorrect credentials';
    }
  }

  // Return error response if validation fails
  return json({ errors }, {
    headers: {
      'Set-Cookie': await commitSession(session),
    },
  });
}