Google auth buttons only if configured

ylem-co · Oct 19, 2024 · f27d308 · f27d308
1 parent 282672e
commit f27d308
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 19 deletions.
diff --git a/backend/users/api/IsExternalAuthAvailable.go b/backend/users/api/IsExternalAuthAvailable.go
@@ -0,0 +1,16 @@
+package api
+
+import (
+	"net/http"
+	"ylem_users/config"
+)
+
+func IsExternalAuthAvailable(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+
+	if config.Cfg().Google.ClientId != "" {
+		w.WriteHeader(http.StatusOK)
+	} else {
+		w.WriteHeader(http.StatusNotFound)
+	}
+}
diff --git a/backend/users/services/server/server.go b/backend/users/services/server/server.go
@@ -43,6 +43,7 @@ func (s *Server) Run(ctx context.Context) error {
 	rtr.Handle("/email/{key}/confirm", http.HandlerFunc(api.ConfirmEmail)).Methods(http.MethodPost)
 
 	rtr.Handle("/auth/{provider}", http.HandlerFunc(api.ExternalAuth)).Methods(http.MethodGet)
+	rtr.Handle("/auth/{provider}/available", http.HandlerFunc(api.IsExternalAuthAvailable)).Methods(http.MethodGet)
 	rtr.Handle("/auth/{provider}/callback", authMiddleware.IsNotAuthCheck(http.HandlerFunc(authMiddleware.ExternalAuthCallback))).Methods(http.MethodPost)
 
 	// The following endpoints are for the internal use only and should be

diff --git a/ui/src/components/login.component.js b/ui/src/components/login.component.js
@@ -30,17 +30,21 @@ class Login extends Component {
         this.onChangeEmail = this.onChangeEmail.bind(this);
         this.onChangePassword = this.onChangePassword.bind(this);
         this.handleSignInWithGoogle = this.handleSignInWithGoogle.bind(this);
+        this.handleGetSignInWithGoogleAvailability = this.handleGetSignInWithGoogleAvailability.bind(this);
 
         this.state = {
             email: "",
             password: "",
             loading: false,
+            isGoogleAuthAvailable: null,
             isDarkThemeEnabled: localStorage.getItem('darkTheme') !== "false",
         };
     }
 
     componentDidMount() {
-        document.title = 'Login'
+        document.title = 'Login';
+
+        this.handleGetSignInWithGoogleAvailability();
     };
 
     onChangeEmail(e) {
@@ -96,10 +100,26 @@ class Login extends Component {
             });
     }
 
+    handleGetSignInWithGoogleAvailability() {
+        let isAvailable = AuthService.getSignInWithGoogleAvailability()
+
+        Promise.resolve(isAvailable)
+            .then(isAvailable => {
+                this.setState({
+                    isGoogleAuthAvailable: true,
+                });
+            })
+            .catch(() => {
+                this.setState({
+                    isGoogleAuthAvailable: false,
+                });
+            });
+    }
+
     render() {
         const { isLoggedIn, user, message } = this.props;
 
-        const { isDarkThemeEnabled } = this.state;
+        const { isDarkThemeEnabled, isGoogleAuthAvailable } = this.state;
 
         if (!validatePermissions(isLoggedIn, user, PERMISSION_LOGGED_OUT)) {
             return <Navigate to="/dashboard" />
@@ -177,11 +197,14 @@ class Login extends Component {
                                                     </Button>
                                                 </Col>
                                                 <Col xs="7">
-                                                    <button className="google-sign-in-button btn-secondary btn"
-                                                            onClick={this.handleSignInWithGoogle}>
-                                                        Continue with
-                                                        <span className="google-sign-in-icon"></span>
-                                                    </button>
+                                                    { isGoogleAuthAvailable === true
+                                                        &&
+                                                        <button className="google-sign-in-button btn-secondary btn"
+                                                                onClick={this.handleSignInWithGoogle}>
+                                                            Continue with
+                                                            <span className="google-sign-in-icon"></span>
+                                                        </button>
+                                                    }
                                                 </Col>
                                             </Row>
                                             {message && (

diff --git a/ui/src/components/register.component.js b/ui/src/components/register.component.js
@@ -45,6 +45,7 @@ class Register extends Component {
         this.onChangeConfirmPassword = this.onChangeConfirmPassword.bind(this);
         this.onChangeTermsAndConditions = this.onChangeTermsAndConditions.bind(this);
         this.onChangeNewsAndUpdates = this.onChangeNewsAndUpdates.bind(this);
+        this.handleGetSignInWithGoogleAvailability = this.handleGetSignInWithGoogleAvailability.bind(this);
 
         this.state = {
             firstName: "",
@@ -59,12 +60,15 @@ class Register extends Component {
             newsAndUpdates: false,
             successful: false,
             loading: false,
+            isGoogleAuthAvailable: null,
             isDarkThemeEnabled: localStorage.getItem('darkTheme') !== "false",
         };
     }
 
     componentDidMount() {
         document.title = 'Registration'
+
+        this.handleGetSignInWithGoogleAvailability();
     };
 
     onChangeFirstName(e) {
@@ -123,6 +127,22 @@ class Register extends Component {
         confirmPasswordType: confirmPasswordType === 'text' ? 'password' : 'text'
     }));
 
+    handleGetSignInWithGoogleAvailability() {
+        let isAvailable = AuthService.getSignInWithGoogleAvailability()
+
+        Promise.resolve(isAvailable)
+            .then(isAvailable => {
+                this.setState({
+                    isGoogleAuthAvailable: true,
+                });
+            })
+            .catch(() => {
+                this.setState({
+                    isGoogleAuthAvailable: false,
+                });
+            });
+    }
+
     handleRegister = async(e) => {
         e.preventDefault();
 
@@ -196,7 +216,7 @@ class Register extends Component {
 
     render() {
         const { isLoggedIn, message, user } = this.props;
-        const { isDarkThemeEnabled } = this.state;
+        const { isDarkThemeEnabled, isGoogleAuthAvailable } = this.state;
 
         if (
             !validatePermissions(isLoggedIn, user, PERMISSION_LOGGED_OUT)
@@ -224,18 +244,21 @@ class Register extends Component {
                             <Card className="onboardingCard mb-5">
                                 <Card.Body className="p-4">
 
-                                    <div>
-                                        <button className="google-sign-up-button px-4 btn-secondary btn"
-                                                onClick={this.handleSignInWithGoogle}>
-                                            Sign up with <span className="google-sign-in-icon"></span>
-                                        </button>
-
-                                        <div className="embedded-text-horizontal-line">
-                                            <hr className="embedded-text-horizontal-line-sides"/>
-                                            <div className="embedded-text-horizontal-line-content">OR</div>
-                                            <hr className="embedded-text-horizontal-line-sides"/>
+                                    { isGoogleAuthAvailable
+                                        &&
+                                        <div>
+                                            <button className="google-sign-up-button px-4 btn-secondary btn"
+                                                    onClick={this.handleSignInWithGoogle}>
+                                                Sign up with <span className="google-sign-in-icon"></span>
+                                            </button>
+
+                                            <div className="embedded-text-horizontal-line">
+                                                <hr className="embedded-text-horizontal-line-sides"/>
+                                                <div className="embedded-text-horizontal-line-content">OR</div>
+                                                <hr className="embedded-text-horizontal-line-sides"/>
+                                            </div>
                                         </div>
-                                    </div>
+                                    }
                                     <Form
                                         onSubmit={this.handleRegister}
                                         ref={(c) => {

diff --git a/ui/src/services/auth.service.js b/ui/src/services/auth.service.js
@@ -91,6 +91,16 @@ class AuthService {
             );
     }
 
+    getSignInWithGoogleAvailability = async() => {
+        return axios
+            .get(
+                API_URL + 'auth/google/available',
+                {
+                    withCredentials: true
+                }
+            );
+    }
+
     signInWithGoogle = async(queryString) => {
         return axios
             .post(