fix: change localhost to 127.0.0.1

.env.template

@@ -3,4 +3,4 @@ INTEGRATION_TESTS_SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_for_tests
 INTEGRATION_TESTS_USER_EMAIL=some@validuser.co.uk
 INTEGRATION_TESTS_USER_PASSWORD=some-valid-password
 VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id_for_tests
-VITE_REDIRECT_TARGET=http://localhost:3000
+VITE_REDIRECT_TARGET=http://127.0.0.1:3000

CONTRIBUTING.md

@@ -31,7 +31,7 @@ npm run start
 
 To run the tests, you need to have a Spotify account.
 
-You will need to create a new app in the Spotify Developer portal, and add a redirect URI of `http://localhost:3000`.
+You will need to create a new app in the Spotify Developer portal, and add a redirect URI of `http://127.0.0.1:3000`.
 
 Add the following environment variables:
 
@@ -49,7 +49,7 @@ We support `dotenv`, so you can add these to a `.env` file in the root of the re
 To run the embedded example app, you will need to add the following environment variables:
 
 - `VITE_SPOTIFY_CLIENT_ID`=the same value as set in INTEGRATION_TESTS_SPOTIFY_CLIENT_ID
-- `VITE_REDIRECT_TARGET`=http://localhost:3000
+- `VITE_REDIRECT_TARGET`=http://127.0.0.1:3000
 
 For the example app to work, this .env file needs to be in the ./example folder.
 
@@ -72,7 +72,7 @@ We follow the [GitHub Flow Workflow](https://guides.github.com/introduction/flow
 
 To run the tests, you need to have a Spotify account.
 
-You will need to create a new app in the Spotify Developer portal, and add a redirect URI of `http://localhost:3000`.
+You will need to create a new app in the Spotify Developer portal, and add a redirect URI of `http://127.0.0.1:3000`.
 
 You will need to add the following environment variables:
 
@@ -91,7 +91,7 @@ To run the embedded example app, you will need to add the following environment
 
 ```bash
 VITE_SPOTIFY_CLIENT_ID=the same value as set in INTEGRATION_TESTS_SPOTIFY_CLIENT_ID
-VITE_REDIRECT_TARGET=http://localhost:3000
+VITE_REDIRECT_TARGET=http://127.0.0.1:3000
 ```
 
 For the example app to work, this .env file needs to be in the ./example folder.

README.md

@@ -29,7 +29,7 @@ Create a `.env` file in the example directory with your `client_id` and redirect
 
 ```bash .env
 VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id_for_tests
-VITE_REDIRECT_TARGET=http://localhost:3000
+VITE_REDIRECT_TARGET=http://127.0.0.1:3000
 ```
 
 To run the app:
@@ -46,7 +46,7 @@ Creating an instance of the SDK is easy, and can be done in a number of ways dep
 import { SpotifyApi } from '@spotify/web-api-ts-sdk';
 
 // Choose one of the following:
-const sdk = SpotifyApi.withUserAuthorization("client-id", "https://localhost:3000", ["scope1", "scope2"]);
+const sdk = SpotifyApi.withUserAuthorization("client-id", "http://127.0.0.1:3000", ["scope1", "scope2"]);
 const sdk = SpotifyApi.withClientCredentials("client-id", "secret", ["scope1", "scope2"]);
 ```
 
@@ -80,7 +80,7 @@ If you're building a browser based application, you should use Authorization Cod
 Calling any of the methods on the SDK will automatically perform any redirects/refreshes that are necessary.
 
 ```js
-const sdk = SpotifyApi.withUserAuthorization("client-id", "https://localhost:3000", ["scope1", "scope2"]);
+const sdk = SpotifyApi.withUserAuthorization("client-id", "http://127.0.0.1:3000", ["scope1", "scope2"]);
 const user = await sdk.currentUser.profile()
 ```
 
@@ -104,9 +104,9 @@ Setup:
 
 *Client Side*
 ```js
-SpotifyApi.performUserAuthorization("client-id", "https://localhost:3000", ["scope1", "scope2"], "https://your-backend-server.com/accept-user-token");
+SpotifyApi.performUserAuthorization("client-id", "http://127.0.0.1:3000", ["scope1", "scope2"], "https://your-backend-server.com/accept-user-token");
 // Alternatively if you want to perform your own custom post-back
-SpotifyApi.performUserAuthorization("client-id", "https://localhost:3000", ["scope1", "scope2"], (accessToken) => { /* do postback here */ });
+SpotifyApi.performUserAuthorization("client-id", "http://127.0.0.1:3000", ["scope1", "scope2"], (accessToken) => { /* do postback here */ });
 ```
 
 These functions will work as usual, triggering a client side redirect to grant permissions, along with verifying the response and performing token exchange.
@@ -290,7 +290,7 @@ We provide a default browser (localStorage) caching strategy and (TODO) a node i
 
 To run the tests, you need to have a Spotify account.
 
-You will need to create a new app in the Spotify Developer portal, and add a redirect URI of `http://localhost:3000`.
+You will need to create a new app in the Spotify Developer portal, and add a redirect URI of `http://127.0.0.1:3000`.
 
 You will need to add the following environment variables:
 
@@ -308,6 +308,6 @@ We support `dotenv`, so you can add these to a `.env` file in the root of the re
 To run the embedded example app, you will need to add the following environment variables:
 
 - `VITE_SPOTIFY_CLIENT_ID`=the same value as set in INTEGRATION_TESTS_SPOTIFY_CLIENT_ID
-- `VITE_REDIRECT_TARGET`=http://localhost:3000
+- `VITE_REDIRECT_TARGET`=http://127.0.0.1:3000
 
 For the example app to work, this .env file needs to be in the ./example folder.

example/.env.template

@@ -1,2 +1,2 @@
 VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id_for_tests
-VITE_REDIRECT_TARGET=http://localhost:3000
+VITE_REDIRECT_TARGET=http://127.0.0.1:3000

example_react/.env.template

@@ -1,2 +1,2 @@
 VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id_for_tests
-VITE_REDIRECT_TARGET=http://localhost:3000
+VITE_REDIRECT_TARGET=http://127.0.0.1:3000

example_react/vite.config.ts

@@ -7,6 +7,6 @@ export default defineConfig({
   server: {
     port: 3000,
     strictPort: true,
-    host: true,
+    host: '127.0.0.1',
   },
 })

src/SpotifyApi.test.ts

@@ -71,7 +71,7 @@ describe("SpotifyAPI Instance", () => {
         });
 
         it("can create an instance with the authorization code strategy configured", async () => {
-            const sut = SpotifyApi.withUserAuthorization("client-id", "https://localhost:3000", ["scope1", "scope2"]);
+            const sut = SpotifyApi.withUserAuthorization("client-id", "http://127.0.0.1:3000", ["scope1", "scope2"]);
             expect(sut["authenticationStrategy"].constructor.name).toBe(AuthorizationCodeWithPKCEStrategy.name);
         });
 

src/test/AuthAsRealUserForTests.ts

@@ -14,7 +14,7 @@ export default class AuthAsSpecificUserForTests extends AuthorizationCodeWithPKC
         private email: string,
         private password: string
     ) {
-        super(clientId, "http://localhost:3000", scopes);
+        super(clientId, "http://127.0.0.1:3000", scopes);
         this.cacheKey = `test-user-${email}`;
     }
 
@@ -66,7 +66,7 @@ export default class AuthAsSpecificUserForTests extends AuthorizationCodeWithPKC
             await page.waitForRequest(r => {
                 const url = r.url();
                 capturedUrl = url;
-                return url.includes("http://localhost:3000");
+                return url.includes("http://127.0.0.1:3000");
             });
         } catch (e) {
             console.log(capturedUrl, e);

vite.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   server: {
     port: 3000,
     strictPort: true,
-    host: true,
+    host: '127.0.0.1',
   },
   plugins: [],
   test: {