Start authentication with a selected OAuth provider
Provider-specific login
Auth.js · Function
signIn
signIn starts an Auth.js authentication flow. Pass a provider to authenticate with it directly, or omit the provider to show the configured sign-in page.
How it works
Call signIn from the appropriate Auth.js package to begin authentication. With a provider it attempts that provider directly; without one it takes the user to the configured sign-in page, and client usage handles CSRF protection.
Syntax
function signIn(provider?, options?, authorizationParams?): Promise<void>Parameters
| Name | Type | Description |
|---|---|---|
provider | ProviderId | Optional configured provider identifier; omit it to show the sign-in page. |
options | SignInOptions<true> | Optional settings for the sign-in operation. |
authorizationParams | SignInAuthorizationParams | Optional provider authorization parameters. |
Returns
Promise<void>
Key points
- The function either starts authentication or opens the provider-selection sign-in page.
- The client helper includes CSRF protection as part of its sign-in operation.
- Optional sign-in options customize the operation, using the package’s SignInOptions type.
- The documented client signature resolves to a Promise with no value.
Common mistakes
- The client-side variant must run in a Client Component or the Pages Router; use the configured auth signIn method in Server Actions.
Example: Provider sign-in button
import { signIn } from "next-auth/react"
export function SignInButton() {
return <button onClick={() => signIn("github")}>Sign in with GitHub</button>
}Clicking the button starts sign-in directly with the selected provider.
When to use it
Send users to the sign-in page when no provider is chosen
Provider selection
Submit form data to a configured credentials provider
Credentials login
Interview questions
QWhat does signIn do when called with and without a provider?
signIn starts an authentication flow. Passing a provider attempts that provider directly; omitting it redirects to the sign-in page that lists the available providers.
Follow-up: How would you invoke it in a Server Action? Use the signIn exported from the Auth.js configuration rather than the client package function.
QWhat are signIn’s inputs and return values?
The client function accepts an optional provider, options, and authorization parameters, and returns a Promise. Its client-side return type is Promise<void>, while the response-returning overload can provide a SignInResponse.
Follow-up: What should be checked before using the client overload? Confirm the call is in a Client Component or Pages Router context.
QHow can an application start sign-in with a specific provider?
A provider argument lets the application bypass the provider-selection page and start authentication with that provider. For example, signIn("github") begins the GitHub flow.
Follow-up: How can credentials be submitted? Use the configured credentials provider and pass the form data to signIn, such as signIn("credentials", formData).
Related
SignOutSessionProviderSignInOptionsSignInAuthorizationParamsProviderId