Dropbox social login
Users authenticate through their existing Dropbox accounts instead of creating a separate application password.
Auth.js · Const
Dropbox
The Dropbox provider is a built-in Auth.js OAuth integration. Configure it with Dropbox client credentials and add the resulting provider to the Auth.js providers array.
How it works
Call the Dropbox provider factory with OAuth client credentials and include its result in Auth.js's providers array. Auth.js supplies the default OAuth 2 configuration, while the callback endpoint must match the provider's configured redirect URL.
Syntax
Dropbox(options): OAuthConfig<Record<string, any>>Parameters
| Name | Type | Description |
|---|---|---|
options | OAuthUserConfig<Record<string, any>> | OAuth provider options, including Dropbox client credentials and any supported OAuth configuration overrides. |
Returns
OAuthConfig<Record<string, any>>
Key points
- Auth.js includes Dropbox as a built-in provider, so no custom OAuth endpoints are needed for the standard setup.
- Adding the provider to the Auth.js configuration enables Dropbox as a login option.
- The Dropbox callback path ends with
/api/auth/callback/dropboxin the documented example. - The setup requires a Dropbox client ID value.
- The setup also requires the corresponding Dropbox client secret.
Common mistakes
- The provider uses Auth.js's OAuth 2 defaults; override them only when the application requires different settings.
Example: Configure Dropbox authentication
import { Auth } from "@auth/core"
import Dropbox from "@auth/core/providers/dropbox"
const request = new Request(origin)
const response = await Auth(request, {
providers: [
Dropbox({
clientId: process.env.DROPBOX_CLIENT_ID,
clientSecret: process.env.DROPBOX_CLIENT_SECRET,
}),
],
})This configures Auth.js with Dropbox by supplying the OAuth client credentials.
When to use it
Multi-provider authentication
An application needs several identity providers in one Auth.js setup.
Customized OAuth configuration
A deployment requires provider-specific OAuth settings beyond the built-in defaults.
Interview questions
QHow do you add Dropbox login to Auth.js?
Use the Dropbox provider factory in the Auth.js providers array and pass the Dropbox client ID and client secret. Auth.js then uses the provider's built-in OAuth configuration.
Follow-up: How would you customize behavior? Override the built-in OAuth provider configuration using the customization approach documented by Auth.js.
QWhat callback URL does the Dropbox provider use?
The callback URL is https://example.com/api/auth/callback/dropbox. The Dropbox application must be configured to redirect to the matching callback endpoint.
Follow-up: What must be checked if the callback fails? Verify that the registered redirect URL exactly matches the endpoint and deployment base URL.
QWhat are the Dropbox provider's parameter and return types?
The factory accepts an OAuth user configuration object and returns an OAuth provider configuration. In normal usage, the required values are the Dropbox client ID and client secret.
Follow-up: Why does the return type matter? Auth.js consumes the returned OAuth configuration as one provider in its authentication setup.
Related
OAuthConfigOAuthUserConfigAuthproviderscustomizing a built-in OAuth provider