outloudvi/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OAuth | Spotify</title>
</head>

<body>
    <h1>Local OAuth for Spotify</h1>
    <button id="btn">Authorize</button>
    <script type="module">
        // Setup your client_id and client_secret!
        // https://developer.spotify.com
        const clientId = "TODO"
        const clientSecret = "TODO"
        const redirectUri = "http://localhost:8080"

        // if the code is available...
        const currentUrl = new URL(document.location)
        if (currentUrl.searchParams.get('code')) {
            // we have the code!
            const code = currentUrl.searchParams.get('code')
            const state = currentUrl.searchParams.get('state')
            if (localStorage.getItem("state") !== state) {
                console.warn("State does not match! Your authorization might be outdated or tampered.")
            }
            const body = [
                ["code", code],
                ["redirect_uri", redirectUri],
                ["grant_type", "authorization_code"]
            ].map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
                .join("&")
            fetch("https://accounts.spotify.com/api/token", {
                body,
                headers: {
                    "Authorization": `Basic ${btoa(`${clientId}:${clientSecret}`)}`,
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                method: "POST"
            }).then(x => x.json()).then(
                x => {
                    console.log(x)
                    if (x.error) {
                        alert(`Error: ${x.error}\nRemove "code=" from the URL and retry.`)
                        return
                    }
                    console.log("Your (temporary) access_token:", x.access_token)
                    console.log("Your refresh_token:", x.refresh_token)
                    alert(`Authorization done! Check the console to see the details.\nYour refresh_token is: ${x.refresh_token}`)
                }
            )
        }

        // if the code is not available..
        document.querySelector("#btn").addEventListener("click", (e) => {
            // random string
            const state = String(Math.random()) + String(Math.random())
            localStorage.setItem("state", state)

            // user-top-read: needed for Top Tracks
            // user-library-read: needed for Saved Tracks
            const scope = "user-top-read user-library-read"

            const url = new URL("https://accounts.spotify.com/authorize")
            for (const [key, value] of [
                ["response_type", "code"],
                ["client_id", clientId],
                ["scope", scope],
                ["redirect_uri", redirectUri],
                ["state", state]
            ]) {
                url.searchParams.set(key, value)
            }
            document.location = String(url)
        })
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>OAuth \| Spotify</title>
	</head>

	<body>
	<h1>Local OAuth for Spotify</h1>
	<button id="btn">Authorize</button>
	<script type="module">
	// Setup your client_id and client_secret!
	// https://developer.spotify.com
	const clientId = "TODO"
	const clientSecret = "TODO"
	const redirectUri = "http://localhost:8080"

	// if the code is available...
	const currentUrl = new URL(document.location)
	if (currentUrl.searchParams.get('code')) {
	// we have the code!
	const code = currentUrl.searchParams.get('code')
	const state = currentUrl.searchParams.get('state')
	if (localStorage.getItem("state") !== state) {
	console.warn("State does not match! Your authorization might be outdated or tampered.")
	}
	const body = [
	["code", code],
	["redirect_uri", redirectUri],
	["grant_type", "authorization_code"]
	].map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
	.join("&")
	fetch("https://accounts.spotify.com/api/token", {
	body,
	headers: {
	"Authorization": `Basic ${btoa(`${clientId}:${clientSecret}`)}`,
	"Content-Type": "application/x-www-form-urlencoded"
	},
	method: "POST"
	}).then(x => x.json()).then(
	x => {
	console.log(x)
	if (x.error) {
	alert(`Error: ${x.error}\nRemove "code=" from the URL and retry.`)
	return
	}
	console.log("Your (temporary) access_token:", x.access_token)
	console.log("Your refresh_token:", x.refresh_token)
	alert(`Authorization done! Check the console to see the details.\nYour refresh_token is: ${x.refresh_token}`)
	}
	)
	}

	// if the code is not available..
	document.querySelector("#btn").addEventListener("click", (e) => {
	// random string
	const state = String(Math.random()) + String(Math.random())
	localStorage.setItem("state", state)

	// user-top-read: needed for Top Tracks
	// user-library-read: needed for Saved Tracks
	const scope = "user-top-read user-library-read"

	const url = new URL("https://accounts.spotify.com/authorize")
	for (const [key, value] of [
	["response_type", "code"],
	["client_id", clientId],
	["scope", scope],
	["redirect_uri", redirectUri],
	["state", state]
	]) {
	url.searchParams.set(key, value)
	}
	document.location = String(url)
	})
	</script>
	</body>

	</html>