uvacoder Uvacoder

First: Create a Spotify Developer Account:

If you haven't already, sign up for a Spotify Developer account at the Spotify Developer Dashboard.

After logging into the Spotify Developer Dashboard, create a new application to obtain your client ID and client secret.

https://localhost:3000, Add it as a Redirect URI.

Create an application in the Spotify Developer Dashboard
- Click on the Edit settings button
- Set the Redirect URIs to a convenient location ^{(doesn't matter)}
- Save the given Client ID along with the Client Secret

Retrieve the access code

Visit the following URL after replacing $CLIENT_ID, $SCOPE, and $REDIRECT_URI

https://accounts.spotify.com/authorize?response_type=code&client_id=$CLIENT_ID&scope=$SCOPE&redirect_uri=$REDIRECT_URI

In this guide I will explain how to create a cloudflare worker that returns the current song you are listening to on spotify.

You may of seen my use of it on root of my site:

	//https://www.thathandsomebeardedguy.com/i'd-love-to-❤️-you-more
	var credentials = {
	clientId: 'someclientid',
	clientSecret: 'someclientsecret',
	redirectUri: 'http://localhost:8888/callback'
	};
	//npm install spotify-web-api-node --save
	var SpotifyWebApi = require('spotify-web-api-node');
	var spotifyApi = new SpotifyWebApi(credentials);
	//npm install fs

	<!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>

	/*
	Make sure to download spotify-token-index.html and rename it to public/index.html

	Before running this application, make sure to replace CLIENT_ID and CLIENT_SECRET below.
	Also, make sure to register http://localhost:8989/ and http://localhost:8989/callback/ as callbacks in your developer console.
	THE TRAILING SLASHES ARE IMPORTANT!

	Run this with:
	deno run -A spotify-token-app.js
	*/

	import NextAuth from 'next-auth/next';
	import SpotifyProvider from 'next-auth/providers/spotify';
	import type { Session } from 'next-auth';
	import { JWT } from 'next-auth/jwt';
	import axios from 'axios';

	const SPOTIFY_REFRESH_TOKEN_URL = 'https://accounts.spotify.com/api/token';
	const SPOTIFY_CLIENT_ID = process.env.SPOTIFY_CLIENT_ID!;
	const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!;

	addEventListener('fetch', event => {
	event.respondWith(handleRequest(event.request))
	})

	function makeErrorResponse(message) {
	return new Response(message, {
	status: 404,
	statusText: 'not found',
	headers: {
	'content-type': 'text/plain',

	const axios = require('axios')

	const spotifyAPIBaseUri = 'https://api.spotify.com'
	const spotifyAccountsBaseUri = 'https://accounts.spotify.com'

	const {
	SPOTIFY_CLIENT_ID, // Your Spotify OAuth Client ID
	SPOTIFY_CLIENT_SECRET, // Spotify OAuth Client Secret
	SPOTIFY_REFRESH_TOKEN, // Your personal refresh token (you have to authenticate yourself against your app once to receive this)
	} = process.env

	SPOTIFY_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxx
	SPOTIFY_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxx
	SPOTIFY_REFRESH_TOKEN=aaaaaaaaaaaaaaaa-bbbbbbbbbbbbbbbb-cccccccccccccccc-dddddddddddddddd-eeeeeeeeeeeeeeee