For the login component itself i've basically copied what was provided on the documentation with slight modifications to use a server-component instead for nextjs 13 (https://next-auth.js.org/configuration/pages#credentials-sign-in).
Using the automatically generated signin page by commenting out the pages in the config everything works fine, but for some reason my custom component won't work.

config:

export const options: NextAuthOptions = {
    providers: [
        CredentialsProvider({
            name: "Credentials",
            credentials: {
                username: {
                    label: "Username:",
                    type: "text",
                    placeholder: "username"
                },
                password: {
                    label: "Password:",
                    type: "password",
                    placeholder: "password"
                }
            },
            async authorize(credentials) {
                console.log(credentials)
                const user = { id: "1", username: "test", password: "test" };

                if(credentials?.username === user.username && credentials?.password === user.password) {
                    return user;
                }

                return null;
            }
        })
    ],
    pages: {
        signIn: "/login"
    },
}

Login.tsx:

export default async function LogIn() {
  const csrfToken = await getCsrfToken();

  return (
    <form method="post" action="/api/auth/callback/credentials">
      <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
      <label>
        Username
        <input name="username" type="text" />
      </label>
      <label>
        Password
        <input name="password" type="password" />
      </label>
      <button type="submit">Log in</button>
    </form>
    )
}

The action is submitted with the correct payload, but for reasons unknown to me the authorize method doesn't get called when using the custom login page