Password Reset

Allow users to reset forgotten passwords.

---

Password Reset Flow

---

Step 1: Request Password Reset

'use client';

import { useState } from 'react';

export function RequestResetForm() {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);

  const handleRequest = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    const response = await fetch('https://api.syauth.com/e/v1/password/reset/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email }),
    });

    if (response.ok) {
      setSent(true);
    }
    setLoading(false);
  };

  if (sent) {
    return (
      <div>
        <p>If an account exists with that email, you'll receive a reset code.</p>
        <a href="/reset-password">Enter reset code</a>
      </div>
    );
  }

  return (
    <form onSubmit={handleRequest}>
      <h2>Forgot Password</h2>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Sending...' : 'Send Reset Code'}
      </button>
    </form>
  );
}

---

Step 2: Confirm Reset with Code

'use client';

import { useState } from 'react';

export function ResetPasswordForm() {
  const [formData, setFormData] = useState({
    email: '',
    code: '',
    new_password: '',
    confirm_password: '',
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleReset = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (formData.new_password !== formData.confirm_password) {
      setError('Passwords do not match');
      return;
    }

    setLoading(true);
    setError('');

    const response = await fetch('https://api.syauth.com/e/v1/password/reset/confirm/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: formData.email,
        code: formData.code,
        new_password: formData.new_password,
      }),
    });

    if (response.ok) {
      alert('Password reset successful! Please log in.');
      window.location.href = '/login';
    } else {
      const data = await response.json();
      setError(data.error || 'Reset failed');
    }
    setLoading(false);
  };

  return (
    <form onSubmit={handleReset}>
      <h2>Reset Password</h2>
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        placeholder="Email"
        required
      />
      <input
        type="text"
        value={formData.code}
        onChange={(e) => setFormData({ ...formData, code: e.target.value })}
        placeholder="6-digit code"
        maxLength={6}
        required
      />
      <input
        type="password"
        value={formData.new_password}
        onChange={(e) => setFormData({ ...formData, new_password: e.target.value })}
        placeholder="New Password"
        required
      />
      <input
        type="password"
        value={formData.confirm_password}
        onChange={(e) => setFormData({ ...formData, confirm_password: e.target.value })}
        placeholder="Confirm Password"
        required
      />
      {error && <p className="error">{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? 'Resetting...' : 'Reset Password'}
      </button>
    </form>
  );
}

---

API Endpoints

Request Reset

POST https://api.syauth.com/e/v1/password/reset/
Content-Type: application/json

{
  "email": "[email protected]"
}

Response (always 200 for security):

{
  "success": true,
  "message": "If the email exists, a reset code has been sent"
}

Confirm Reset

POST https://api.syauth.com/e/v1/password/reset/confirm/
Content-Type: application/json

{
  "email": "[email protected]",
  "code": "123456",
  "new_password": "NewSecurePassword123!"
}

Success Response:

{
  "success": true,
  "message": "Password reset successful"
}

---

Change Password (Authenticated)

For logged-in users to change their password:

async function changePassword(currentPassword: string, newPassword: string, accessToken: string) {
  const response = await fetch('https://api.syauth.com/e/v1/user/password/update/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${accessToken}`,
    },
    body: JSON.stringify({
      current_password: currentPassword,
      new_password: newPassword,
    }),
  });

  return response.ok;
}

---

Password Requirements

New passwords must meet:

• Minimum 8 characters
• At least one uppercase letter
• At least one lowercase letter
• At least one number
• At least one special character

---

Error Handling

Error	Cause	Solution
invalid_code	Wrong or expired code	Request new code
code_expired	Code older than 1 hour	Request new code
weak_password	Password too weak	Show requirements
invalid_current_password	Wrong current password	Verify input

---

Security Considerations

• Reset codes expire after 1 hour
• Codes are single-use
• Rate limiting prevents brute force
• Generic response hides email existence

---

Next Steps

• User Profiles - Update profile information
• User Groups - Manage group assignments