Next-auth: Custom Sign In Page with Typescript doesn't work

[sdan]

Describe the bug
Getting a TypeError: Cannot convert undefined or null to object when adding a custom sign in page under /api/auth/signin. This is because export default function SignIn({ providers }) { is being passed null (suspecting SignIn.getInitialProps isn't getting the context properly, resulting in the default SignIn function being passed in null).

Steps to reproduce
Use example code except rename .js to .tsx and install types.
Here is my /api/auth/signin.tsx file:

import React from "react";
import { providers, signIn } from "next-auth/client";

export default function SignIn({ providers }) {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => signIn(provider.id)}>
            Sign in with {provider.name}
          </button>
        </div>
      ))}
    </>
  );
}

SignIn.getInitialProps = async (context) => {
  return {
    providers: await providers(context),
  };
};

Expected behavior
Able to create a simple sign in page

Screenshots or error logs

• [] Found the documentation helpful
• [*] Found documentation but was incomplete
• [*] Could not find relevant documentation
• [*] Found the example project helpful
• [ ] Did not find the example project helpful

[Marujah]

interface GetProvidersResponse {
[provider: string]: SessionProvider;
} will be used internally but it's not exported

in addition :

• declare function providers(): Promise;
  and in the docs for the singin page :
  ...
  providers: await providers(context),
  ...

providers does not accept arguments.

I'd like to use this page in typescript too

[alexandrepaivaa]

Hi,

I was having a similar problem and I found out I had forgotten to create the file pages/api/auth/[...nextauth].js

I don't know if it's your case, but have a look on this.

[nabiltkarim]

Did anyone manage to solve this? Not being able to pass context in providers for typescript.

[Marujah]

I end up with using my own solution since this won't be maintained

[balazsorban44]

Hi @Marujah what do you mean by this not being maintained? As of right now, TypeScript is a community effort for next-auth at https://github.com/DefinitelyTyped/DefinitelyTyped

Please head over there with TypeScript related issues. That said, somebody is already working on built-in TypeScript support at #516, but any PRs implementing it holistically or partially is greatly appreciated!