Skip to main content

Overview

RespondeIA provides a secure authentication system for accessing your WhatsApp AI customer service platform. This guide covers everything you need to know about logging in, creating an account, and managing your authentication.

Creating Your Account

1

Navigate to Registration

Go to /register or click “Registrate gratis” from the login page.
2

Choose Registration Method

You have two options to create your account:Option 1: Google Sign-Up (Recommended)Click the “Registrarse con Google” button for instant account creation using your Google credentials.Option 2: Email RegistrationFill out the registration form with:
  • First Name (Nombre)
  • Last Name (Apellido)
  • Email Address (Correo electrónico)
  • Password (Contraseña - minimum 8 characters)
// Example registration form fields from source
<Input id="first-name" placeholder="Juan" />
<Input id="last-name" placeholder="Pérez" />
<Input id="email" type="email" placeholder="[email protected]" />
<Input id="password" type="password" placeholder="Mínimo 8 caracteres" />
3

Accept Terms and Conditions

Review and accept:
You must accept the terms and conditions to create an account. This ensures compliance with data protection regulations.
4

Complete Registration

Click “Crear cuenta” to finalize your registration. You’ll be automatically logged in and redirected to your dashboard.

Logging In

Standard Login Process

1

Access Login Page

Navigate to /login from the RespondeIA homepage.
2

Enter Credentials

// Login form implementation from LoginForm.tsx
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  mutate({ email, password });
};
Provide your:
3

Optional Settings

  • Remember session: Check this box to stay logged in across browser sessions
  • Show/Hide Password: Toggle password visibility using the eye icon
4

Submit

Click “Ingresar” to access your dashboard.
The login process uses secure API endpoints:
// From auth.service.ts
login: async (data: any) => {
  const res = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' },
  });
  if (!res.ok) throw new Error('Credenciales incorrectas');
  return res.json();
}

Authentication Architecture

State Management

RespondeIA uses Zustand with persistence for authentication state:
// From useAuthStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface AuthState {
    user: any | null;
    token: string | null;
    setAuth: (user: any, token: string) => void;
    logout: () => void;
}

export const useAuthStore = create<AuthState>()(persist(
    (set) => ({
        user: null,
        token: null,
        setAuth: (user, token) => set({user, token}),
        logout: () => ({user: null, token: null}),
    }),
    { name: 'auth-storage' }
));

Login Flow

The authentication flow uses React Query for state management:
// From useLogin.ts
import { useRouter } from "next/navigation";
import { useAuthStore } from "../store/useAuthStore";
import { authService } from "../services/auth.service";
import { useMutation } from "@tanstack/react-query";

export const useLogin = () => {
  const setAuth = useAuthStore((state) => state.setAuth);
  const router = useRouter();

  return useMutation({
    mutationFn: authService.login,
    onSuccess: (data) => {
      setAuth(data.user.user, data.user.token);
      router.push('/dashboard');
    },
  });
};

Routing Structure

Public Routes

  • / - Home page
  • /pricing - Pricing information
  • /recursos - Resources
  • /empresa - Company info

Auth Routes

  • /login - Login page
  • /register - Registration page

Dashboard Routes

  • /dashboard - Main dashboard
  • /consultas - Queries/conversations
  • /soporte - Support

Protected

All dashboard routes require authentication. Unauthenticated users are redirected to /login.

Troubleshooting

Common Issues

If you see “Credenciales incorrectas”:
  1. Verify your email address is spelled correctly
  2. Check Caps Lock is off when entering password
  3. Use the password visibility toggle to verify your password
  4. Try the “¿Olvidaste tu contraseña?” link to reset your password
If you’re being logged out unexpectedly:
  1. Ensure “Recordar sesión” is checked during login
  2. Check your browser isn’t clearing cookies on exit
  3. Verify localStorage is enabled in your browser
  4. Clear browser cache and try logging in again
If account creation fails:
  1. Ensure password is at least 8 characters
  2. Verify email format is valid ([email protected])
  3. Check you’ve accepted terms and conditions
  4. Try using Google sign-up as an alternative

Security Best Practices

Password Requirements
  • Minimum 8 characters
  • Use a combination of letters, numbers, and symbols
  • Avoid using common words or personal information
  • Don’t reuse passwords from other services
Session Security
  • Always log out when using shared computers
  • Don’t share your authentication token
  • Enable two-factor authentication when available
  • Review active sessions regularly

Next Steps

After successful authentication:
  1. Explore your Dashboard to view analytics and conversations
  2. Choose a Pricing Plan that fits your business needs
  3. Customize your Chatbot with your business information
  4. Connect WhatsApp to start automating customer service

API Reference

For developers integrating with the authentication system:

Build docs developers (and LLMs) love