diff --git a/app/package.json b/app/package.json
index 4659d25..1b77a56 100644
--- a/app/package.json
+++ b/app/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@fontsource/fira-mono": "^4.3.0",
     "@fontsource/inter": "^4.3.0",
+    "clipboard": "^2.0.8",
     "clsx": "^1.1.1",
     "prismjs": "^1.23.0",
     "sk-auth": "file:../"
diff --git a/app/src/global.d.ts b/app/src/global.d.ts
index 36173c0..6381d5e 100644
--- a/app/src/global.d.ts
+++ b/app/src/global.d.ts
@@ -11,7 +11,7 @@ interface ImportMetaEnv {
   VITE_TWITTER_API_SECRET: string;
   VITE_REDDIT_API_KEY: string;
   VITE_REDDIT_API_SECRET: string;
-  VITE_SPOTIFY_API_KEY: string;
-  VITE_SPOTIFY_API_SECRET: string;
+  VITE_SPOTIFY_CLIENT_ID: string;
+  VITE_SPOTIFY_CLIENT_SECRET: string;
   VITE_JWT_SECRET_KEY: string;
 }
diff --git a/app/src/lib/appAuth.ts b/app/src/lib/appAuth.ts
index d9397b9..74d1664 100644
--- a/app/src/lib/appAuth.ts
+++ b/app/src/lib/appAuth.ts
@@ -47,8 +47,8 @@ export const appAuth = new SvelteKitAuth({
       },
     }),
     new SpotifyOAuth2Provider({
-      apiKey: import.meta.env.VITE_SPOTIFY_API_KEY,
-      apiSecret: import.meta.env.VITE_SPOTIFY_API_SECRET,
+      clientId: import.meta.env.VITE_SPOTIFY_CLIENT_ID,
+      clientSecret: import.meta.env.VITE_SPOTIFY_CLIENT_SECRET,
       profile(profile) {
         return { ...profile, provider: "spotify" };
       },
diff --git a/app/src/routes/login.svelte b/app/src/routes/login.svelte
index df5cf77..0e34452 100644
--- a/app/src/routes/login.svelte
+++ b/app/src/routes/login.svelte
@@ -180,6 +180,62 @@
       <span>Sign in with Reddit</span>
     </a>
 
+    <a
+      href="/api/auth/signin/spotify"
+      class={clsx(
+        "text-sm",
+        "md:text-base",
+        "inline-flex",
+        "space-x-4",
+        "py-2",
+        "px-4",
+        "border-gray-400",
+        "rounded",
+        "hover:no-underline",
+        "border",
+        "hover:bg-gray-100",
+        "transition-colors",
+        "items-center",
+      )}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+        viewBox="0 0 168 168"
+        class={clsx("h-4", "w-4", "md:h-6", "md:w-6")}
+      >
+        <path
+          fill="#1ED760"
+          d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z"
+        />
+      </svg>
+      <!-- <svg viewBox="0 0 128 128" class={clsx("h-4", "w-4", "md:h-6", "md:w-6")}>
+        <g id="original">
+          <path
+            fill="#fff"
+            d="M44.59,4.21a63.28,63.28,0,0,0,4.33,120.9,67.6,67.6,0,0,0,32.36.35A57.13,57.13,0,0,0,107.18,112a57.44,57.44,0,0,0,16-26.26,74.33,74.33,0,0,0,1.61-33.58H65.27c0,8.23,0,16.46,0,24.69H99.74A29.72,29.72,0,0,1,87.08,96.37a36.16,36.16,0,0,1-13.93,5.5,41.29,41.29,0,0,1-15.1,0A37.16,37.16,0,0,1,44,95.74a39.3,39.3,0,0,1-14.5-19.42,38.31,38.31,0,0,1,0-24.63,39.25,39.25,0,0,1,9.18-14.91A37.17,37.17,0,0,1,76.13,27a34.28,34.28,0,0,1,13.64,8q5.83-5.8,11.64-11.63c2-2.09,4.18-4.08,6.15-6.22A61.22,61.22,0,0,0,87.2,4.59,64,64,0,0,0,44.59,4.21Z"
+          />
+          <path
+            fill="#e33629"
+            d="M44.59,4.21a64,64,0,0,1,42.61.37A61.22,61.22,0,0,1,107.55,17.2c-2,2.14-4.11,4.14-6.15,6.22Q95.58,29.23,89.77,35a34.28,34.28,0,0,0-13.64-8,37.17,37.17,0,0,0-37.46,9.74,39.25,39.25,0,0,0-9.18,14.91L8.76,35.6A63.53,63.53,0,0,1,44.59,4.21Z"
+          />
+          <path
+            fill="#f8bd00"
+            d="M3.26,51.5a62.93,62.93,0,0,1,5.5-15.9L29.49,51.69a38.31,38.31,0,0,0,0,24.63q-10.36,8-20.73,16.08A63.33,63.33,0,0,1,3.26,51.5Z"
+          />
+          <path
+            fill="#587dbd"
+            d="M65.27,52.15h59.52a74.33,74.33,0,0,1-1.61,33.58,57.44,57.44,0,0,1-16,26.26c-6.69-5.22-13.41-10.4-20.1-15.62A29.72,29.72,0,0,0,99.74,76.83H65.27C65.26,68.61,65.27,60.38,65.27,52.15Z"
+          />
+          <path
+            fill="#319f43"
+            d="M8.75,92.4q10.37-8,20.73-16.08A39.3,39.3,0,0,0,44,95.74a37.16,37.16,0,0,0,14.08,6.08,41.29,41.29,0,0,0,15.1,0,36.16,36.16,0,0,0,13.93-5.5c6.69,5.22,13.41,10.4,20.1,15.62a57.13,57.13,0,0,1-25.9,13.47,67.6,67.6,0,0,1-32.36-.35,63,63,0,0,1-23-11.59A63.73,63.73,0,0,1,8.75,92.4Z"
+          />
+        </g>
+      </svg> -->
+      <span>Sign in with Spotify</span>
+    </a>
+
     <p class={clsx("text-gray-600", "text-center", "border-gray-400", "border-b", "pb-2")}>
       Coming soon.
     </p>
diff --git a/app/src/routes/profile.svelte b/app/src/routes/profile.svelte
index 9b61cbc..44fa861 100644
--- a/app/src/routes/profile.svelte
+++ b/app/src/routes/profile.svelte
@@ -201,6 +201,47 @@
         {/if}
       </div>
     </div>
+    <div class={clsx("flex", "items-center", "space-x-4")}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+        viewBox="0 0 168 168"
+        class={clsx("h-4", "w-4", "md:h-6", "md:w-6")}
+      >
+        <path
+          fill="#1ED760"
+          d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z"
+        />
+      </svg>
+      <div class={clsx("flex", "flex-col", "items-start", "space-y-1")}>
+        {#if $session.user.connections.spotify}
+          <p class={clsx("font-bold")}>Signed in as:</p>
+
+          {$session.user.connections.spotify.display_name}
+        {:else}
+          <p class={clsx("font-bold")}>Not signed in</p>
+          <div
+            class={clsx(
+              "text-xs",
+              "md:text-sm",
+              "py-1",
+              "px-2",
+              "border-gray-400",
+              "rounded",
+              "hover:no-underline",
+              "border",
+              "hover:bg-gray-100",
+              "transition-colors",
+              "items-center",
+              "cursor-not-allowed",
+              "inline-block",
+            )}
+          >
+            Connect
+          </div>
+        {/if}
+      </div>
+    </div>    
   </div>
 
   <p class={clsx("text-lg", "mb-2")}>Session</p>
diff --git a/app/yarn.lock b/app/yarn.lock
index dfa041d..a942399 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -1467,7 +1467,7 @@ chokidar@^3.5.1:
   optionalDependencies:
     fsevents "~2.3.1"
 
-clipboard@^2.0.0:
+clipboard@^2.0.0, clipboard@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
   integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
@@ -3441,12 +3441,6 @@ simple-swizzle@^0.2.2:
     cookie "^0.4.1"
     jsonwebtoken "^8.5.1"
 
-"sk-auth@file:../":
-  version "0.3.7"
-  dependencies:
-    cookie "^0.4.1"
-    jsonwebtoken "^8.5.1"
-
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
diff --git a/src/providers/spotify.ts b/src/providers/spotify.ts
index 972e3a9..bc94359 100644
--- a/src/providers/spotify.ts
+++ b/src/providers/spotify.ts
@@ -43,6 +43,7 @@ const defaultConfig: Partial<SpotifyOAuth2ProviderConfig> = {
   accessTokenUrl: "https://accounts.spotify.com/api/token",
   authorizationUrl: "https://accounts.spotify.com/authorize",
   profileUrl: "https://api.spotify.com/v1/me",
+  contentType: "application/x-www-form-urlencoded",
 };
 
 export class SpotifyOAuth2Provider extends OAuth2Provider<