title: Storing access token from a redirect url by an external api
body: <p>I am using Spotify web api to make a web app using angular.</p>
  
  <p>While I am able to authenticate the user and get playlists/tracks and even create playlists etc.., I am stuck on how to get access_token from redirect_url after user agrees with the scopes of my app.</p>
  
  <p>Currently i am able to do the above by using the below code ...but it is a really bad and inefficient way.</p>
  
  <p>Service.ts : </p>
  
  <pre><code>  // ASK USER TO GRANT PERMISSION FOR THE FOLLOWING SCOPES
    Login(showDialog = true) {
      const state = uuid();
      localStorage.setItem('xsrf-token', state);
      const params = {
        response_type: 'token',
        client_id: "ec540590bb6449a181edhjdjsdjkdshasbdjk",
        redirect_uri: "http://localhost:4200/selectionMenu",
        scope:
          'user-top-read%20user-read-private%20playlist-read-private%20user-library-modify%20playlist-modify-public%20user-follow-read%20user-read-playback-state%20user-modify-playback-state%20user-read-recently-played%20user-read-currently-playing%20user-follow-modify%20playlist-modify-private%20playlist-read-collaborative%20user-library-read%20user-read-email',
        state,
        show_dialog: `${showDialog}`
      }
      const redirectUrl = `https://accounts.spotify.com/authorize?${qs.stringify(params)}`;
      window.location.href = redirectUrl;
    }
  </code></pre>
  
  <p>After this i am able to show the below screen:</p>
  
  <p><a href="https://i.stack.imgur.com/sp6on.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sp6on.png" alt="enter image description here"></a></p>
  
  <p>After user activity [if he clicks on agree] spotify service will redirect to the following url:
  <code>http://localhost:4200/selectionMenu</code>
  but will append the access_token to the above url, so the final url to which my page will redirect to is as below:
  <code>http://localhost:4200/selectionMenu#access_token=BQASUoH7jashdjakshdashvday63hvsjadjhqBEWmVi9bKNg7EBF7Dt2dCvSNWLlQ3zUOp6hGuLfvJ9QH4PXRLTz4AajPDyBW7SV9lXhFb_IF25qb7hheUsvyg7pX-zD-TsOtbRCb7ohF86wrjWGFRXuugT-mnWESBMCRVSxTi34nOcG4VpvM-Ew9F0kl1vq5zdsSRSnCvZwmsQNGngDVpj2rsS2nQG0EIXdqTmSut0CdZFFobz5k9ojpbw971ye5dl1cXnHlc&amp;token_type=Bearer&amp;expires_in=3600&amp;state=59418612-e4cb-46bb-90af-d01f7a2c790a</code></p>
  
  <p>Screen looks as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/qVtLg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qVtLg.png" alt="enter image description here"></a></p>
  
  <p>To extract the access_token from the above url i am currently doing the following:</p>
  
  <p>In Component.ts:</p>
  
  <pre><code>currentWindowUrl() {
      const pathname = new URL(window.location.href).pathname;
      const redirectURL = window.location.href.split('#');
      usableURL = redirectURL[1].split('&amp;');
      this.getTokens();
    }
  
    getTokens() {
      const accessToken = usableURL[0].split('=')[1];
      const tokenType = usableURL[1].split('=')[1];
      const refreshTime = usableURL[2].split('=')[1];
      const state = usableURL[3].split('=')[1];
      // pass accessToken to service and store it.
      this.spotifyAuthorizeService.saveAccessToken(accessToken);
    }
  </code></pre>
  
  <p>I am basically using window.location.href and splitting it till I get access_token, which sound and is pretty lame.</p>
  
  <p><strong>My Questions</strong></p>
  
  <p>-> How do I get the access token appended to  redirect_url  by Spotify, In a better way and maybe store it in localStorage[Not good for xhr attacks] , Any other better way in which I can store it so that I can use it for every other page in my app and also refresh it after every 60 min [token expiry time].</p>
  
  <p>-> Is there a way to not show the part after # in the url which is the access_token, so that I don't give it away.</p>
  
  <p><strong>Angular-Auth-OIDC</strong></p>
  
  <p>I have followed the documentation and came up with following configuration :</p>
  
  <p>assets/auth.clientConfiguration.json:</p>
  
  <pre><code>{
      "stsServer": "https://accounts.spotify.com/authorize",
      "redirect_url": "http://localhost:4200/selectionMenu",
      "client_id": "ec5405hgasfdhasfdashdgdcbd27987aef6",
      "response_type": "token",
      "scope": "user-top-read%20user-read-private%20playlist-read-private%20user-library-modify%20playlist-modify-public%20user-follow-read%20user-read-playback-state%20user-modify-playback-state%20user-read-recently-played%20user-read-currently-playing%20user-follow-modify%20playlist-modify-private%20playlist-read-collaborative%20user-library-read%20user-read-email",
      "post_logout_redirect_uri": "https://localhost:4200/",
      "start_checksession": true,
      "silent_renew": true,
      "silent_renew_url": "https://accounts.spotify.com/authorize",
      "post_login_route": "/selectionMenu",
      "forbidden_route": "/forbidden",
      "unauthorized_route": "/unauthorized",
      "log_console_warning_active": true,
      "log_console_debug_active": true,
      "max_id_token_iat_offset_allowed_in_seconds": 10
  }
  </code></pre>
  
  <p>And i ng serve the app following error pops up:</p>
  
  <p><a href="https://i.stack.imgur.com/sSXCI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sSXCI.png" alt="enter image description here"></a></p>
  
  <p>And when i click login, app redirects to below url:
  <code>https://accounts.spotify.com/authorize/.well-known/openid-configuration</code></p>
  
  <p>And ends up with a 405 error.</p>
  
  <p><strong>MY UNDERSTANDING</strong></p>
  
  <p>I know the url is wrongly configured, i am not sure what url to specify in stsServer, I guess it's spotify's url cause it provides the token service but i am not sure if the url i configured in the json file is correct.</p>
  
  <p>Any insight in this would be helpful.</p>
  
  <p>Thank you!</p>