Merge pull request #453 from authorizerdev/feat-add-roblox-login

Add roblox login feature

Author: lakhansamani

app/package-lock.json

@@ -12,7 +12,7 @@
 	"author": "Lakhan Samani",
 	"license": "ISC",
 	"dependencies": {
-		"@authorizerdev/authorizer-react": "^1.3.1",
+		"@authorizerdev/authorizer-react": "^1.3.2",
 		"@types/react": "^17.0.15",
 		"@types/react-dom": "^17.0.9",
 		"esbuild": "^0.12.17",

app/package.json

@@ -2,19 +2,19 @@
 # yarn lockfile v1
 
 
-"@authorizerdev/authorizer-js@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-2.0.2.tgz"
-  integrity sha512-YgCtpaBDGYGMUlINFsvGNJnBtbnFG2wo66xX2i6auop52oVmKimvLpzOx8306/YddCxWhg9FljyVMp88Mbnxyw==
+"@authorizerdev/authorizer-js@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-2.0.3.tgz"
+  integrity sha512-uencwr3Ea8mwfxVKDFf2ITRCRSmzvua+O2voRuiWQORtRQTgZQjkN3M+IEkEj+WP9M1iFIl+NDgzECsp8ptC/A==
   dependencies:
     cross-fetch "^3.1.5"
 
-"@authorizerdev/authorizer-react@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.3.1.tgz"
-  integrity sha512-X7vQMr5jtZ28z+YZOt5ISB3lOYXNszpLpWw4S6VNs7TLAd5/ZP2kPaSdDbUgIvQFyYy51DHQeGygOu3G1n0Mdw==
+"@authorizerdev/authorizer-react@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.3.2.tgz"
+  integrity sha512-3kMAygHBCa8Fc9Oo0lz1k88r+Pd6kx1PSn3NMYLwxQXy2jRt4xWn7iuGn+SDGFs3DzofaN71I61gRwQ+6dO1rw==
   dependencies:
-    "@authorizerdev/authorizer-js" "^2.0.2"
+    "@authorizerdev/authorizer-js" "^2.0.3"
     validator "^13.11.0"
 
 "@babel/code-frame@^7.22.13":

app/yarn.lock

@@ -17,7 +17,8 @@ import {
 	FaApple,
 	FaTwitter,
 	FaMicrosoft,
-	FaTwitch, FaDiscord,
+	FaTwitch,
+	FaDiscord,
 } from 'react-icons/fa';
 import {
 	TextInputType,
@@ -474,6 +475,47 @@ const OAuthConfig = ({
 							/>
 						</Center>
 					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #3b5998"
+							borderRadius="5px"
+						>
+							<img
+								src="https://authorizer.dev/_next/image?url=%2Fimages%2Froblox.png&w=25&q=25"
+								alt="Roblox"
+							/>
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.ROBLOX_CLIENT_ID}
+								placeholder="Roblox Client ID"
+							/>
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.ROBLOX_CLIENT_SECRET}
+								placeholder="Roblox Client Secret"
+							/>
+						</Center>
+					</Flex>
 				</Stack>
 			</Box>
 		</div>

dashboard/public/roblox.png

@@ -14,6 +14,7 @@ export const TextInputType = {
 	MICROSOFT_CLIENT_ID: 'MICROSOFT_CLIENT_ID',
 	MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID: 'MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID',
 	TWITCH_CLIENT_ID: 'TWITCH_CLIENT_ID',
+	ROBLOX_CLIENT_ID: 'ROBLOX_CLIENT_ID',
 	JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
 	REDIS_URL: 'REDIS_URL',
 	SMTP_HOST: 'SMTP_HOST',
@@ -46,6 +47,7 @@ export const HiddenInputType = {
 	TWITTER_CLIENT_SECRET: 'TWITTER_CLIENT_SECRET',
 	MICROSOFT_CLIENT_SECRET: 'MICROSOFT_CLIENT_SECRET',
 	TWITCH_CLIENT_SECRET: 'TWITCH_CLIENT_SECRET',
+	ROBLOX_CLIENT_SECRET: 'ROBLOX_CLIENT_SECRET',
 	JWT_SECRET: 'JWT_SECRET',
 	SMTP_PASSWORD: 'SMTP_PASSWORD',
 	ADMIN_SECRET: 'ADMIN_SECRET',
@@ -141,6 +143,8 @@ export interface envVarTypes {
 	MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID: string;
 	TWITCH_CLIENT_ID: string;
 	TWITCH_CLIENT_SECRET: string;
+	ROBLOX_CLIENT_ID: string;
+	ROBLOX_CLIENT_SECRET: string;
 	ROLES: [string] | [];
 	DEFAULT_ROLES: [string] | [];
 	PROTECTED_ROLES: [string] | [];

dashboard/src/components/EnvComponents/OAuthConfig.tsx

@@ -39,6 +39,8 @@ export const EnvVariablesQuery = `
       MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID
       TWITCH_CLIENT_ID
       TWITCH_CLIENT_SECRET
+      ROBLOX_CLIENT_ID
+      ROBLOX_CLIENT_SECRET
       DEFAULT_ROLES
       PROTECTED_ROLES
       ROLES

dashboard/src/constants.ts

@@ -59,6 +59,8 @@ const Environment = () => {
 		MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID: '',
 		TWITCH_CLIENT_ID: '',
 		TWITCH_CLIENT_SECRET: '',
+		ROBLOX_CLIENT_ID: '',
+		ROBLOX_CLIENT_SECRET: '',
 		ROLES: [],
 		DEFAULT_ROLES: [],
 		PROTECTED_ROLES: [],

dashboard/src/graphql/queries/index.ts

@@ -27,4 +27,6 @@ const (
 	AuthRecipeMethodMicrosoft = "microsoft"
 	// AuthRecipeMethodTwitch is the twitch auth method
 	AuthRecipeMethodTwitch = "twitch"
+	// AuthRecipeMethodRoblox is the roblox auth method
+	AuthRecipeMethodRoblox = "roblox"
 )

dashboard/src/pages/Environment.tsx

@@ -126,6 +126,10 @@ const (
 	EnvKeyTwitchClientID = "TWITCH_CLIENT_ID"
 	// EnvKeyTwitchClientSecret key for env variable TWITCH_CLIENT_SECRET
 	EnvKeyTwitchClientSecret = "TWITCH_CLIENT_SECRET"
+	// EnvKeyRobloxClientID key for env variable ROBLOX_CLIENT_ID
+	EnvKeyRobloxClientID = "ROBLOX_CLIENT_ID"
+	// EnvKeyRobloxClientSecret key for env variable ROBLOX_CLIENT_SECRET
+	EnvKeyRobloxClientSecret = "ROBLOX_CLIENT_SECRET"
 	// EnvKeyOrganizationName key for env variable ORGANIZATION_NAME
 	EnvKeyOrganizationName = "ORGANIZATION_NAME"
 	// EnvKeyOrganizationLogo key for env variable ORGANIZATION_LOGO