feat: dropbox (#286)

docs/components/sidebar-content.tsx

@@ -509,6 +509,24 @@ export const contents: Content[] = [
 					</svg>
 				),
 			},
+			{
+				title: "Dropbox",
+				href: "/docs/authentication/dropbox",
+				icon: () => (
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="1.2em"
+						height="1.2em"
+						viewBox="0 0 528 512"
+					>
+						<path
+							className="fill-current"
+							fillRule="evenodd"
+							d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
+						/>
+					</svg>
+				),
+			},
 		],
 	},
 	{

docs/content/docs/authentication/dropbox.mdx

@@ -0,0 +1,50 @@
+---
+title: Dropbox
+description: Dropbox Provider
+---
+
+<Steps>
+    <Step> 
+        ### Get your Dropbox credentials
+        To use Dropbox sign in, you need a client ID and client secret. You can get them from the [Dropbox Developer Portal](https://www.dropbox.com/developers). You can Allow "Implicit Grant & PKCE" for the application in the App Console.
+        
+        Make sure to set the redirect URL to `http://localhost:3000/api/auth/callback/dropbox` for local development. For production, you should set it to the URL of your application. If you change the base path of the auth routes, you should update the redirect URL accordingly.
+    </Step>
+
+    If you need deeper dive into Dropbox Authenticationcation, you can check out the [official documentation](https://developers.dropbox.com/oauth-guide).
+
+  <Step>
+        ### Configure the provider
+        To configure the provider, you need to import the provider and pass it to the `socialProviders` option of the auth instance.
+
+        ```ts title="auth.ts"
+        import { betterAuth } from "better-auth"
+
+        export const auth = betterAuth({
+            socialProviders: { // [!code highlight]
+                dropbox: { // [!code highlight]
+                    clientId: process.env.DROPBOX_CLIENT_ID as string, // [!code highlight]
+                    clientSecret: process.env.DROPBOX_CLIENT_SECRET as string, // [!code highlight]
+                }, // [!code highlight]
+            }, // [!code highlight]
+        })
+        ```
+    </Step>
+       <Step>
+        ### Signin with Dropbox
+        To signin with Dropbox, you can use the `signIn.social` function provided by the client. The `signIn` function takes an object with the following properties:
+        - `provider`: The provider to use. It should be set to `dropbox`.
+
+        ```ts title="client.ts"
+        import { createAuthClient } from "better-auth/client"
+        const client = createAuthClient()
+
+        const signin = async () => {
+            const data = await client.signIn.social({
+                provider: "dropbox"
+            })
+        }
+        ```
+    </Step>
+
+</Steps>

packages/better-auth/src/social-providers/dropbox.ts

@@ -0,0 +1,80 @@
+import { betterFetch } from "@better-fetch/fetch";
+import type { OAuthProvider, ProviderOptions } from "../oauth2";
+import { createAuthorizationURL, validateAuthorizationCode } from "../oauth2";
+
+export interface DropboxProfile {
+	account_id: string;
+	name: {
+		given_name: string;
+		surname: string;
+		familiar_name: string;
+		display_name: string;
+		abbreviated_name: string;
+	};
+	email: string;
+	email_verified: boolean;
+	profile_photo_url: string;
+}
+
+export interface DropboxOptions extends ProviderOptions {}
+
+export const dropbox = (options: DropboxOptions) => {
+	const tokenEndpoint = "https://api.dropboxapi.com/oauth2/token";
+
+	return {
+		id: "dropbox",
+		name: "Dropbox",
+		createAuthorizationURL: async ({
+			state,
+			scopes,
+			codeVerifier,
+			redirectURI,
+		}) => {
+			const _scopes = options.scope || scopes || ["account_info.read"];
+			return await createAuthorizationURL({
+				id: "dropbox",
+				options,
+				authorizationEndpoint: "https://www.dropbox.com/oauth2/authorize",
+				scopes: _scopes,
+				state,
+				redirectURI,
+				codeVerifier,
+			});
+		},
+		validateAuthorizationCode: async ({ code, codeVerifier, redirectURI }) => {
+			return await validateAuthorizationCode({
+				code,
+				codeVerifier,
+				redirectURI: options.redirectURI || redirectURI,
+				options,
+				tokenEndpoint,
+			});
+		},
+		async getUserInfo(token) {
+			const { data: profile, error } = await betterFetch<DropboxProfile>(
+				"https://api.dropboxapi.com/2/users/get_current_account",
+				{
+					method: "POST",
+					headers: {
+						Authorization: `Bearer ${token.accessToken}`,
+					},
+				},
+			);
+
+			if (error) {
+				return null;
+			}
+
+			return {
+				user: {
+					id: profile.account_id,
+					name: profile.name?.display_name,
+					email: profile.email,
+					emailVerified: false,
+					image: profile.profile_photo_url,
+				},
+				data: profile,
+			};
+		},
+	} satisfies OAuthProvider<DropboxProfile>;
+};

packages/better-auth/src/social-providers/index.ts

@@ -8,6 +8,7 @@ import { microsoft } from "./microsoft-entra-id";
 import { spotify } from "./spotify";
 import { twitch } from "./twitch";
 import { twitter } from "./twitter";
+import { dropbox } from "./dropbox";
 
 export const socialProviders = {
 	apple,
@@ -19,6 +20,7 @@ export const socialProviders = {
 	spotify,
 	twitch,
 	twitter,
+	dropbox,
 };
 
 export const socialProviderList = Object.keys(socialProviders) as [
@@ -43,5 +45,6 @@ export * from "./spotify";
 export * from "./twitch";
 export * from "./facebook";
 export * from "./twitter";
+export * from "./dropbox";
 
 export type SocialProviderList = typeof socialProviderList;