jamesrandall / react-azure-adb2c Goto Github PK

I have a react-router-dom Route set up to require authentication as per the package's documentation:

    import React from 'react';
    import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
    import authentication from 'react-azure-adb2c';
    import Home from '../Home';
    import Products from '../Products';
    
    authentication.initialize({
      instance: 'https://login.microsoftonline.com/tfp/',
      tenant: process.env.REACT_APP_AAD_DOMAIN,
      signInPolicy: process.env.REACT_APP_AAD_POLICY_ID,
      applicationId: process.env.REACT_APP_AAD_CLIENT_ID,
      scopes: [process.env.REACT_APP_AAD_SCOPES],
      cacheLocation: 'sessionStorage',
      redirectUri: process.env.REACT_APP_URL,
      postLogoutRedirectUri: process.env.REACT_APP_URL,
    });
    
    function App() {
      return (
        <Router>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route
              exact
              path="/products"
              component={authentication.required(Products)} // require login to access /products
            />
          </Switch>
        </Router>
      );
    }
    
    export default App;

This works as expected in a normal browser window, the user clicks a link to /products, gets redirected to an Azure AD B2C login page, gets pushed back to the app on login, and then redirected to /products.

But in an incognito browser, when the user gets pushed back to the app after login, they get redirected back to the Azure login page a second time. If they log in again with the second prompt, then they get pushed to /products, as they should have the first time.

Wondering if this has been an issue for anyone else using this package?

I got Uncaught (in promise) UnsupportedAuthorityValidation error when i use library.
To avoid this error i set validateAuthority to false in node modules.
After setting validateAuthority to false i am able to see the login page and i tried to click on sign in then it will redirect to application and after 2 to 3 secs it will redirects to login page.
Token is not storing in cache

Hey! I'm currently one of the owners of the react-aad-msal library, which is also a React wrapper around MSAL. I had a lot of the same frustrations which led me to try to write my own wrapper until I saw a few people already doing something similar.

Looks like our projects mostly do the same thing, but while we're farther along with the MSAL integration, we're missing a few of the Azure B2C features you have. Would you be interested in helping to migrate the features over and combine libraries? I can do most of the work and take over maintenance if you could help identify the feature gaps...

The Identity team at Microsoft has it in their roadmap to build an official React wrapper for MSAL at an unspecified time next year, but I'm hoping if the community can fill the gap they'll accept our solution as a sanctioned library well before then.

How to implement SSO(Single Sign On) with this library.

Im getting the following error : Access to XMLHttpRequest at 'https://login.microsoftonline.com/tfp/ubdms.onmicrosoft.com/b2c_1_signup_signin/v2.0/.well-known/openid-configuration' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

but I couldn't find any CORS setting on the adb2c side.. any ideas?

When I call authentication.signOut(); it fails. When I check Network Request URL I see double // in url

and if I remove one / and go to url it works find

Hi!

Started getting this warning. Might be good to update the code.

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: _class

The issue is in this line: component={auth.getAuth().required(Login)}

Cheers!

How to get a new token using the refresh token ? Is there any implementation ?

Unfortunately I really don't have time to use this package having dropped B2C myself (see https://www.azurefromthetrenches.com/azure-ad-b2c-a-painful-journey-goodbye-for-now/ ) but it seems that people find value in it (based on the issues and PRs).

Any volunteers to pick up maintenance?

Hello,

Love this library but I am struggling to make it work on IE11, it works fine in Chrome and Edge. I included React polyfills and updated package.json browser list.

Error:
JavaScript critical error at line 1199, column 65 in https://localhost:5001/static/js/main.chunk.js\n\nSCRIPT1002: Syntax error

And that line looks like this in main.chunk.js

react_azure_adb2c__WEBPACK_IMPORTED_MODULE_8___default.a.run(() => {
react_dom__WEBPACK_IMPORTED_MODULE_4___default.a.render(react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_5__["BrowserRouter"], {
basename: baseUrl,
__source: {
fileName: _jsxFileName,
lineNumber: 41
},
_self: undefined
}, react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(App__WEBPACK_IMPORTED_MODULE_6["default"], {
__source: {
fileName: _jsxFileName,
lineNumber: 42
},
_self: undefined
})), rootElement);
Object(registerServiceWorker__WEBPACK_IMPORTED_MODULE_7["default"])();
}); //ReactDOM.render(
//
//
// ,
// rootElement);
//registerServiceWorker();

Hi

I'm trying to setup this library with a newly created React project setup using create-react-app my-app. After installing react-azure-adb2c and setting up the configuration with my Azure ADB2C tenant info, using the authentication.run((), nothing seems to happen when the application is launched.

I can see in the browser Network activity there is an openid-configuration with status of 200. Is there an added configuration required to call and see some UI or have i missed something out - how do i get to login page to get access token?

Using version 0.2.0

Thanks

after login page of azure my app redirect to localhost:3000/null in internet explorer but working fine on other browsers. please help out

Great package, thanks for putting this together! I even thought this was the official MS package since it was featured on TechNet: https://social.technet.microsoft.com/wiki/contents/articles/52573.azure-ad-b2c-secure-your-reactjs-frontend.aspx

One small issue, the recommended login redirect to <your-domain>.b2clogin.com requires the flag validateAuthority to be set to false when calling Msal.UserAgentApplication(): https://docs.microsoft.com/bs-latn-ba/azure/active-directory-b2c/b2clogin

I have added this change to the initialize function on our fork and verified that it works:
information-experience-sweden-ab@fdc6855

It would be helpful if we could get the user/login name from the authentication object. It doesn't look like there is anyway of getting it out at the moment

Can you, please, refresh npm, so that is contains password reset support?

https://www.npmjs.com/package/react-azure-adb2c

MSAL4J performs instance discovery before any acquireToken() or GetAccount() API call as per this url

When I override the default configuration setting to use our own domain as b2c_instance the above instance discovery trying to hit the following url which is returning 404. This doesn't allow me to get to the login page.

https://login.microsoftonline.com/common/discovery/instance?api-version=1.1&authorization_endpoint=https://<my instance url>/<tenent-id>/<policy_name>/oauth2/v2.0/authorize

Has anyone faced this issue, my company uses its own domain instead of login.microsoftonline.com for all the oauth endpoints.

I am stuck with this issue, any help is appreciated here.

Thanks
Venkat

I have deployed my app to Azure and for some reason the authentication.run is not firing. I can console.log the config settings, and everything looks OK. Just gives me a blank page.

Anyone else run into this issue?

Looks like you're fixed to "msal": "^0.1.5" and I think they're up to v0.2.3 now. Happy to submit a PR, but want to make sure you're up for it ?

We see that initialize is called in index.js which forms UserAgentApplication using signInPolicy.

We have different signinPolicy per user domain, so if user is from xyz organization with email [email protected] then we want them to go through b2c_1_xyzsigninpolicy and if user is from abc organization with email [email protected] then we want them to go through b2c_1_abcsigninpolicy.

We have not used one policy as we do not want to show "SignIn to ABC" and "SignIn to XYZ" buttons on B2C Custom login UI.

Instead, what we want to do is have a Login UI in our App which will have only Email TextBox. When user will enter [email protected] then based on email domain, we want them to redirect to xyzsigninpolicy login screen.

How can we dynamically change the Authority in this codebase? When redirectUrl will be sent back from this policy, will the code in index.js execute again?

Also, we are using scheme instead of wrapping show App in authentication HOC as we want to allow /login /logout /404 /403 and /home page to be accessed without authentication.

Please advise if this is possible using this library. Thanks.

I have pages, where I do not want to enforce authentication, but I would take advantage of it, if it is here.
Right now authentication.getAccessToken() returns null for such pages.

Is there workaround?
Thank you for the great framework!

Hi

I have used the below-given sample credentials its working fine and redirected to the Microsoft login screen.

b2cauth.initialize({
instance: 'https://login.microsoftonline.com/tfp/',
tenant: 'peachitad.onmicrosoft.com',
signInPolicy: 'B2C_1_react_signup',
applicationId: '702f55a3-72fd-4da1-a22b-1dc82e70a049',
cacheLocation: 'sessionStorage',
scopes: ['https://peachitad.onmicrosoft.com/api/user_impersonation'],
redirectUri: 'http://localhost:3000',
postLogoutRedirectUri: window.location.origin,
});

But I have changed into my own Azure AD B2C credential am getting the Uncaught (in promise) UnsupportedAuthorityValidation error.
Kindly give me any suggestions.

Due to the recent changes in Azure B2C, the AadAuthority.TrustedHostList in AadAuthority.js is not valid.

I had to add my [domain].b2clogin.com to the trusted hosts list to let it work.

The current state of the library makes it difficult to consume in Typescript based projects.

To address this I believe that supplying a basic set of typing for the library

How would I use this in an electron app?