vielle.dev
Personal Site
Create callback page which allows me to authorize the server for my account.
spotify.ts will handle refresh tokens etc
+3
src/components/playing/spotify.ts
+3
src/components/playing/spotify.ts
+60
src/pages/_callback.astro
+60
src/pages/_callback.astro
···
1
+
---
2
+
import { SPOTIFY_CLIENT_ID, SPOTIFY_REDIRECT_URI } from "astro:env/server";
3
+
import { getAccessCode } from "/components/playing/spotify";
4
+
// make a 404 if accidentally left in prod
5
+
if (import.meta.env.PROD) return Astro.redirect("/404", 404);
6
+
7
+
const userAuthCode = Astro.url.searchParams.get("code") ?? undefined;
8
+
9
+
const userAccessToken = await getAccessCode(userAuthCode).catch((err) => err);
10
+
11
+
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}`;
12
+
---
13
+
14
+
<p>
15
+
This endpoint is avaliable at /callback when the _ is removed from the start
16
+
of the filename.
17
+
</p>
18
+
19
+
<p>This endpoint is to gain the first access token and refresh token.</p>
20
+
21
+
<p>
22
+
Opening the endpoint with no query parameters will provide a link to authorize
23
+
the configured application
24
+
</p>
25
+
26
+
<p>
27
+
This should redirect back here where it gains an access token and shows a
28
+
sucess method
29
+
</p>
30
+
31
+
<p>The refresh token is automatically stored for later requests.</p>
32
+
33
+
<p>
34
+
<a {href}>Get Authorized</a>
35
+
</p>
36
+
37
+
<p>
38
+
{
39
+
userAuthCode &&
40
+
(userAccessToken ? (
41
+
<>
42
+
Authenticated Successfully!
43
+
<code>{userAccessToken}</code>
44
+
</>
45
+
) : (
46
+
<>Authentication Failed or was already used</>
47
+
))
48
+
}
49
+
</p>
50
+
51
+
<style>
52
+
p,
53
+
code {
54
+
max-width: 40ch;
55
+
}
56
+
57
+
code {
58
+
word-wrap: break-word;
59
+
}
60
+
</style>