javascript - שגיאה בטיפול בהודעות שגיאה עבור התחברות: http://localhost:3000/auth/login net::ERR_ABORTED 405 (הפעולה לא מותרים)

יש לי את /app/auth/login/route.ts

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const requestUrl = new URL(request.url)
  const formData = await request.formData()
  const email = String(formData.get('email'))
  const password = String(formData.get('password'))
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient({ cookies: () => cookieStore })

  await supabase.auth.signInWithPassword({
    email,
    password,
  })

  return NextResponse.redirect(requestUrl.origin, {
    status: 301,
  })
}

והדף שנמצא ב-/app/login/page.tsx

import Link from "next/link";

export default function LoginPage() {
  return (
    <>
      <form action="/auth/login" method="post">
      <label htmlFor="email">Email</label>
      <input name="email" />
      <label htmlFor="password">Password</label>
      <input type="password" name="password" />
      <button>Sign In</button>
    </form>

    <Link href="/reset-password">Reset Password</Link>
    </>
  )
}

אלה היו הקודים שקיבלתי מהתיעוד. עם זאת, אני לא מצליח לממש את המקום שבו זה מציג שהם נכנסו בהצלחה ואת טיפול השגיאות.

עקבתי אחרי התשובות למטה, עם זאת, אני מקבל את השגיאה הזו:

POST http://localhost:3000/auth/login net::ERR_ABORTED 405 (השיטה אינה מורשית)

route.ts

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { NextApiRequest, NextApiResponse } from 'next'; // Correct import for NextApiRequest and NextApiResponse
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server'; // Correct import for NextResponse

export async function handler(
  req: NextApiRequest, // Correct the parameter list
  res: NextApiResponse // Correct the parameter list
) {
  const jsonBody = await req.body.json(); // Change 'request' to 'req'
  const email = jsonBody.email;
  const password = jsonBody.password;
  const cookieStore = cookies();
  const supabase = createRouteHandlerClient({ cookies: () => cookieStore });

  try {
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      return res.status(401).json({ message: 'Login failed. Please check your credentials.' });
    }
    return res.status(200).json({ message: 'Login successful' });
  } catch (error) {
    console.error('An error occurred:', error);
    return res.status(500).json({ message: 'An unexpected error occurred' });
  }
}

api/login/page.tsx

'use client'

import { useRouter } from 'next/navigation';
import { useState } from 'react';

export default function LoginPage() {
  const router = useRouter();
  const [error, setError] = useState<string>('');
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
  
    try {
      const response = await fetch('/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email, password }),
      });
  
      if (response.status === 200) {
        router.push('/');
      } else {
        if (response.headers.get('content-type')?.includes('application/json')) {
          // Check if the response contains JSON data.
          const result = await response.json();
          setError(result.message);
        } else {
          // Handle non-JSON responses (e.g., empty responses).
          setError('An unexpected error occurred.');
        }
      }
    } catch (error) {
      console.log(error, "error on the login page.tsx")
      console.error('An error occurred:', error);
      setError('An unexpected error occurred.');
    }
  }; 

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          name="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <label htmlFor="password">Password</label>
        <input
          type="password"
          name="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Sign In</button>
      </form>

      {error && <p>{error}</p>}
    </>
  );
}

תשובה #1

אני חושב שעליך לשלוח בקשת POST עם JSON, ולטפל בה באמצעות JavaScript:

import { useRouter } from 'next/router';
import { useState } from 'react';

export default function LoginPage() {
  const router = useRouter();
  const [error, setError] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    try {
      const response = await fetch('/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email, password }),
      });

      if (response.status === 200) {
        router.push('/some-page-after-login')
      } else {
        const result = await response.json();
        setError(result.message);
      }
    } catch (error) {
      console.error('An error occurred:', error);
      setError('An unexpected error occurred.');
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          name="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <label htmlFor="password">Password</label>
        <input
          type="password"
          name="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Sign In</button>
      </form>

      {error && <p>{error}</p>}
    </>
  );
}

וב-API:

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export async function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  const jsonBody = await request.json();
  const email = jsonBody.email;
  const password = jsonBody.password;
  const cookieStore = cookies();
  const supabase = createRouteHandlerClient({ cookies: () => cookieStore });

  try {
    const { user, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      return res.status(401).json({ message: 'Login failed. Please check your credentials.' })
    }
    return res.status(200).json({ message: 'Login successful' })
  } catch (error) {
    console.error('An error occurred:', error);
    return res.status(500).json({ message: 'An unexpected error occurred' })
  }
}