feat: only show auth providers if they're enabled

backend/routes/auth/routes.go

@@ -144,9 +144,9 @@ type oauthURLsRequest struct {
 }
 
 type oauthURLsResponse struct {
-	Discord string `json:"discord"`
-	Tumblr  string `json:"tumblr"`
-	Google  string `json:"google"`
+	Discord string `json:"discord,omitempty"`
+	Tumblr  string `json:"tumblr,omitempty"`
+	Google  string `json:"google,omitempty"`
 }
 
 func (s *Server) oauthURLs(w http.ResponseWriter, r *http.Request) error {
@@ -162,22 +162,25 @@ func (s *Server) oauthURLs(w http.ResponseWriter, r *http.Request) error {
 	if err != nil {
 		return errors.Wrap(err, "setting CSRF state")
 	}
+	var resp oauthURLsResponse
 
-	// copy Discord config and set redirect url
+	if discordOAuthConfig.ClientID != "" {
 		discordCfg := discordOAuthConfig
 		discordCfg.RedirectURL = req.CallbackDomain + "/auth/login/discord"
-	// copy tumblr config
+		resp.Discord = discordCfg.AuthCodeURL(state) + "&prompt=none"
+	}
+	if tumblrOAuthConfig.ClientID != "" {
 		tumblrCfg := tumblrOAuthConfig
 		tumblrCfg.RedirectURL = req.CallbackDomain + "/auth/login/tumblr"
-	// copy google config
+		resp.Tumblr = tumblrCfg.AuthCodeURL(state)
+	}
+	if googleOAuthConfig.ClientID != "" {
 		googleCfg := googleOAuthConfig
 		googleCfg.RedirectURL = req.CallbackDomain + "/auth/login/google"
+		resp.Google = googleCfg.AuthCodeURL(state)
+	}
 
-	render.JSON(w, r, oauthURLsResponse{
-		Discord: discordCfg.AuthCodeURL(state) + "&prompt=none",
-		Tumblr:  tumblrCfg.AuthCodeURL(state),
-		Google:  googleCfg.AuthCodeURL(state),
-	})
+	render.JSON(w, r, resp)
 	return nil
 }
 

frontend/src/lib/api/responses.ts

@@ -14,9 +14,9 @@ export interface MetaResponse {
 }
 
 export interface UrlsResponse {
-  discord: string;
-  tumblr: string;
-  google: string;
+  discord?: string;
+  tumblr?: string;
+  google?: string;
 }
 
 export interface ExportResponse {

frontend/src/routes/auth/login/+page.svelte

@@ -60,9 +60,15 @@
     <div class="col-md-4 mb-1">
       <ListGroup>
         <ListGroupItem tag="button" on:click={toggleModal}>Log in with the Fediverse</ListGroupItem>
+        {#if data.discord}
           <ListGroupItem tag="a" href={data.discord}>Log in with Discord</ListGroupItem>
+        {/if}
+        {#if data.tumblr}
           <ListGroupItem tag="a" href={data.tumblr}>Log in with Tumblr</ListGroupItem>
+        {/if}
+        {#if data.google}
           <ListGroupItem tag="a" href={data.google}>Log in with Google</ListGroupItem>
+        {/if}
       </ListGroup>
       <Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
         <ModalBody>

frontend/src/routes/settings/auth/+page.svelte

@@ -132,6 +132,7 @@
         </CardBody>
       </Card>
     </div>
+    {#if data.user.discord || data.urls.discord}
       <div class="my-2">
         <Card>
           <CardBody>
@@ -148,12 +149,14 @@
               <Button color="danger" disabled={!canUnlink} on:click={toggleDiscordUnlinkModal}
                 >Unlink account</Button
               >
-          {:else}
+            {:else if data.urls.discord}
               <Button color="secondary" href={data.urls.discord}>Link account</Button>
             {/if}
           </CardBody>
         </Card>
       </div>
+    {/if}
+    {#if data.user.tumblr || data.urls.tumblr}
       <div class="my-2">
         <Card>
           <CardBody>
@@ -170,12 +173,14 @@
               <Button color="danger" disabled={!canUnlink} on:click={toggleTumblrUnlinkModal}
                 >Unlink account</Button
               >
-          {:else}
+            {:else if data.urls.tumblr}
               <Button color="secondary" href={data.urls.tumblr}>Link account</Button>
             {/if}
           </CardBody>
         </Card>
       </div>
+    {/if}
+    {#if data.user.google || data.urls.google}
       <div class="my-2">
         <Card>
           <CardBody>
@@ -192,12 +197,13 @@
               <Button color="danger" disabled={!canUnlink} on:click={toggleGoogleUnlinkModal}
                 >Unlink account</Button
               >
-          {:else}
+            {:else if data.urls.google}
               <Button color="secondary" href={data.urls.google}>Link account</Button>
             {/if}
           </CardBody>
         </Card>
       </div>
+    {/if}
     <Modal header="Pick an instance" isOpen={fediLinkModalOpen} toggle={toggleFediLinkModal}>
       <ModalBody>
         <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />