Cannot convert undefined or null to object in Next.js

Question

Hey I am building a login page with Next.js and next-auth I have also written in providers array in [...nextauth].js.

But when I run the code (given below):-

import { getProviders, signIn } from "next-auth/react";

function Login({ providers }) {
  return (
    <div>
      <img src="/spot-it-aye.png" alt="" />

      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button
            onClick={() => signIn(provider.id, { callbackUrl: "/" })}>
            Login With {provider.name}
          </button>
        </div>
      ))}
    </div>
  );
}

export default Login;

export async function getServerSideProps() {
  let providers = await getProviders();

  return {
    props: {
      providers,
    },
  };
}

I get the

errorImage

This is the console at compilation

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error request to https://localhost:3000/api/auth/providers failed, reason: write 
EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:332:
 {
  error: {
    message: 'request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n',
    stack: 'FetchError: request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n' +       
      '\n' +
      '    at ClientRequest.<anonymous> (E:\\Coding\\VSCode\\Next JS\\spotify-2.0\\node_modules\\node-fetch\\lib\\index.js:1461:11)\n' +
      '    at ClientRequest.emit (node:events:390:28)\n' +
      '    at ClientRequest.emit (node:domain:475:12)\n' +
      '    at TLSSocket.socketErrorListener (node:_http_client:447:9)\n' +
      '    at TLSSocket.emit (node:events:390:28)\n' +
      '    at TLSSocket.emit (node:domain:475:12)\n' +
      '    at emitErrorNT (node:internal/streams/destroy:157:8)\n' +
      '    at emitErrorCloseNT (node:internal/streams/destroy:122:3)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:83:21)',
    name: 'FetchError'
  },
  path: 'providers',
  message: 'request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n'
}

Any help would be appreciated. Note: I tried using

Make sure that the Object exists before trying to map the object: `{Object && Object.values(providers).map((provider) => (` — Jamie_D, Dec 23 '21 at 16:36
Does this answer your question: [Error in Postman: Error: write EPROTO 8768:error:1408F10B:SSL routines:ssl3\_get\_record:wrong version number:](https://stackoverflow.com/questions/61916754/error-in-postman-error-write-eproto-8768error1408f10bssl-routinesssl3-get)? Change your `localhost` URL to use `HTTP` instead. — juliomalves, Dec 25 '21 at 12:21

score 1 · Answer 1 · answered Nov 20 '22 at 13:03

I also had the same issue. I was able to get the providers object inside getServerSideProps but it was not passing down as it should be inside the page. So it has to do with how my _app.tsx was configured to receive the pageProps.

I was following along a tutorial and below was how my app was configured to receive page props which was the problem:

function MyApp({ Component, pageProps:{ session, pageProps} }: AppProps) {
    
    console.log(session);
    return (
        <SessionProvider session={session}>
            <Component {...pageProps} />
        </SessionProvider>
    )
}

export default MyApp

I changed the app function to below which actually made sure my pages are receiving the pageProps without any problem:

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <SessionProvider session={pageProps.session}>
            <Component {...pageProps} />
        </SessionProvider>
    )
}

export default MyApp

score 0 · Answer 2 · answered Dec 24 '21 at 16:26

0

Can you post your next.js version as next-auth/react implementation is different based on its version.

I doubt if there is already another application is running on your localhost with the same port number. Or you are using https instead of http for the next.js dev server.

answered Dec 24 '21 at 16:26

Alan Z

803
1
7
13

1

This should be added as a comment and not as an answer. Answers are strictly for solving the OP's problems. – Tushar Shahi Dec 25 '21 at 15:10

Cannot convert undefined or null to object in Next.js

2 Answers2

Linked