feat: add extra api header for hosted apps (#448)

* feat: add extra api header for hosted apps * chore: add api URL in developer settings
getAlby · Aug 12, 2024 · d9a01d9 · d9a01d9
1 parent 6fcbaf1
commit d9a01d9
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/alby/models.go b/alby/models.go
@@ -48,6 +48,7 @@ type AutoChannelResponse struct {
 
 type AlbyMeHub struct {
 	LatestVersion string `json:"latest_version"`
+	Name          string `json:"name"`
 }
 type AlbyMe struct {
 	Identifier       string    `json:"identifier"`

diff --git a/frontend/src/screens/settings/DeveloperSettings.tsx b/frontend/src/screens/settings/DeveloperSettings.tsx
@@ -6,11 +6,13 @@ import { Input } from "src/components/ui/input";
 import { Label } from "src/components/ui/label";
 import { LoadingButton } from "src/components/ui/loading-button";
 import { useToast } from "src/components/ui/use-toast";
+import { useAlbyMe } from "src/hooks/useAlbyMe";
 import { copyToClipboard } from "src/lib/clipboard";
 import { AuthTokenResponse } from "src/types";
 import { request } from "src/utils/request";
 
 export default function DeveloperSettings() {
+  const { data: albyMe } = useAlbyMe();
   const [token, setToken] = React.useState<string>();
   const [expiryDays, setExpiryDays] = React.useState<string>("365");
   const [unlockPassword, setUnlockPassword] = React.useState<string>();
@@ -129,6 +131,29 @@ export default function DeveloperSettings() {
                   <Copy className="w-4 h-4" />
                 </Button>
               </div>
+              <div className="my-4 border rounded-lg p-4">
+                <p className="mb-2">
+                  To make requests from your application to{" "}
+                  <span className="font-mono font-semibold">
+                    {window.location.origin}/api
+                  </span>{" "}
+                  add the following header{albyMe?.hub.name && "s"}:
+                </p>
+                <ol>
+                  <li>
+                    <span className="font-mono font-semibold">
+                      Authorization: Bearer YOUR_TOKEN
+                    </span>{" "}
+                  </li>
+                  {albyMe?.hub.name && (
+                    <li>
+                      <span className="font-mono font-semibold">
+                        AlbyHub-Name: {albyMe.hub.name}
+                      </span>{" "}
+                    </li>
+                  )}
+                </ol>
+              </div>
               <p className="text-xs">
                 This token grants full access to your hub. Please keep it
                 secure. If you suspect that the token has been compromised,

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -319,6 +319,7 @@ export type AlbyMe = {
   shared_node: boolean;
   hub: {
     latest_version: string;
+    name?: string;
   };
 };
 

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -21,6 +21,7 @@ module.exports = {
     fontFamily: {
       // required for Chrome, where e.g. ❤️ in Inter is displayed as a black heart :(
       emoji: ["sans-serif"],
+      mono: ["monospace"],
     },
     extend: {
       colors: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -319,6 +319,7 @@ export type AlbyMe = { @@
       shared_node: boolean;
       hub: {
         latest_version: string;
+        name?: string;
       };
     };
@@ Expand Down @@