Merge pull request #95 from scale8/publishabe-keys-from-api

Get publishable keys from the api.

Author: cwbeck

api/src/backends/configuration/abstractions/BaseConfig.ts

@@ -258,6 +258,10 @@ export default abstract class BaseConfig {
         return (await this.getConfigEntryOrElse('CAPTCHA_ENABLED', 'true')) === 'true';
     }
 
+    public async getCaptchaPublishable(): Promise<string> {
+        return await this.getConfigEntryThrows('CAPTCHA_PUBLISHABLE');
+    }
+
     public async getCaptchaSecret(): Promise<string> {
         return await this.getConfigEntryThrows('CAPTCHA_SECRET');
     }
@@ -270,6 +274,10 @@ export default abstract class BaseConfig {
         return await this.getConfigEntryThrows('AIRBRAKE_KEY');
     }
 
+    public async getStripePublishableKey(): Promise<string> {
+        return await this.getConfigEntryThrows('STRIPE_PUBLISHABLE_KEY');
+    }
+
     public async getStripeSecretKey(): Promise<string> {
         return await this.getConfigEntryThrows('STRIPE_SECRET_KEY');
     }

api/src/gql/ResolverRegister.ts

@@ -227,6 +227,12 @@ export default class ResolverRegister {
                     use_github_sso: await this.config.gitHubSsoEnabled(),
                     use_email: await this.config.emailServerEnabled(),
                     is_audit_enabled: await this.config.isAuditEnabled(),
+                    stripe_publishable: this.config.isCommercial()
+                        ? await this.config.getStripePublishableKey()
+                        : null,
+                    captcha_publishable: this.config.isCommercial()
+                        ? await this.config.getCaptchaPublishable()
+                        : null,
                     is_dev: this.config.isDevelopment(),
                 };
             },

api/src/gql/TypeDefRegister.ts

@@ -811,6 +811,14 @@ export default class TypeDefRegister {
                 """
                 is_audit_enabled: Boolean
                 """
+                Stripe Publishable Key
+                """
+                stripe_publishable: String
+                """
+                Captcha Publishable Key
+                """
+                captcha_publishable: String
+                """
                 The backend started in developer mode
                 """
                 is_dev: Boolean

ui/src/components/atoms/Captcha.tsx

@@ -1,17 +1,19 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha';
 import { FC, RefObject } from 'react';
-import { getCaptchaKey } from '../../utils/ConfigUtils';
+import { useConfigState } from '../../context/AppContext';
 
 type CaptchaProps = {
     captcha: RefObject<HCaptcha>;
     setCaptchaToken: (token: string) => void;
 };
 
 const Captcha: FC<CaptchaProps> = (props: CaptchaProps) => {
+    const { captchaPublishable } = useConfigState();
+
     return (
         <HCaptcha
             ref={props.captcha}
-            sitekey={getCaptchaKey()}
+            sitekey={captchaPublishable}
             onVerify={(token) => props.setCaptchaToken(token)}
         />
     );

ui/src/components/atoms/StripeCheckout.tsx

@@ -2,8 +2,7 @@ import { FC } from 'react';
 import { loadStripe } from '@stripe/stripe-js/pure';
 import { Elements, useStripe } from '@stripe/react-stripe-js';
 import { ApolloError } from '@apollo/client/errors';
-import { getStripeKey } from '../../utils/ConfigUtils';
-import { useLoggedInState } from '../../context/AppContext';
+import { useConfigState, useLoggedInState } from '../../context/AppContext';
 
 const SubscriptionStripe: FC<{ session: string }> = (props: { session: string }) => {
     const { templateInteractions } = useLoggedInState();
@@ -29,8 +28,9 @@ const SubscriptionStripe: FC<{ session: string }> = (props: { session: string })
 
 const StripeCheckout: FC<{ session: string }> = (props: { session: string }) => {
     const { session } = props;
+    const { stripePublishable } = useConfigState();
 
-    const stripePromise = loadStripe(getStripeKey());
+    const stripePromise = loadStripe(stripePublishable);
     return (
         <Elements stripe={stripePromise}>
             <SubscriptionStripe session={session} />

ui/src/context/ConfigState.ts

@@ -9,6 +9,8 @@ export type ConfigState = {
     useGithubSSO: boolean;
     useTwoFactorAuth: boolean;
     isAuditEnabled: boolean;
+    stripePublishable: string;
+    captchaPublishable: string;
     isConfigured: boolean;
     isDev: boolean;
     consentPurposes: { id: number; name: string }[];
@@ -26,6 +28,8 @@ export const configInitialState = {
     isAuditEnabled: false,
     isConfigured: false,
     isDev: false,
+    stripePublishable: '',
+    captchaPublishable: '',
     consentPurposes: [],
     consentVendors: [],
     tagManagerProducts: [],
@@ -39,6 +43,8 @@ export const configStateFromData = (data?: ConfigQueryData): ConfigState => ({
     useGithubSSO: data?.config.use_github_sso ?? false,
     useTwoFactorAuth: data?.config.use_two_factor_auth ?? false,
     isAuditEnabled: data?.config.is_audit_enabled ?? false,
+    stripePublishable: data?.config.stripe_publishable ?? '',
+    captchaPublishable: data?.config.captcha_publishable ?? '',
     isConfigured: data?.config.is_configured ?? false,
     isDev: data?.config.is_dev ?? false,
     consentPurposes: data?.config.consent_purposes ?? [],

ui/src/gql/generated/ConfigQueryData.ts

@@ -83,6 +83,14 @@ export interface ConfigQueryData_config {
    * Whether the application will record an audit trail
    */
   is_audit_enabled: boolean | null;
+  /**
+   * Stripe Publishable Key
+   */
+  stripe_publishable: string | null;
+  /**
+   * Captcha Publishable Key
+   */
+  captcha_publishable: string | null;
   /**
    * A list of consent purposes
    */

ui/src/gql/generated/LoggedUser.ts

@@ -175,6 +175,14 @@ export interface LoggedUser_config {
    * Whether the application will record an audit trail
    */
   is_audit_enabled: boolean | null;
+  /**
+   * Stripe Publishable Key
+   */
+  stripe_publishable: string | null;
+  /**
+   * Captcha Publishable Key
+   */
+  captcha_publishable: string | null;
   /**
    * A list of consent purposes
    */

ui/src/gql/queries/ConfigQuery.ts

@@ -11,6 +11,8 @@ const ConfigQuery = gql`
             use_github_sso
             use_two_factor_auth
             is_audit_enabled
+            stripe_publishable
+            captcha_publishable
             consent_purposes {
                 id
                 name

ui/src/gql/queries/LoggedUserQuery.ts

@@ -35,6 +35,8 @@ const LoggedUserQuery = gql`
             use_github_sso
             use_two_factor_auth
             is_audit_enabled
+            stripe_publishable
+            captcha_publishable
             consent_purposes {
                 id
                 name