Spotify sign-in
Users authenticate with their Spotify accounts in a Next.js Auth.js application.
Auth.js · Const
Spotify
Spotify is a built-in Auth.js OAuth provider for adding Spotify sign-in. Register it with Spotify credentials and use the documented callback URL.
How it works
The Spotify provider factory creates an OAuth configuration for Auth.js. Supply the Spotify client ID and secret, then include the resulting provider in the Auth.js providers list; the callback must point to the documented Spotify callback route.
Syntax
function default<P extends SpotifyProfile>(options: OAuthUserConfig<P>): OAuthConfig<P>Parameters
| Name | Type | Description |
|---|---|---|
options | OAuthUserConfig<P> | Provider options, including OAuth client credentials and optional configuration overrides. |
Returns
OAuthConfig<P>
Key points
- Spotify is available as a built-in Auth.js provider.
- Its purpose is to add Spotify sign-in to an application.
- The documented callback URL ends with /api/auth/callback/spotify.
- The provider's documented environment variables are AUTH_SPOTIFY_ID and AUTH_SPOTIFY_SECRET.
- The built-in provider supplies default OAuth settings.
Common mistakes
- Spotify is configured as OAuth 2 by default; override the built-in configuration only when your use case requires it.
Example: Configure Spotify in Auth.js
import Spotify from "next-auth/providers/spotify"
export const authConfig = {
providers: [
Spotify({
clientId: process.env.AUTH_SPOTIFY_ID!,
clientSecret: process.env.AUTH_SPOTIFY_SECRET!,
}),
],
}Register the Spotify provider with its OAuth client credentials.
When to use it
Built-in OAuth setup
An application needs a preconfigured OAuth integration instead of defining Spotify endpoints manually.
Provider customization
An application needs provider behavior different from the built-in defaults.
Interview questions
QHow do you add Spotify login to an Auth.js application?
Import the provider from the framework-specific Auth.js package and add it to the providers array. If calling the provider factory, pass the Spotify client ID and client secret.
Follow-up: What callback endpoint must Spotify use? Configure the provider application with https://example.com/api/auth/callback/spotify for the documented Next.js-style route.
QWhat does the Spotify provider function accept and return?
The provider factory accepts OAuthUserConfig<P>, where P extends SpotifyProfile, and returns OAuthConfig<P>. This lets the provider expose a typed OAuth configuration based on the Spotify profile shape.
Follow-up: What is the generic constraint? The profile type parameter must extend SpotifyProfile.
QWhich credentials are needed for Spotify configuration?
Auth.js documents AUTH_SPOTIFY_ID and AUTH_SPOTIFY_SECRET as the Spotify environment variables. A framework integration can then register the provider using its imported Spotify provider configuration.
Follow-up: How can defaults be changed? Pass provider options to the provider function; Auth.js documents that built-in OAuth defaults can be overridden for a specific use case.
Related
SpotifyProfileOAuthConfigOAuthUserConfigproviderscustomizing a built-in OAuth provider