List available authentication providers
Sign-in UI
Auth.js · Function
getProviders
getProviders() asynchronously retrieves the configured authentication providers in a client-safe record. It can resolve to null when no provider data is available.
How it works
Call getProviders without arguments to asynchronously obtain the configured authentication providers in a client-safe form. The result is either null or a record keyed by provider identifiers, so callers commonly guard against null and iterate over the record values.
Syntax
function getProviders(): Promise<null | Record<ProviderId, ClientSafeProvider>>Returns
Promise<null | Record<ProviderId, ClientSafeProvider>>
Key points
- The function has no parameters and returns a promise, so callers must use await or another promise-handling approach.
- Successful provider data is represented as a record keyed by ProviderId, with ClientSafeProvider values.
- This API belongs to the Next.js integration rather than the framework-independent core API.
- The surrounding integration supports both Client Components and the Pages Router.
Common mistakes
- The result is asynchronous and may be null, so await it and handle the empty result before reading provider entries.
Example: Render configured providers
import { getProviders } from "next-auth/react"
export default async function SignIn() {
const providers = await getProviders()
if (!providers) return <p>No providers configured.</p>
return (
<div>
{Object.values(providers).map((provider) => (
<p key={provider.id}>{provider.name}</p>
))}
</div>
)
}Fetches the configured, client-safe providers and renders each provider name.
When to use it
Inspect configured sign-in options before rendering
Provider discovery
Use provider data in a Client Component or Pages Router page
Next.js routing
Interview questions
QWhat does getProviders return?
getProviders returns a promise resolving to either null or a record of client-safe providers. Each record key is a provider identifier, and the values contain the data suitable for presenting sign-in choices.
Follow-up: How should the result be rendered? Guard against null, then iterate over Object.values of the record and use each provider's id as a stable key.
QDoes getProviders accept configuration arguments?
It takes no parameters: the function signature is getProviders(). The returned promise resolves to the configured providers rather than requiring provider configuration as an argument.
Follow-up: What type describes the provider entries? ClientSafeProvider describes the values, while ProviderId describes the record keys.
QWhy would an application call getProviders?
The function is part of the Next.js React integration and is used to obtain a client-safe list of configured providers for a sign-in interface. It supports both Client Components and the Pages Router.
Follow-up: Where would provider configuration come from? It is configured in the Auth.js setup and exposed to this helper as the available provider list.
Related
ClientSafeProviderProviderIdsignInNextAuth.js