title: Angular 2: Azure AD login redirect URI
body: <p>I'm working on using Azure AD to login into an Angular 2 app. The following Github link shows an easy way to login without using any auth libraries.</p>
  
  <p><a href="https://github.com/microsoftgraph/angular2-connect-rest-sample://" rel="nofollow noreferrer">Log in via Microsoft Graph using Typescript and Angular 2</a></p>
  
  <p>It works well, however, in the example, it redirects right back to the main screen where the login process was initiated from. I'm trying to figure out how to redirect back to a different localhost view, but for some reason I cannot get it to work.</p>
  
  <p>I can get a redirect to <a href="https://www.google.com" rel="nofollow noreferrer">https://www.google.com</a> to work. You can do this by altering the code found in /src/authHelper/authHelper.ts to use your redirect URL of choice, instead of reverting back to window.location.href:</p>
  
  <pre><code>    login() {
      //redirect to get id_token
      window.location.href = "https://login.microsoftonline.com/" + SvcConsts.TENTANT_ID + 
          "/oauth2/authorize?response_type=id_token&amp;client_id=" + SvcConsts.CLIENT_ID + 
          "&amp;redirect_uri=" + encodeURIComponent('HTTPS://WWW.GOOGLE.COM') + 
          "&amp;state=SomeState&amp;nonce=SomeNonce";
  }
  </code></pre>
  
  <p>This also requires you to set the Reply URL in your Azure Active Directory to <a href="https://www.google.com" rel="nofollow noreferrer">https://www.google.com</a>. This can be found at by selecting your Azure AD, then clicking the application under that AD, and then setting the Reply URL under the Configure tab on the old Azure portal.</p>
  
  <p>--HOWEVER--</p>
  
  <p>I cannot get this to work for a plain ol' made-from-scratch view. Every time I try to replace <a href="https://www.google.com" rel="nofollow noreferrer">https://www.google.com</a> with something like <a href="https://localhost:8080/redirect" rel="nofollow noreferrer">https://localhost:8080/redirect</a> or something, I get an error in the browser saying "ERR_CONNECTION_CLOSED" or something along those lines.</p>
  
  <p>Right now I have this in Azure AD as the Reply URL for my web app:</p>
  
  <p><a href="https://i.stack.imgur.com/DtLAk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DtLAk.png" alt="enter image description here"></a></p>
  
  <p>My updated login code (I am using the SvcConsts locally, referenced with this.):</p>
  
  <pre><code>    login() {
      console.log("Logging in!");
  
      //redirect to get id_token
      window.location.href = "https://login.microsoftonline.com/" + this.TENTANT_ID + 
          "/oauth2/authorize?response_type=id_token&amp;client_id=" + this.CLIENT_ID + 
          "&amp;redirect_uri=" + encodeURIComponent('https://localhost:8080/#/redirect') + 
          "&amp;state=SomeState&amp;nonce=SomeNonce";
  }
  </code></pre>
  
  <p>...and a router/routes configured in my app.component.ts file:</p>
  
  <pre><code>import { Component, ChangeDetectionStrategy } from '@angular/core';
  import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
  import { Store } from '@ngrx/store';
  import { Observable } from 'rxjs/Observable';
  import { AuthenticationComponent } from '../authentication/authentication.component';
  import { AuthRedirectComponent } from '../authRedirect/authRedirect.component';
  import { HomeComponent } from '../home/home.component';
  
  import '../style/styles.less';
  
  @Component({
     selector: 'app',
     template:
     `
      &lt;h1&gt;{{title}}&lt;/h1&gt;
      &lt;em&gt;some content&lt;/em&gt;
      &lt;app-login&gt;&lt;/app-login&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
     `,
     directives: [ROUTER_DIRECTIVES, AuthenticationComponent],
     changeDetection: ChangeDetectionStrategy.OnPush
  })
  
  @Routes([
      { path: '/', component: HomeComponent },
      { path: '/redirect', component: AuthRedirectComponent }
  ])
  
  export class AppComponent {
      title: string = "App Component Title";
  
  } 
  </code></pre>
  
  <p>Has anyone gotten around this? I need to keep my Azure AD for authentication, so I can't use local accounts or any other libraries like Auth0. I also must stick to localhost views now since I don't have deployment figured out.</p>
  
  <p>Thanks</p>