title: trying to configure next-auth signin page, but having a problem with getProviders()
body: <p>Hello fellow programmers,</p>
  <p>I am building a nextJs app using next-auth for user sign-in. I have created the [...nextauth].js file in &quot;pages/api/auth&quot; and a signin.js file in &quot;pages/auth/&quot;, the code for these files is written below for reference. the problem I am having is that I am constantly getting the following error when I try to access to signin page: &quot;TypeError: Cannot convert undefined or null to object&quot;</p>
  <p>below is a list of the dependencies in the project and their corresponding versions:</p>
  <p>&quot;dependencies&quot;: {
  &quot;@heroicons/react&quot;: &quot;^1.0.5&quot;,
  &quot;@tailwindcss/forms&quot;: &quot;^0.3.4&quot;,
  &quot;faker&quot;: &quot;^5.5.3&quot;,
  &quot;firebase&quot;: &quot;^9.4.0&quot;,
  &quot;next&quot;: &quot;latest&quot;,
  &quot;next-auth&quot;: &quot;^4.0.0-beta.7&quot;,
  &quot;react&quot;: &quot;^17.0.2&quot;,
  &quot;react-dom&quot;: &quot;^17.0.2&quot;,
  &quot;tailwind-scrollbar-hide&quot;: &quot;^1.0.4&quot;
  },</p>
  <p>[..nextauth].js code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import NextAuth from "next-auth";
  import GithubProvider from "next-auth/providers/github";
  
  export default NextAuth({
    // Configure one or more authentication providers
    providers: [
      GithubProvider({
        clientId: process.env.GITHUB_ID,
        clientSecret: process.env.GITHUB_SECRET,
      }),
    ],
  
    pages: {
      signIn: "/auth/signin",
    },
  });</code></pre>
  </div>
  </div>
  </p>
  <p>signin.js code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { getProviders, signIn as signIntoProvider } from "next-auth/react";
  
  function signIn({ providers }) {
    return (
      &lt;&gt;
        {Object.values(providers).map((provider) =&gt; (
          &lt;div key={provider.name}&gt;
            &lt;button
              onClick={() =&gt; {
                signIntoProvider(provider.id);
              }}
            &gt;
              Sign In with {provider.name}
            &lt;/button&gt;
          &lt;/div&gt;
        ))}
      &lt;/&gt;
    );
  }
  export async function getServerSideProps(context) {
    const providers = await getProviders();
  
    return {
      props: {
        providers,
      },
    };
  }
  
  export default signIn;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/iMDes.png" rel="nofollow noreferrer">Error Code</a></p>
  <p>console logging &quot;providers&quot; displays &quot;null&quot; so I believe getProviders is not working properly for some reason. Any idea why this is happening?</p>
  <p>Thank you very much.</p>