GetProvider() returns undefined / null

[nallibtermatrac]

Environment

{
"name": "t5customerportal",
"version": "0.2.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.4.4",
"@mui/material": "^5.4.4",
"@mui/x-data-grid": "^5.6.1",
"@mui/x-data-grid-generator": "^5.6.1",
"@mui/x-data-grid-pro": "^5.6.1",
"axios": "^0.26.1",
"classnames": "^2.2.6",
"mui-datatables": "^4.1.2",
"multer": "^1.4.4",
"next": "12.1.0",
"next-auth": "^4.2.1",
"next-connect": "^0.12.2",
"pino": "^7.9.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-transition-group": "^4.4.2",
"sentry": "^0.1.2",
"sharp": "^0.30.3"
}
}

Reproduction URL

https://next-auth.js.org/configuration/pages

Describe the issue

Using the example from the website... it returns null and crashes

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

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>
      ))}
    </>
  )
}

// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
  const providers = await getProviders()
  return {
    props: { providers },
  }
}

/*
// If older than Next.js 9.3
SignIn.getInitialProps = async () => {
  return {
    providers: await getProviders()
  }
}
*/

How to reproduce

just copy and paste the example from the website

Expected behavior

getting a customized page

[ThangHuuVu]

This is an likely an issue with NEXTAUTH_URL. Could you double check if you set the correct value?

[magicspon]

wwweird... i have those values in my .env.local

[magicspon]

Interesting... I had docker running (via https://craftcms.com/docs/nitro/2.x/).
The page loads as expected with docker turned off.

[magicspon]

Moving nextjs to run on port 6001 has resolved this issue for me.

[jonashaefele]

I tried a whole bunch of things after this random problem popped up for me. Literally overnight without any code changes. Maybe this helps someone:

After a while, I got a bit frustrated, so my attempts to solve it got less structured. But what eventually fixed it was:

• delete both node_modules and .next folders
• re-install dependencies
• change .env file formatting. for some reason I had all the vars defined like NEXTAUTH_URL = 'http://localhost:6001'; i changed it to NEXTAUTH_URL='http://localhost:6001' (I removed the spaces around the = and removed the semicolon at the end of the line.
• fresh build

I literally don't know which of the steps it was. Clearing .next alone didn't do the trick. Re-installing all node dependencies and re-formatting .env together helped. I think some VS Code extension re-formatted my .env which somehow lead next-auth not being able to properly read the variable, which then led to the following error:

[next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error Only absolute URLs are supported

and an empty providers array.

[Abhinil-07]

How to get back the .next file, I am a beginner so bit confused

[nallibtermatrac]

An update:

I have updated React, Next and NextAuth to...
"react": "17.0.2",
"next-auth": "^4.5.0",
"next": "12.1.1",

I am still receiving the same error:
error - TypeError: Cannot convert undefined or null to object

My app:
<SessionProvider session={session} refetchInterval={5 * 60}> <ThemeProvider theme={theme_}> <T5Header {...pageProps}></T5Header> <Component {...pageProps} /> <T5Footer {...pageProps}></T5Footer> </ThemeProvider> </SessionProvider>

[nallibtermatrac]

Hi,
I have noticed this https://next-auth.js.org/configuration/pages#oauth-sign-in ...
doesnt work in "pages/api" but it works in "pages".

the same code as the example is showing me the providers properly.

I am sorry for the misunderstanding

[FemtDeveloper]

hi, can you show us the working tree? Please

[kb2232]

its hard to understand what you saying - please show directory structure

[nallibtermatrac]

Hi,
What I am trying to say is I didnt know the "getproviders code" works at the hooks area, not in the server area.

[Inkvii]

i had same problem here. When I was running it using npm run dev it worked fine using NEXTAUTH_URL=http://localhost:3000. Once i built it and ran npm run start I got the same error about CLIENT_FETCH_ERROR when trying to get providers using await getProviders() call.

While I was debugging the problem, it seems that even using inbuilt fetch or axios on url NEXTAUTH_URL/api/auth/providers would result in ERRCONNECT but the same get request using browser would grant me the json.

In the end i had to change NEXTAUTH_URL and instead of localhost i had to use address that pointed to my IP (found using ipconfig /ifconfig ). That solved it fortunately

[BenoitSafari]

Thanks that did the trick for me.

[FemtDeveloper]

Hi, that in locally. Have you tried deployed in vercel?

[pauljmillar]

Thanks, reading this helped me notice I had a typo in
NEXTAUTH_URL=http://localhost:3000

[serg06]

For me, the issue happens when Deployment Protections are enabled.

Clearing cookies or disabling Deployment Protections fixes it.

[lisander-lopez]

2 days of me pulling my hair out google led me to this discussion... this "Vercel Authentication" feature is what I disabled to get it working........ and to think Vercel integration is "seamless"

[AbuSantos]

Vercel Authentication, where did you implement this

[lisander-lopez]

If you are asking where to go on Vercel to change this then it is,
Go to your project page -> Click settings tab at the top -> Click Deployment Protection on the left -> The first card should be Vercel Authentication....... if im not mistaken. I would prefer to leave it on as it does provide value in locking down all the preview deployments that get created.... Here are the docs if anything https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/vercel-authentication

[mannerism]

Turning off "settings" > "Deployment Protection" > "Vercel Authentication - Ensures visitors to your deployments are logged in to Vercel and are a member of your team." did the trick for me.