title: MS Identity Azure app registered but sends unauthorized_client in implicit flow
body: <p>I have registered an app in Azure for Microsoft Identity platform. I configured it to allow MS Accounts (e.g. outlook.com) and have basically done everything in a few of the quickstarts online <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app" rel="nofollow noreferrer">here</a> and <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-access-web-apis" rel="nofollow noreferrer">here</a> (except for "add credentials to your web app"). I have also checked the boxes that enable implicit flow.</p>
  
  <p>I redirect my React application to the URL to sign in (using implicit flow), I get to enter my username but then I see</p>
  
  <blockquote>
    <p>unauthorized_client: The client does not exist or is not enabled for consumers. If you are the application developer, configure a new application through the App Registrations in the Azure Portal at <a href="https://go.microsoft.com/fwlink/?linkid=2083908" rel="nofollow noreferrer">https://go.microsoft.com/fwlink/?linkid=2083908</a></p>
  </blockquote>
  
  <p>Like I mentioned above, I've gone through several quick starts and read about implicit flow <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow" rel="nofollow noreferrer">here</a> and followed their examples for my code.</p>
  
  <p>I also tried just deleting the app registration and starting over. No luck.</p>
  
  <h2>JS Code attempting to implement Implicit Flow</h2>
  
  <p>JS code that redirects the browser to a Url that looks like Microsoft's first example on their <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow" rel="nofollow noreferrer">implicit flow page</a></p>
  
  <pre class="lang-js prettyprint-override"><code>goSignIn() {
      const tenant = 'common'; // (for us with MS accounts)
      const clientId = '*****';
      const redir = encodeURIComponent('http://localhost:3000/signin');
      const nonce = Math.round(Math.random() * 10000, 0);
      const uriTemplate = 'https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?client_id={clientId}&amp;response_type=id_token+token&amp;redirect_uri={redirect}&amp;scope=openid&amp;response_mode=fragment&amp;state={state}&amp;nonce={nonce}';
      const filledTemplate = uriTemplate
        .replace('{tenant}', tenant)
        .replace('{clientId', clientId)
        .replace('{redirect}', redir)
        .replace('{nonce}', nonce)
        .replace('{state}', nonce);
      console.log(filledTemplate);
      window.location = filledTemplate;
    }
  </code></pre>
  
  <h2>App Configuration in Azure:</h2>
  
  <p>Azure -> Identity -> App Registrations -> MyApp -> Authentication</p>
  
  <ul>
  <li>Redirect Uri: <a href="http://localhost:3000/signin" rel="nofollow noreferrer">http://localhost:3000/signin</a> (React app runs on 3000 and I have a route configured for /signin)</li>
  <li>Not using any suggested Redirects.</li>
  <li>Checked Implicit checkboxes for ID Token and Access Token </li>
  <li>Live SDK support enabled</li>
  <li>Supported account types is set to "Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com)"</li>
  </ul>
  
  <p>Azure -> Identity -> App Registrations -> MyApp -> API Permissions</p>
  
  <ul>
  <li>MS Graph
  
  <ul>
  <li>User.Read</li>
  <li>Email</li>
  <li>Profile</li>
  <li>openid</li>
  </ul></li>
  </ul>
  
  <p>From the docs I read, I <em>thought</em> I had done enough to the id token. I'm not sure what tweak must be made in order to get it to work.</p>