diff --git a/src/components/playing/spotify.ts b/src/components/playing/spotify.ts
new file mode 100644
index 0000000..e577545
--- /dev/null
+++ b/src/components/playing/spotify.ts
@@ -0,0 +1,3 @@
+export async function getAccessCode(userAuthCode?: string) {
+  return "Not implemented!"
+}
\ No newline at end of file
diff --git a/src/pages/_callback.astro b/src/pages/_callback.astro
new file mode 100644
index 0000000..dc7fe95
--- /dev/null
+++ b/src/pages/_callback.astro
@@ -0,0 +1,60 @@
+---
+import { SPOTIFY_CLIENT_ID, SPOTIFY_REDIRECT_URI } from "astro:env/server";
+import { getAccessCode } from "/components/playing/spotify";
+// make a 404 if accidentally left in prod
+if (import.meta.env.PROD) return Astro.redirect("/404", 404);
+
+const userAuthCode = Astro.url.searchParams.get("code") ?? undefined;
+
+const userAccessToken = await getAccessCode(userAuthCode).catch((err) => err);
+
+const href = `https://accounts.spotify.com/authorize?response_type=code&client_id=${SPOTIFY_CLIENT_ID}&scope=user-read-currently-playing&redirect_uri=${SPOTIFY_REDIRECT_URI}`;
+---
+
+<p>
+  This endpoint is avaliable at /callback when the _ is removed from the start
+  of the filename.
+</p>
+
+<p>This endpoint is to gain the first access token and refresh token.</p>
+
+<p>
+  Opening the endpoint with no query parameters will provide a link to authorize
+  the configured application
+</p>
+
+<p>
+  This should redirect back here where it gains an access token and shows a
+  sucess method
+</p>
+
+<p>The refresh token is automatically stored for later requests.</p>
+
+<p>
+  <a {href}>Get Authorized</a>
+</p>
+
+<p>
+  {
+    userAuthCode &&
+      (userAccessToken ? (
+        <>
+          Authenticated Successfully!
+          <code>{userAccessToken}</code>
+        </>
+      ) : (
+        <>Authentication Failed or was already used</>
+      ))
+  }
+</p>
+
+<style>
+  p,
+  code {
+    max-width: 40ch;
+  }
+
+  code {
+    word-wrap: break-word;
+  }
+</style>