Using Pop Up Window For Authentication with SDK?

[oogunjob]

Per title, I was wondering if any knows of a way to handle authentication with a pop up window rather than opening the log in page on the web app?

Essentially for the user experience:

1. I want the user to select the login button
2. A pop up window for logging in opens
3. The sdk is authenticated
4. A variable is set to indicate the user is logged in using the sdk.authenticate() response,
5. The pop up window closes
6. The site displays that the user is logged in.

I found a way to do it using code found here, but the problem with this is that I lose access to performing functions with the sdk because I can't directly set the access token on the object.

const authEndpoint = 'https://accounts.spotify.com/authorize';
const scopes = ['user-read-private', 'user-read-email']; // Add more scopes as needed

const authUrl = `${authEndpoint}?client_id=${process.env.NEXT_PUBLIC_CLIENT_ID ?? ""}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI ?? ""}&scope=${scopes.join(
    '%20'
)}&response_type=token&show_dialog=true`;

const width = 450;
const height = 730;
const left = window.innerWidth / 2 - width / 2;
const top = window.innerHeight / 2 - height / 2;

window.open(authUrl, 'Spotify Login', `width=${width},height=${height},left=${left},top=${top}`);

I've seen this done on other websites, but I find it much easier to continue building with the sdk. If anyone has been able to figure it out or it needs to be added to the repo, please share! :)

[athulanilthomas]

Hi @oogunjob, Have you considered implementing your own authentication strategy? Doing so will allow you to meet your specific needs. If you examine the source, you’ll notice extensibility for creating your custom authentication strategy. The key requirement is that it should extend the IAuthStrategy interface.