Custom Sign-in Page

[typeofweb]

What is the improvement or update you wish to see?

The Custom Sign-in Page mentions provider.authorisation.url should be used as form action. Unfortunately, that doesn't seem to be working and results in the error:

Error: Cannot read properties of undefined (reading 'url')

Moreover, when /api/auth/signin/${provider.id} is used as the form action, MissingCSRF error is thrown on submission.

Is there any context that might help us understand?

—

Does the docs page already exist? Please link to it.

https://authjs.dev/guides/pages/signin

[SinPP]

Having the same problem. No key "authorisation" is present on the providers object. Not possible to create any custom sign in page for now.

[0pilatos0]

i seems like the authorisation key does not exist indeed, but the authorization key does, this could be a spelling mistake. Using it on the other end results in other errors

Error: Failed to find Server Action "null". This request might be from an older or newer deployment. Original error: Invariant: Missing 'next-action' header.

[ndom91]

Thanks for pointing out the authorisation misspelling! We've pushed a fix.

If there's still an issue with the provider authorization overrides then please open a new issue about that 🙏

[typeofweb]

@ndom91 I've opened an issue at #10567, but the bot automatically closed it.

[ndom91]

@ndom91 I've opened an issue at #10567, but the bot automatically closed it.

Ah sorry about that, it's setup a bit strict maybe 😅

I'll take a look at the Google provider and get back to you here

[ndom91]

@mmiszy I gave the linked page another look over, and that's a mistake on our part int he custom sign-in page example.

This is a bit of a hacky workaround which should work if you're importing the whole AuthConfig as config from auth.ts. Otherwise, it might be easier if you just export a separate provider config object from auth.ts to consume here.

import { signIn, config } from "@/auth.ts"

const slugify = (text: string) => text.toLowerCase().replace(/ /g, "-")

export default async function SignInPage() {
  return (
    <div className="flex flex-col gap-4 max-w-80 mx-auto justify-center h-screen">
      {Object.values(config.providers).map((provider) => (
        <form
          action={async () => {
            "use server"
            await signIn(slugify(provider.name))
          }}
        >
          <Button className="flex flex-row gap-2" type="submit">
            <span>Sign in with {provider.name}</span>
          </Button>
        </form>
      ))}
    </div>
  )
}

We'll update the page shortly as well 👍