#StackBounty: #javascript #reactjs #azure #react-hooks #azure-ad-b2c How to integrate azure b2c with react

Bounty: 150

I am working with react and I have to give my user login through Azure B2C, So I am trying to do that but I am not able to find out how to do that and what is the.

What I have tried

  1. 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.

So I tried to move with some react library, I google around and found This library

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 app.js I am doing console.log(authentication.getAccessToken()); after login it throws null, I don’t know why

My 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',
    });

And then on click of login I am doing this

const Log_in = () => {
        authentication.run(() => {});
        
    };

in my app.js I am doing like below

import authentication from 'react-azure-b2c';

function App() {
    console.log(authentication.getAccessToken());   
}

So initially it is showing null which is fine, but after login also it is throwing error only.

So I was not able to resolve this, that’s why I move to the other library which is almost similar to this

  1. This one

So here when I click on login button I am getting error as

Error

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

This the code with vanilla js

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

PS: I am using react hooks functional component to write my code, please guide me through this

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.