title: How to integrate azure b2c with react
body: <p>I am working with react and I have to give my user login through <code>Azure B2C</code>, So I am trying to do that but I am not able to find out how to do that and what is the.</p>
  <p><strong>What I have tried</strong></p>
  <ol>
  <li>I got this example from Microsoft site which is done using plain JavaScript (vanilla), I have no idea how I will implement this in my react code.</li>
  </ol>
  <p>So I tried to move with some react library, I google around and found  <a href="https://www.npmjs.com/package/react-azure-b2c" rel="noreferrer">This library</a></p>
  <p>I have followed the same code they have written, but when I hit login button it takes me to login page of azure, So in my <code>app.js</code>  I am doing <code>console.log(authentication.getAccessToken());</code> after login it throws null, I don't know why</p>
  <p>My code</p>
  <pre><code>authentication.initialize({
          // optional, will default to this
          instance: 'https://login.microsoftonline.com/tfp',
          // My B2C tenant
          tenant: 'mytenant.onmicrosoft.com',
          // the policy to use to sign in, can also be a sign up or sign in policy
          signInPolicy: 'B2c_signupsignin',
          // the the B2C application you want to authenticate with (that's just a random GUID - get yours from the portal)
          clientId: 'fdfsds5-5222-ss522-a659-ada22',
          // where MSAL will store state - localStorage or sessionStorage
          cacheLocation: 'sessionStorage',
          // the scopes you want included in the access token
          scopes: ['https://mytenant.onmicrosoft.com/api/test.read'],
          // optional, the redirect URI - if not specified MSAL will pick up the location from window.href
          redirectUri: 'http://localhost:3000',
      });
  </code></pre>
  <p>And then on click of login I am doing this</p>
  <pre><code>const Log_in = () =&gt; {
          authentication.run(() =&gt; {});
          
      };
  </code></pre>
  <p>in my app.js I am doing like below</p>
  <pre><code>import authentication from 'react-azure-b2c';
  
  function App() {
      console.log(authentication.getAccessToken());   
  }
  </code></pre>
  <p>So initially it is showing null which is fine, but after login also it is throwing error only.</p>
  <p>So I was not able to resolve this, that's why I move to the other library which is almost similar to this</p>
  <ol start="2">
  <li><a href="https://www.npmjs.com/package/react-azure-adb2c" rel="noreferrer">This one</a></li>
  </ol>
  <p>So here when I click on login button I am getting error as</p>
  <p><a href="https://i.stack.imgur.com/lFPUy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lFPUy.png" alt="Error" /></a></p>
  <p><strong>The example I got from Microsoft with valina Javascript, I think that is the perfect way to do but How can I imliment that through react I don't know</strong></p>
  <p><a href="https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp" rel="noreferrer">This the code with vanilla js</a></p>
  <p>I have been stuch here from long time i don't know what to do now, not able to find good example on google to implement it with react</p>
  <p>PS: I am using react hooks functional component to write my code, please guide me through this</p>
  <p>I just want to implement this using react in a proper way, I know out tehre so many peoples who are already using this, so I just want to see a good example.</p>
  <p><strong>Edit / update</strong></p>
  <p>I tried doing like this</p>
  <pre><code>    b2cauth.initialize({
      instance: 'https://mylogin.b2clogin.com/tfp',
      tenant: 'mylogin.b2clogin.com',
      signInPolicy: 'B2C_1_SigninSignupUsername',
      clientId: 'fc3081ec-504a-4be3-a659-951a9408e248',
      cacheLocation: 'sessionStorage',
      scopes: ['https://mylogin.b2clogin.com/api/demo.read'],
      redirectUri: 'http://localhost:3000',
  });
  b2cauth.run(() =&gt; {
      ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
      serviceWorker.unregister();
  });
  </code></pre>
  <p>I check Microsoft link pasted as answer, and changed instance:
  <code>instance: 'https://mylogin.b2clogin.com/tfp',</code></p>
  <p>to</p>
  <p><code>instance:'https://my-tanent-name.b2clogin.com/tenent-id/oauth2/authresp',</code></p>
  <p>but I am getting error as bad request</p>
  <p>and I check network tab and I check the url it is hitting and it is hitting below</p>
  <pre><code>https://login.microsoftonline.com/common/discovery/instance?api-version=1.0&amp;authorization_endpoint=https://my-tenatnt-name.b2clogin.com/tenant-id/oauth2/authrespmy-tenant-name.b2clogin.com/b2c_1_signinsignupusername/oauth2/v2.0/authorize
  </code></pre>
  <p>I tried removing https from instance and hit it like this</p>
  <p><code>//mytenant.b2clogin.com/tenant-id/oauth2/authresp</code></p>
  <p>it throws error as <code>Uncaught AuthorityUriInsecure</code></p>
  <p><a href="https://i.stack.imgur.com/cGuJa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cGuJa.png" alt="Error" /></a></p>
  <p>I think it is going to wrong place</p>