add support for roblox

Author: lakhansamani

package-lock.json

@@ -66,7 +66,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "^2.0.2",
+    "@authorizerdev/authorizer-js": "^2.0.3",
     "validator": "^13.11.0"
   }
 }

package.json

@@ -11,6 +11,7 @@ import { Apple } from '../icons/apple';
 import { Twitter } from '../icons/twitter';
 import { Microsoft } from '../icons/microsoft';
 import { Twitch } from '../icons/twitch';
+import { Roblox } from '../icons/roblox';
 
 export const AuthorizerSocialLogin: React.FC<{
   urlProps?: Record<string, any>;
@@ -25,7 +26,8 @@ export const AuthorizerSocialLogin: React.FC<{
     config.is_apple_login_enabled ||
     config.is_twitter_login_enabled ||
     config.is_microsoft_login_enabled ||
-    config.is_twitch_login_enabled;
+    config.is_twitch_login_enabled ||
+    config.is_roblox_login_enabled;
 
   const data: {
     scope?: string;
@@ -161,6 +163,20 @@ export const AuthorizerSocialLogin: React.FC<{
           <br />
         </>
       )}
+      {config.is_roblox_login_enabled && (
+        <>
+          <StyledButton
+            appearance={ButtonAppearance.Default}
+            onClick={() => {
+              window.location.href = `${config.authorizerURL}/oauth_login/roblox?${queryParams}`;
+            }}
+          >
+            <Roblox />
+            Continue with Roblox
+          </StyledButton>
+          <br />
+        </>
+      )}
       {hasSocialLogin &&
         (config.is_basic_authentication_enabled ||
           config.is_mobile_basic_authentication_enabled ||

src/components/AuthorizerSocialLogin.tsx

@@ -29,6 +29,7 @@ const AuthorizerContext = createContext<AuthorizerContextPropsType>({
     is_twitter_login_enabled: false,
     is_microsoft_login_enabled: false,
     is_twitch_login_enabled: false,
+    is_roblox_login_enabled: false,
     is_email_verification_enabled: false,
     is_basic_authentication_enabled: false,
     is_magic_link_login_enabled: false,
@@ -101,6 +102,7 @@ let initialState: AuthorizerState = {
     is_twitter_login_enabled: false,
     is_microsoft_login_enabled: false,
     is_twitch_login_enabled: false,
+    is_roblox_login_enabled: false,
     is_email_verification_enabled: false,
     is_basic_authentication_enabled: false,
     is_magic_link_login_enabled: false,
@@ -142,8 +144,10 @@ export const AuthorizerProvider: FC<{
   );
 
   const getToken = async () => {
-    const { data: metaRes, errors: metaResErrors } =
-      await authorizerRef.current.getMetaData();
+    const {
+      data: metaRes,
+      errors: metaResErrors,
+    } = await authorizerRef.current.getMetaData();
     try {
       if (metaResErrors && metaResErrors.length) {
         throw new Error(metaResErrors[0].message);

src/contexts/AuthorizerContext.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Roblox = () => {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: '10px',
+        top: '12px',
+        display: 'flex',
+      }}
+    >
+      <img
+        src="https://authorizer.dev/_next/image?url=%2Fimages%2Froblox.png&w=24&q=24"
+        alt="roblox_logo"
+      />
+    </div>
+  );
+};

src/icons/roblox.tsx

@@ -13,6 +13,7 @@ export type AuthorizerConfig = {
   is_twitter_login_enabled: boolean;
   is_microsoft_login_enabled: boolean;
   is_twitch_login_enabled: boolean;
+  is_roblox_login_enabled: boolean;
   is_email_verification_enabled: boolean;
   is_basic_authentication_enabled: boolean;
   is_magic_link_login_enabled: boolean;
@@ -48,6 +49,7 @@ export type AuthorizerContextPropsType = {
     is_twitter_login_enabled: boolean;
     is_microsoft_login_enabled: boolean;
     is_twitch_login_enabled: boolean;
+    is_roblox_login_enabled: boolean;
     is_email_verification_enabled: boolean;
     is_basic_authentication_enabled: boolean;
     is_magic_link_login_enabled: boolean;