POST http://localhost:8000/api/login 500 (Internal Server Error)

Im getting this error while creating a login application using React Js , Laravel 9 using Laravel Passport . Whenever I try to login im getting this error POST http://localhost:8000/api/login 500 (Internal Server Error). Here is my frontend React Code

import React, { useState } from "react";
import axios from "axios";

function Login(props) {
  const [error, setError] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();

    // get the login form data
    const formData = new FormData(event.target);
    const email = formData.get("email");
    const password = formData.get("password");

    // validate the form data
    if (!email || !password) {
      setError("Email and password are required");
      return;
    }

    
    try {
      // send a request to the server to exchange the user's login credentials for an access token
      const response = await axios.post("http://localhost:8000/api/login", {
        email,
        password,
      });

      // store the access token in a secure way (such as in an HTTP-only cookie)
      document.cookie = `access_token=${response.data.access_token}; path=/; secure; http-only`;

      // redirect the user to the dashboard page
      props.history.push("/dashboard");
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <React.Fragment>
      <div className="login">
        <div className="login_wrapper">
          <div className="animate form login_form">
            <section className="login_content">
              <form onSubmit={handleSubmit}>
                <h1>Login Form</h1>

                <div>
                  
                  <input
                    type="email"
                    id="email"
                    name="email"
                    className="form-control"
                    placeholder="Email"
                  />
                </div>
                <div>
                 
                  <input
                    type="password"
                    id="password"
                    name="password"
                    className="form-control"
                    placeholder="Password"
                  />
                </div>
                {error && <p style={{ color: "red" }}>{error}</p>}
                <div>
                  <button type="submit" className="btn btn-default submit">
                    Log In
                  </button>
                  <p className="reset_pass">Lost your password?</p>
                </div>

                <div className="clearfix"></div>

                <div className="separator">
                  <div className="clearfix"></div>
                  <br />

                  <div>
                    <h1>
                      <i className="fa fa-paw">Growth Tracker</i>
                    </h1>
                    <p>
                      ©2022 All Rights Reserved to Growth Tracker! Privacy and
                      Terms
                    </p>
                  </div>
                </div>
              </form>
            </section>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
export default Login;

When The Login is successful it will redirect to Dashboard here is my Dashboard Code

import React, { useEffect, useState } from "react";
import axios from "axios";

const Dashboard = (props) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const checkAuth = async () => {
      try {
         // create an axios instance with the `withCredentials` option set to `true`
         const instance = axios.create({
          withCredentials: true,
        });

        // send a request to the server to check if the access token is valid
        await instance.get("http://localhost:8000/api/auth-check");
        setIsAuthenticated(true);
      } catch (err) {
        // if the request is not successful, redirect the user to the login page
        props.history.push("/login");
      } finally {
        setIsLoading(false);
      }
    };
    checkAuth();
  }, [props.history]);

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : isAuthenticated ? (
        <React.Fragment>
          <p>Welcome To Authenticated Dashboard</p>
          
        </React.Fragment>
      ) : (
        <p>Unauthorized 404</p>
      )}
    </div>
  );
};

export default Dashboard;

Here Is My Backend Code In Laravel LoginController:

lass LoginController extends Controller
{
    
    public function login(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'email' => 'required|email',
            'password' => 'required',
        ]);
        if ($validator->fails()) {
            return response()->json(['error' => $validator->errors()], 422);
        }

        // attempt to authenticate the user
        if (!Auth::attempt(['email' => $request->email, 'password' => $request->password])) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }

        // create an access token for the authenticated user
        $user = User::find(Auth::id());
        $token = $user->createToken('authToken')->accessToken;

        return response()->json(['access_token' => $token]);
    }
}

Auth Controller :

class AuthController extends Controller
{
    public function authentication(Request $request)
    {
        // the user is authenticated if this route is reached, so you can return a successful response
        return redirect()->route('dashboard');
    }
}

Here are my routes in api.php

Route::post('/login', [LoginController::class, 'login']);

Route::middleware(['auth.api', 'CORS'])->get('/auth-check', [AuthController::class, 'authentication']);
```		
im not sure about my 2nd route what is auth.api i dont know 
Im not sure what im doing wrong Please Help ... Thanks