L15: Redirect When Signed In

User visits /favorites (not signed in)
  ↓
Redirects to /sign-in
  ↓
User signs in
  ↓
Redirects to / (homepage)
  ↓
User has to navigate to /favorites again 😞

User visits /favorites (not signed in)
  ↓
Redirects to /sign-in (saves intended destination)
  ↓
User signs in
  ↓
Redirects to /favorites (where they wanted to go!)
  ↓
User is exactly where they wanted to be 😊

import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';
import SignInForm from '@/components/SignInForm';

function SignInPage() {
  const { user } = useAuth();
  const location = useLocation();
  const navigate = useNavigate();

  // Get the page they were trying to access
  const from = location.state?.from?.pathname || '/';

  // If already signed in, redirect immediately
  useEffect(() => {
    if (user) {
      navigate(from, { replace: true });
    }
  }, [user, from, navigate]);

  // Don't show sign-in form if already signed in
  if (user) {
    return null; // Or a brief "Redirecting..." message
  }

  return (
    <div className="sign-in-page">
      <div className="sign-in-container">
        <div className="sign-in-header">
          <h1 className="brand-logo">🏖️ Holidaze</h1>
          <p className="brand-tagline">Your next adventure awaits</p>
        </div>

        <div className="sign-in-form-container">
          <h2 className="sign-in-title">Sign in to your account</h2>
          
          {/* Show message if redirected from protected page */}
          {location.state?.from && (
            <p className="redirect-message">
              Please sign in to access <strong>{from}</strong>
            </p>
          )}
          
          <p className="sign-in-subtitle">
            Welcome back! Please enter your details.
          </p>

          <SignInForm />
        </div>

        <div className="sign-in-footer">
          <p className="footer-text">
            Don't have an account?{' '}
            <a href="/sign-up" className="footer-link">
              Sign up
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}

export default SignInPage;

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useLocation, useNavigate } from 'react-router-dom';
import { signInSchema } from '@/schemas/signInSchema';
import { useAuth } from '@/contexts/AuthContext';

function SignInForm() {
  const { signIn } = useAuth();
  const [apiError, setApiError] = useState('');
  const location = useLocation();
  const navigate = useNavigate();

  // Get intended destination
  const from = location.state?.from?.pathname || '/';

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(signInSchema),
  });

  const onSubmit = async (data) => {
    setApiError('');

    const result = await signIn(data.email, data.password);

    if (result.success) {
      // Success! Redirect to intended page
      navigate(from, { replace: true });
    } else {
      // Show error
      setApiError(result.error);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="sign-in-form">
      {apiError && (
        <div className="api-error" role="alert">
          <p>{apiError}</p>
        </div>
      )}

      <div className="form-field">
        <label htmlFor="email" className="form-label">
          Email
        </label>
        <input
          id="email"
          type="email"
          {...register('email')}
          className={`form-input ${errors.email ? 'form-input-error' : ''}`}
          placeholder="you@example.com"
        />
        {errors.email && (
          <p className="form-error">{errors.email.message}</p>
        )}
      </div>

      <div className="form-field">
        <label htmlFor="password" className="form-label">
          Password
        </label>
        <input
          id="password"
          type="password"
          {...register('password')}
          className={`form-input ${errors.password ? 'form-input-error' : ''}`}
          placeholder="••••••••"
        />
        {errors.password && (
          <p className="form-error">{errors.password.message}</p>
        )}
      </div>

      <button
        type="submit"
        disabled={isSubmitting}
        className="submit-button"
      >
        {isSubmitting ? 'Signing in...' : 'Sign In'}
      </button>
    </form>
  );
}

export default SignInForm;

export const AuthProvider = ({ children }) => {
  // ... existing state and effects

  const signIn = async (email, password) => {
    try {
      const response = await api.post('/auth/login', {
        email,
        password,
      });

      const { accessToken, data } = response.data;
      setToken(accessToken);
      setUser(data);

      // ❌ Remove this:
      // navigate('/');

      // ✅ Return success, let caller handle navigation
      return { success: true };
    } catch (error) {
      const message = error.response?.data?.errors?.[0]?.message 
        || 'Invalid email or password';
      return { success: false, error: message };
    }
  };

  // ... rest of provider
};

/* Redirect Message */
.redirect-message {
  padding: 0.875rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  margin-bottom: 1rem;
  color: #1e40af;
  font-size: 0.875rem;
  text-align: center;
}

.redirect-message strong {
  font-weight: 600;
  color: #1e3a8a;
}