> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Braian551/viax/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Steps>
  <Step title="Enter Email Address">
    Provide your email address on the welcome screen
  </Step>

  <Step title="Email Verification">
    Receive and enter a 6-digit verification code
  </Step>

  <Step title="Personal Information">
    Complete your profile with name, phone, and password
  </Step>

  <Step title="Account Activation">
    Your account is ready to use immediately
  </Step>
</Steps>

## Step 1: Email Entry

### From Welcome Screen

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

<Accordion title="Email Requirements">
  * Valid email format (e.g., [user@example.com](mailto:user@example.com))
  * Must not be already registered
  * Personal or business email accepted
  * Email will be used for login and notifications
</Accordion>

## 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

<CodeGroup>
  ```dart Email Verification Screen theme={null}
  // 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,
  );
  ```

  ```json API Response theme={null}
  {
    "success": true,
    "message": "Email verified successfully",
    "data": {
      "email": "user@example.com",
      "verified": true
    }
  }
  ```
</CodeGroup>

<Note>
  **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
</Note>

## Step 3: Complete Profile

### Multi-Step Registration Form

The registration uses a visual stepper with 3 steps:

<Tabs>
  <Tab title="Step 1: Personal Info">
    ### Personal Information

    **Required Fields:**

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

    ```dart theme={null}
    // 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,
    )
    ```

    <Info>
      Your name will be shown to drivers for easy identification during pickup.
    </Info>
  </Tab>

  <Tab title="Step 2: Contact">
    ### Contact Information

    **Required Fields:**

    * **Phone Number**: 10-digit mobile number

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

    <Warning>
      Ensure your phone number is accurate - it's used for:

      * Driver communication
      * Account recovery
      * SMS notifications
    </Warning>
  </Tab>

  <Tab title="Step 3: Security">
    ### Password Setup

    **Required Fields:**

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

    ```dart theme={null}
    // 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
  </Tab>
</Tabs>

## Backend Registration

### API Call Flow

```dart theme={null}
// 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

```json theme={null}
{
  "success": true,
  "message": "Registration successful",
  "data": {
    "user": {
      "id": 123,
      "email": "user@example.com",
      "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

```dart theme={null}
// After registration success
await UserService.saveSession(data['user']);

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

### First-Time Setup Checklist

<Accordion title="Complete Your Profile (Optional)">
  * Add profile photo
  * Set home/work addresses
  * Add payment methods
  * Enable notifications
</Accordion>

## Validation Rules

<ParamField path="email" type="string" required>
  Valid email format, unique in system
</ParamField>

<ParamField path="nombre" type="string" required>
  First name, 1-50 characters
</ParamField>

<ParamField path="apellido" type="string" required>
  Last name, 1-50 characters
</ParamField>

<ParamField path="telefono" type="string" required>
  Phone number, 10 digits, Colombian format
</ParamField>

<ParamField path="password" type="string" required>
  Minimum 6 characters
</ParamField>

## Error Handling

### Common Registration Errors

<AccordionGroup>
  <Accordion title="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
  </Accordion>

  <Accordion title="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)
  </Accordion>

  <Accordion title="Network Error">
    **Error**: "Unable to connect to server"

    **Solution**:

    * Check internet connection
    * Retry after a few seconds
    * Try on different network (WiFi/mobile data)
  </Accordion>
</AccordionGroup>

## UI/UX Features

### Visual Stepper

```dart theme={null}
// 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

<Tip>
  **Pro Tip**: Fill out all fields completely before clicking "Next" on each step to avoid validation errors.
</Tip>

## 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:

<CardGroup cols={2}>
  <Card title="Login" icon="right-to-bracket" href="/users/authentication">
    Learn about login and security
  </Card>

  <Card title="Profile Setup" icon="id-card" href="/users/profile-management">
    Complete your user profile
  </Card>

  <Card title="Payment Methods" icon="credit-card" href="/users/payment-methods">
    Add payment options
  </Card>

  <Card title="Book a Ride" icon="car" href="/users/booking-a-ride">
    Request your first trip
  </Card>
</CardGroup>