Skip to content

Using Pop Up Window For Authentication with SDK? #30

@sspenst

Description

@sspenst

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions