getProviders is not available in v5 beta 3

[cassioseffrin]

Goals

1. Reinstate the getProviders feature in v5 beta.3 to enable customization of the login screen.
2. Address potential disruptions caused by the absence of getProviders in various use cases.
3. Enhance upgrade compatibility by providing a clear path for scenarios reliant on the deprecated functionality.

Non-Goals

No response

Background

Apologies if I've overlooked something, but I've been diving into the v5 beta.3 release, and it seems like the getProviders functionality is no longer available. This feature was very useful for login experience to fit various scenarios, and its absence in the latest beta is posing some challenges. If this functionality is indeed deprecated or replaced in v5, it might disrupt several existing scenarios and make the upgrade process more intricate.

Please let me know if there is another way to the the object that have all providers available for client side.

Previously, I used the following approach in Login.tsx:
Login.tsx:

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

export default function Login() {
  const [providers, setProviders] = useState({});
  useEffect(() => {
    (async () => {
      const res = (await getProviders()) as any;
      setProviders(res);
    })();
  }, []);
    return (
      <form noValidate>
                <Stack spacing={2} sx={{ mt: 8 }}>
                  {providers != null &&
                    Object.values(providers).map((provider: any) => {
                      console.log(provider);
                      return (
                        <>
                          {provider.name !== 'gerador-repag' && (
                            <div key={provider.name}>
                              <Button
                                size="large"
                                variant="outlined"
                                startIcon={
                                  provider.name.toLowerCase() == 'google' ? (
                                    <GoogleIcon />
                                  ) : (
                                    <InstagramIcon />
                                  )
                                }
                                fullWidth
                                onClick={() => signIn(provider.id)}
                              >
                                Logar com {provider.name}
                              </Button>
                            </div>
                          )}
                        </>
                      );
                    })}
                </Stack>
       </form>);
}

The error occurs on the line: "import { getProviders, signIn } from 'next-auth/react'"

Module '"next-auth/react"' has no exported member 'getProviders'

Proposal

Get back the working code of v4

[hermanorigotto]

Hello, guys! I just hit the same roadblock with v5 beta.3, and that missing getProviders.

Is there any estimate on when this issue will be solved?

[AbuSantos]

oh, this is a general issue. getProviders returns null

[Evanion]

It appears that getProviders is marked as @internal in the code. You can still force it by adding a @ts-ignore on the import, but that feels bad 😦 .

[cassioseffrin]

Thanks, @Evanion. I have been using @ts-ignore. I have registered an issue. The authors of next-auth said they will remove getProviders from the client side and turn it into a Server Component instead.