Singin route doesn't work

[rdrigos]

Good morning! I have a problem with NextAuth. I added the package to my Next project with the command npm install next-auth@beta and created the routes and provider for credentials. When I try to log in, I am redirected to http://localhost:3000/api/auth/error and the page appears: 404 | This page could not be found. but not even the authorize of src\app\auth\components\auth-form.tsx was called

src\app\api\auth[...nextauth]\routes.ts:

export { GET, POST } from '@/services/auth';

src\services\auth\index.ts:

• I put an example user, as I will use the ldap protocol to authenticate my user's credentials

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export const {
  handlers: { GET, POST },
  auth,
} = NextAuth({
  pages: {
    signIn: '/auth',
    signOut: '/auth',
    error: '/auth',
  },
  providers: [
    CredentialsProvider({
      name: 'ldap-auth',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        console.log(credentials);

        // Temporary: If the user has the same username and password, returns the user
        if (credentials.username === 'user15052' && credentials.password === '!Test!1234') {
          return {
            accountName: 'user15052',
            name: 'Rafael Drigo',
            email: '[email protected]',
            memberOf: ['users-br-dev', 'fp-br-it', 'Duo-MFA-Users', 'SSLVPN-Users'],
          };
        }

        // If the user does not have the same username and password, returns null
        return null;
      },
    }),
  ],
});

src\app\auth\components\auth-form.tsx:

'use client';

import { signIn } from 'next-auth/react';
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useForm } from 'react-hook-form';

export function AuthForm() {
  const form = useForm();

  const handleSubmit = form.handleSubmit(async (data) => {
    try {
      console.log(data);
      signIn('ldap-auth', {
        ...data,
      });
    } catch (error) {
      console.error(error);
    }
  });

  return (
    <div className="flex h-screen items-center justify-center">
      <Card className="w-96">
        <CardHeader>
          <CardTitle className="text-2xl">Login</CardTitle>
          <CardDescription>Enter your computer username and password to access your account.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <Input id="username" type="text" required {...form.register('username')} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" type="password" required {...form.register('password')} />
            </div>
            <Button type="submit" className="w-full">
              Login
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

Can anybody help me? I haven't implemented it yet, but I will redirect the user to "/" when he is authenticated