feat: add Roblox social provider (#1249)

* Implemented Roblox social provider + documentation + icon for builder

* linter didn't like my svg and some of my other formatting

* and now the linter is finally happy

* made discord scope option overwrite default scopes, this way I dont need to have a users' email

* Revert "made discord scope option overwrite default scopes, this way I dont need to have a users' email"

This reverts commit 35b29e7.

---------

Co-authored-by: Bereket Engida <[email protected]>

Author: D3visionNL

docs/components/builder/social-provider.tsx

@@ -321,6 +321,23 @@ export const socialProviders = {
 		),
 		stringIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm297.1 84L257.3 234.6L379.4 396h-95.6L209 298.1L123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5l78.2-89.5zm-37.8 251.6L153.4 142.9h-28.3l171.8 224.7h26.3z"></path></svg>`,
 	},
+  roblox: {
+		Icon: (props?: SVGProps<any>) => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="1.2em"
+				height="1.2em"
+				viewBox="0 0 267 267"
+				{...props}
+			>
+				<path
+					fill="currentColor"
+					d="M 56.926 0.986 L 1.01 210.05 L 210.073 266.014 L 265.989 56.951 L 56.926 0.986 Z M 112.15 96.988 L 170.481 112.619 L 154.849 170.95 L 96.47 155.318 L 112.15 96.988 Z"
+				></path>
+			</svg>
+		),
+		stringIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 267 267"><path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M 56.926 0.986 L 1.01 210.05 L 210.073 266.014 L 265.989 56.951 L 56.926 0.986 Z M 112.15 96.988 L 170.481 112.619 L 154.849 170.95 L 96.47 155.318 L 112.15 96.988 Z"/></svg>`,
+	},
 	vk: {
 		Icon: (props?: SVGProps<any>) => (
 			<svg

docs/content/docs/authentication/roblox.mdx

@@ -0,0 +1,51 @@
+---
+title: Roblox
+description: Roblox provider setup and usage.
+---
+
+<Steps>
+    <Step> 
+        ### Get your Roblox Credentials
+        Get your Roblox credentials from the [Roblox Creator Hub](https://create.roblox.com/dashboard/credentials?activeTab=OAuthTab).
+
+        Make sure to set the redirect URL to `http://localhost:3000/api/auth/callback/roblox` 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.
+        
+        <Callout type="info">
+            The Roblox API does not provide email addresses. As a workaround, the user's `email` field uses the `preferred_username` value instead.
+        </Callout>
+    </Step>
+
+  <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: {
+                roblox: { // [!code highlight]
+                    clientId: process.env.ROBLOX_CLIENT_ID, // [!code highlight]
+                    clientSecret: process.env.ROBLOX_CLIENT_SECRET, // [!code highlight]
+                }, // [!code highlight]
+            },
+        })
+        ```
+    </Step>
+       <Step>
+        ### Sign In with Roblox 
+        To sign in with Roblox, 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 `roblox`.
+
+        ```ts title="auth-client.ts"  
+        import { createAuthClient } from "better-auth/client"
+        const authClient =  createAuthClient()
+        
+        const signIn = async () => {
+            const data = await authClient.signIn.social({
+                provider: "roblox"
+            })
+        }
+        ```
+    </Step>
+</Steps>

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

@@ -12,6 +12,7 @@ import { dropbox } from "./dropbox";
 import { linkedin } from "./linkedin";
 import { gitlab } from "./gitlab";
 import { reddit } from "./reddit";
+import { roblox } from "./roblox";
 import { z } from "zod";
 import { vk } from "./vk";
 export const socialProviders = {
@@ -28,6 +29,7 @@ export const socialProviders = {
 	linkedin,
 	gitlab,
 	reddit,
+	roblox,
 	vk,
 };
 
@@ -65,4 +67,5 @@ export * from "./dropbox";
 export * from "./linkedin";
 export * from "./gitlab";
 export * from "./reddit";
+export * from "./roblox";
 export * from "./vk";

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

@@ -0,0 +1,87 @@
+import { betterFetch } from "@better-fetch/fetch";
+import type { OAuthProvider, ProviderOptions } from "../oauth2";
+import { validateAuthorizationCode } from "../oauth2";
+
+export interface RobloxProfile extends Record<string, any> {
+	/** the user's id */
+	sub: string;
+	/** the user's username */
+	preferred_username: string;
+	/** the user's display name, will return the same value as the preffered_username if not set */
+	nickname: string;
+	/** the user's display name, again, will return the same value as the preffered_username if not set */
+	name: string;
+	/** the account creation date as a unix timestamp in seconds */
+	created_at: number;
+	/** the user's profile url */
+	profile: string;
+	/** the user's avatar url */
+	picture: string;
+}
+
+export interface RobloxOptions extends ProviderOptions<RobloxProfile> {
+	prompt?:
+		| "none"
+		| "consent"
+		| "login"
+		| "select_account"
+		| "select_account+consent";
+}
+
+export const roblox = (options: RobloxOptions) => {
+	return {
+		id: "roblox",
+		name: "Roblox",
+		createAuthorizationURL({ state, scopes, redirectURI }) {
+			const _scopes = scopes || ["openid", "profile"];
+			options.scope && _scopes.push(...options.scope);
+			return new URL(
+				`https://apis.roblox.com/oauth/v1/authorize?scope=${_scopes.join(
+					"+",
+				)}&response_type=code&client_id=${
+					options.clientId
+				}&redirect_uri=${encodeURIComponent(
+					options.redirectURI || redirectURI,
+				)}&state=${state}&prompt=${options.prompt || "select_account+consent"}`,
+			);
+		},
+		validateAuthorizationCode: async ({ code, redirectURI }) => {
+			return validateAuthorizationCode({
+				code,
+				redirectURI: options.redirectURI || redirectURI,
+				options,
+				tokenEndpoint: "https://apis.roblox.com/oauth/v1/token",
+				authentication: "post",
+			});
+		},
+		async getUserInfo(token) {
+			if (options.getUserInfo) {
+				return options.getUserInfo(token);
+			}
+			const { data: profile, error } = await betterFetch<RobloxProfile>(
+				"https://apis.roblox.com/oauth/v1/userinfo",
+				{
+					headers: {
+						authorization: `Bearer ${token.accessToken}`,
+					},
+				},
+			);
+
+			if (error) {
+				return null;
+			}
+			return {
+				user: {
+					id: profile.sub,
+					name: profile.nickname || profile.preferred_username || "",
+					image: profile.picture,
+					email: profile.preferred_username || null, // Roblox does not provide email
+					emailVerified: true,
+				},
+				data: {
+					...profile,
+				},
+			};
+		},
+	} satisfies OAuthProvider<RobloxProfile>;
+};