hide auth buttons unless configured

services/web/Dockerfile.dev

@@ -13,7 +13,6 @@ COPY . .
 
 RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --frozen-lockfile
 
-
 EXPOSE 2200
 
 CMD ["yarn", "start"]

services/web/src/components/Auth/Apple/utils.js

@@ -7,6 +7,10 @@ import { APP_URL, APPLE_SERVICE_ID } from 'utils/env';
 const SCRIPT_URL =
   'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
 
+export function canShowAppleSignin() {
+  return !!APPLE_SERVICE_ID;
+}
+
 export async function initialize() {
   await loadScript(SCRIPT_URL);
   AppleID.auth.init({

services/web/src/components/Auth/Federated.js

@@ -1,17 +1,33 @@
+import React from 'react';
+import { Divider } from 'semantic';
+
+import { canShowGoogleSignin } from 'components/Auth/Google/utils';
+import { canShowAppleSignin } from 'components/Auth/Apple/utils';
+
 import GoogleButton from './Google/SignInButton';
 import AppleButton from './Apple/SignInButton';
 
 export default function FederatedLogin(props) {
+  const showApple = canShowAppleSignin();
+  const showGoogle = canShowGoogleSignin();
+
+  if (!showApple && !showGoogle) {
+    return null;
+  }
+
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '10px',
-      }}>
-      <GoogleButton small {...props} />
-      <AppleButton small {...props} />
-    </div>
+    <React.Fragment>
+      <Divider horizontal>Or</Divider>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '10px',
+        }}>
+        {showGoogle && <GoogleButton small {...props} />}
+        {showApple && <AppleButton small {...props} />}
+      </div>
+    </React.Fragment>
   );
 }

services/web/src/components/Auth/Google/utils.js

@@ -6,6 +6,10 @@ import { request } from 'utils/api';
 
 const SCRIPT_URL = 'https://accounts.google.com/gsi/client?hl=en-US';
 
+export function canShowGoogleSignin() {
+  return !!GOOGLE_CLIENT_ID;
+}
+
 export async function initialize(callback) {
   await loadScript(SCRIPT_URL);
   google.accounts.id.initialize({

services/web/src/screens/Auth/Login/EmailOtp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Segment, Divider, Grid, Form } from 'semantic';
+import { Segment, Grid, Form } from 'semantic';
 
 import { withSession } from 'stores';
 
@@ -94,7 +94,6 @@ export default class EmailOtpLogin extends React.Component {
                 disabled={loading}
               />
             </Form>
-            <Divider horizontal>Or</Divider>
             <Federated />
           </Segment>
           <Segment secondary>

services/web/src/screens/Auth/Login/Passkey.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Segment, Divider, Grid, Form, Message } from 'semantic';
+import { Segment, Grid, Form, Message } from 'semantic';
 
 import { withSession } from 'stores';
 
@@ -111,7 +111,6 @@ export default class PasskeyLogin extends React.Component {
                 loading={loading}
                 disabled={loading}
               />
-              <Divider horizontal>Or</Divider>
               <Federated
                 onVerifyStart={this.onVerifyStart}
                 onVerifyStop={this.onVerifyStop}

services/web/src/screens/Auth/Login/Password.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Segment, Divider, Grid, Form, Message } from 'semantic';
+import { Segment, Grid, Form, Message } from 'semantic';
 
 import { withSession } from 'stores';
 
@@ -113,7 +113,6 @@ export default class PasswordLogin extends React.Component {
                 loading={loading}
                 disabled={loading}
               />
-              <Divider horizontal>Or</Divider>
               <Federated
                 onVerifyStart={this.onVerifyStart}
                 onVerifyStop={this.onVerifyStop}

services/web/src/screens/Auth/Login/PhoneOtp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Segment, Divider, Grid, Form } from 'semantic';
+import { Segment, Grid, Form } from 'semantic';
 
 import { withSession } from 'stores';
 
@@ -95,7 +95,6 @@ export default class PhoneOtpLogin extends React.Component {
                 disabled={loading}
               />
             </Form>
-            <Divider horizontal>Or</Divider>
             <Federated />
           </Segment>
           <Segment secondary>

services/web/src/screens/Auth/Signup.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Segment, Grid, Checkbox, Divider } from 'semantic';
+import { Form, Segment, Grid, Checkbox } from 'semantic';
 import { Link } from 'react-router-dom';
 
 import { withSession } from 'stores';
@@ -246,7 +246,6 @@ export default class PasswordSignup extends React.Component {
 
               {!this.isFederated() && (
                 <React.Fragment>
-                  <Divider horizontal>Or</Divider>
                   <Federated
                     onVerifyStart={this.onVerifyStart}
                     onVerifyStop={this.onVerifyStop}