User Registration

Step-by-step guide to creating your Viax account with email verification

Account Creation Process

Viax uses a streamlined registration process with email verification to ensure account security.

Registration Flow

1. Enter Email Address

   Provide your email address on the welcome screen

2. Email Verification

   Receive and enter a 6-digit verification code

3. Personal Information

   Complete your profile with name, phone, and password

4. Account Activation

   Your account is ready to use immediately

Step 1: Email Entry

From Welcome Screen

// User enters email on email_auth_screen.dart
// System validates email format
if (!EmailValidator.validate(email)) {
  showError('Please enter a valid email address');
}

Email Requirements

• Valid email format (e.g., [e-mail])
• Must not be already registered
• Personal or business email accepted
• Email will be used for login and notifications

Step 2: Email Verification

Verification Code Delivery

Once you submit your email:

1. System sends a 6-digit verification code to your inbox
2. Code is valid for 10 minutes
3. Check your spam folder if not received

Enter Verification Code

Email Verification Screen

// lib/src/features/auth/presentation/screens/email_verification_screen.dart

class EmailVerificationScreen extends StatefulWidget {
  final String email;
  final String userName;
  // ...
}

// User enters 6-digit code
// System validates against backend
final response = await UserService.verifyEmail(
  email: email,
  code: verificationCode,
);

Didn’t receive the code?

• Wait 60 seconds before requesting a new code
• Check spam/junk folders
• Verify email address is correct
• Contact support if issues persist

Step 3: Complete Profile

Multi-Step Registration Form

The registration uses a visual stepper with 3 steps:

Step 1: Personal Info

Personal Information

Required Fields:

• First Name: Your given name
• Last Name: Your family name

// register_screen.dart - Step 0
AuthTextField(
  controller: _nameController,
  labelText: 'First Name',
  prefixIcon: Icons.person_outline,
  validator: (value) => value?.isEmpty == true 
    ? 'First name is required' : null,
)

Your name will be shown to drivers for easy identification during pickup.

Step 2: Contact

Contact Information

Required Fields:

• Phone Number: 10-digit mobile number

// register_screen.dart - Step 1  
AuthTextField(
  controller: _phoneController,
  labelText: 'Phone Number',
  prefixIcon: Icons.phone_outlined,
  keyboardType: TextInputType.phone,
  validator: validatePhoneNumber,
)

Ensure your phone number is accurate - it’s used for:

• Driver communication
• Account recovery
• SMS notifications

Step 3: Security

Password Setup

Required Fields:

• Password: Minimum 6 characters
• Confirm Password: Must match

// register_screen.dart - Step 2
AuthTextField(
  controller: _passwordController,
  labelText: 'Password',
  prefixIcon: Icons.lock_outline,
  obscureText: _obscurePassword,
  validator: (value) {
    if (value == null || value.length < 6) {
      return 'Password must be at least 6 characters';
    }
    return null;
  },
)

Password Requirements:

• Minimum 6 characters
• No special character requirements
• Should be memorable but secure

Backend Registration

API Call Flow

// lib/src/global/services/auth/user_service.dart

static Future<Map<String, dynamic>> registerUser({
  required String email,
  required String password,
  required String name,
  required String lastName,
  required String phone,
  String role = 'cliente',
}) async {
  final response = await http.post(
    Uri.parse('$baseUrl/auth/register.php'),
    body: jsonEncode({
      'email': email,
      'password': password,
      'nombre': name,
      'apellido': lastName,
      'telefono': phone,
      'tipo_usuario': role,
    }),
  );
  
  return jsonDecode(response.body);
}

Success Response

{
  "success": true,
  "message": "Registration successful",
  "data": {
    "user": {
      "id": 123,
      "email": "[e-mail]",
      "nombre": "John",
      "apellido": "Doe",
      "telefono": "3001234567",
      "tipo_usuario": "cliente",
      "created_at": "2024-11-26 10:30:00"
    },
    "token": "eyJ0eXAiOiJKV1QiLCJhbGc..."
  }
}

Post-Registration

Automatic Login

After successful registration:

1. Session data is saved locally
2. User is redirected to welcome splash screen
3. Then automatically navigated to home screen

// After registration success
await UserService.saveSession(data['user']);

Navigator.pushNamedAndRemoveUntil(
  context,
  RouteNames.welcomeSplash,
  (route) => false,
  arguments: {'email': email},
);

First-Time Setup Checklist

Complete Your Profile (Optional)

• Add profile photo
• Set home/work addresses
• Add payment methods
• Enable notifications

Validation Rules

email · string · required

Valid email format, unique in system

nombre · string · required

First name, 1-50 characters

apellido · string · required

Last name, 1-50 characters

telefono · string · required

Phone number, 10 digits, Colombian format

password · string · required

Minimum 6 characters

Error Handling

Common Registration Errors

Email Already Exists

Error: “User already exists. Please login.”

Solution:

• Use the login screen instead
• Try password recovery if forgotten
• Contact support if you didn’t create the account

Invalid Verification Code

Error: “Invalid or expired verification code”

Solution:

• Check code was entered correctly
• Request a new code (wait 60 seconds)
• Ensure code hasn’t expired (10-minute limit)

Network Error

Error: “Unable to connect to server”

Solution:

• Check internet connection
• Retry after a few seconds
• Try on different network (WiFi/mobile data)

UI/UX Features

Visual Stepper

// RegisterStepIndicator widget shows progress
RegisterStepIndicator(
  currentStep: _currentStep,
  totalSteps: _totalSteps,
)

• Step 0/3: Personal Information
• Step 1/3: Contact Details
• Step 2/3: Password Setup

Animations

• Smooth step transitions
• Form field animations
• Success/error feedback
• Loading states

Pro Tip: Fill out all fields completely before clicking “Next” on each step to avoid validation errors.

Security Features

Email Verification

• 6-digit codes generated server-side
• 10-minute expiration for security
• Rate limiting to prevent spam
• Secure delivery via Gmail SMTP

Password Security

• Passwords are hashed before storage
• Never stored in plain text
• Secure transmission over HTTPS
• Password reset available

Next Steps

After registration:

Login

Learn about login and security

Profile Setup

Complete your user profile

Payment Methods

Add payment options

Book a Ride

Request your first trip