ajinkya-mhetre-mern/frontend/src/pages/Unauthorized.jsx

A MERN starter with frontend and backend folders

// pages/Unauthorized.jsx
import React from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { Shield, Home, ArrowLeft, User } from 'lucide-react'

const Unauthorized = () => {
  const { user, isAuthenticated } = useAuth()
  const navigate = useNavigate()

  const handleGoBack = () => {
    navigate(-1)
  }

  const getDashboardLink = () => {
    if (!isAuthenticated()) return '/home'
    
    switch (user?.role) {
      case 'admin':
        return '/dashboard/admin'
      case 'farmer':
        return '/dashboard/farmer'
      case 'customer':
        return '/dashboard/customer'
      default:
        return '/home'
    }
  }

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col justify-center items-center px-4">
      <div className="max-w-lg w-full text-center">
        {/* 403 Illustration */}
        <div className="mb-8">
          <div className="text-9xl font-bold text-red-300 mb-4">403</div>
          <div className="w-32 h-32 mx-auto mb-6 bg-red-100 rounded-full flex items-center justify-center">
            <Shield className="w-16 h-16 text-red-500" />
          </div>
        </div>

        {/* Error Message */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-4">Access Denied</h1>
          <p className="text-lg text-gray-600 mb-2">
            You don't have permission to access this page.
          </p>
          {isAuthenticated() ? (
            <p className="text-gray-500">
              Your current role ({user?.role}) doesn't have access to this resource.
            </p>
          ) : (
            <p className="text-gray-500">
              Please sign in to access this page.
            </p>
          )}
        </div>

        {/* Action Buttons */}
        <div className="space-y-4">
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={handleGoBack}
              className="flex items-center justify-center space-x-2 px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              <span>Go Back</span>
            </button>

            <Link
              to="/home"
              className="flex items-center justify-center space-x-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
            >
              <Home className="w-4 h-4" />
              <span>Go Home</span>
            </Link>
          </div>

          {isAuthenticated() ? (
            <Link
              to={getDashboardLink()}
              className="inline-flex items-center justify-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
            >
              <User className="w-4 h-4" />
              <span>Go to My Dashboard</span>
            </Link>
          ) : (
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                to="/login"
                className="flex items-center justify-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
              >
                <User className="w-4 h-4" />
                <span>Sign In</span>
              </Link>
              <Link
                to="/register"
                className="flex items-center justify-center space-x-2 px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
              >
                <span>Sign Up</span>
              </Link>
            </div>
          )}
        </div>

        {/* Help Text */}
        <div className="mt-12 pt-8 border-t border-gray-200">
          <p className="text-sm text-gray-500 mb-4">
            If you believe you should have access to this page, please contact your administrator.
          </p>
          
          {isAuthenticated() && (
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <p className="text-blue-800 text-sm">
                <strong>Current Role:</strong> {user?.role}
              </p>
              <p className="text-blue-700 text-xs mt-1">
                Different roles have access to different sections of the application.
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default Unauthorized