I ran into an issue where the login flow needed to redirect to allow our app to access another API, this library prevented this redirect from happening and just errored out. Why not always allow the redirect to happen if the token is not successfully acquired? Is there any reason we check for specific status codes?

First, great work on this, super simple and straight forward! Thanks!

Dumb question, first time really using Azure, so I'm still learning it's ins and outs.

Is an API's endpoint GUID the same as it's TenantId, once it's been setup in AD as a registered app?

Thanks in advance!

how do I perform signout using this library?

I bootstrap my application using "runWithAdal" just like in the instructions. I get an "interaction_required" error after modifying the Service Principal in AAD to contain more permissions. I do not get the consent screen after logging in, instead I get redirected to the application, which does not work at all.

Should I catch this error somewhere and do something about it? In the general ADAL instructions in these cases one should trigger interactive login (like you would expect), but I don't even know how to do that with React ADAL because I don't see any hooks I could attach an error handler to while using runWithAdal.

Hi,
Do you have any plan to convert your project to typescript or to provide a type definition ?

After I input user (hotmail account) information I got this error:

AADSTS50020: We are unable to issue tokens from this api version for a Microsoft account. Please contact the application vendor as they need to use version 2.0 of the protocol to support this.

here is my config file:

import { AuthenticationContext, adalGetToken, adalFetch } from 'react-adal';

export const adalConfig = {
  tenant: 'common',
  clientId: '25fd0c46-6a83-550c-9a3e-c8214bfe0000',
  endpoints: {
    api: '25fd0c46-6a83-550c-9a3e-c8214bfe0000',
  },
  cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

Version 0.4.18 uses only id_token for response_type and it redirect to invalid_request error page.
Using response_type=id_token works.

While using the library we can easily get it working if you provide the tenant ID or our active directory. However, we are trying to open this up to other organizations and removing the tenant parameter (leaving it as 'common') causes login redirect loops. There doesn't seem to be any errors in the sessionStorage indicating there was a login failure.

This works:

const adal_config = {
    tenant:"my tenant id",
    clientId: "my client id"
}

However this provides the loop:

const adal_config = {
    tenant:"common",
    clientId: "my client id"
}

Am I missing something?

I wrote a new article on medium about my recent experience on Azure AD + React + ASP.NET Core.
I hope you will enjoy it.

Here is the link: https://medium.com/@dbottiau/a-memo-on-how-to-implement-azure-ad-authentication-using-react-and-net-core-2-0-3fe9bfdf9f36

And thanks for hte lib by the way. ;)

i want my homepage/lading page to be some fancy page with login button, on click of this button i want to redirect to azure login page and upon successful login i want to go inside the main dash board.

i am not able to achive it as the callback function is not propery documented.

hwo to achieve this?

Hi there,

I'm facing the infinite loop issue that are reported on adal repo (for instance #635 & #463), but with React.
Adal repo is providing guidelines on how to avoid it, but these guidelines are tied to AngularJS.

What I'd like to implement: if a User has no access to my app (because he's not allowed to in Azure AD), then I want to show him an Access denied page

Where I am so far

1. User browse my app to http://myapp/
2. This triggers the Azure authentication windows
3. User authenticates
4. AzureAD understands my User has no rights, so it redirects to http://myapp/#error=access_denied
5. At this point, react-adal enters this if, so it triggers authContext.login();, which brings me back to step 2.

And there goes the infinite loop.

To put it in other words : I'm never able to reach the <ErrorPage /> of

const MyProtectedPage = withAdalLoginApi(
  MyPage, 
  () => <Loading />, 
  (error) => <ErrorPage error={error}/>
);

Have you already faced this access_denied loop problem ? Am I missing something obvious ?

Is there a way to tell if you authenticating against azure ad v1.0 or 2.0.?

I'm trying to send a POST request to an API that is hosted in Azure and is authenticated through Azure Active Directory. I'm using React with React-Adal to send my requests. I configured react-adal using the GitHub repo and this tutorial to guide me.

adalConfig.js

import { AuthenticationContext, adalFetch, withAdalLogin, adalGetToken } from 'react-adal';

export const adalConfig = {
    tenant: 'ad5842d4-1111-1111-1111-111111111111',
    clientId: '1f89aa20-1111-1111-1111-111111111111', //ClientID of the ReactClient application
    endpoints: {
        demoApi: 'e7926712-1111-1111-1111-111111111111', //ClientID of the DemoApi
        microsoftGraphApi: 'https://graph.microsoft.com'
    },
    postLogoutRedirectUri: window.location.origin,
    redirectUri: 'https://localhost:44394/',
    cacheLocation: 'sessionStorage'
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalDemoApiFetch = (fetch, url, options) =>
    adalFetch(authContext, adalConfig.endpoints.demoApi, fetch, url, options);

export const adalTokenFetch = () =>
    adalGetToken(authContext, adalConfig.endpoints.demoApi);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints);

When I use the adalDemoApiFetch with a GET request it works fine and returns 200 with the list of schedules.

const url = `https://localhost:44322/api/Schedules/GetAllSchedules`;

        const response = await adalDemoApiFetch(axios.get, url);
        console.log(response);

        const schedules = response.data;

When I use the same adalDemoApiFetch with a POST to add a new schedule to the list it returns a 401.

const url = `https://localhost:44322/api/Schedules/AddSchedule`;

        const azureADID = authContext.getCachedUser();
        const token = authContext.acquireToken("e7926712-1111-1111-1111-111111111111");
        console.log(token);

        const options = {
            beginningDateTime: this.state.begDateTime.toJSON(),
            endindDateTime: this.state.endDateTime.toJSON(),
            userID: this.state.userID,
            azureADID: azureADID.profile.oid
        };

        const response = await adalDemoApiFetch(axios.post, url, options);
        console.log(response);

I also tried copying out the token and using it in Postman to make the call and it still returns 401. When I use the token that is returned from the function below it works just fine.

export const adalTokenFetch = () =>
    adalGetToken(authContext, adalConfig.endpoints.demoApi);

I use axios to call it in the code below and it works just fine.

const url = `https://localhost:44322/api/Schedules/AddSchedule`;

        const azureADID = authContext.getCachedUser();
        const token = await adalTokenFetch();
        console.log(token);

        const options = {
            beginningDateTime: this.state.begDateTime.toJSON(),
            endindDateTime: this.state.endDateTime.toJSON(),
            userID: this.state.userID,
            azureADID: azureADID.profile.oid
        };

        const response = await axios.post(url,
            {
                data: options
            },
            {
                headers: {
                    "Authorization": `Bearer ${token}`
                }
            }
        );

        console.log(response);

What am I doing wrong? Why would it work with a GET request and not with the POST request? Am I missing something?

How can I access roles or groups information ? Lets suppose I modified the manifest correctly to have groups or roles assigned to each user.

How can I access that information from react app to render different menu?

Hello

I see you posted a comment here:
AzureAD/azure-activedirectory-library-for-js#481

I do have a question though, I have a webapp which is 100% UI only, no business logic, and I used your component to login and it works 100% fine.

However in my webapp at some point I will need to call a REST API, the REST API will be hosted in a different url in Azure, so I created another App Registration in Azure.

Can I use your component to authenticate the REST requests also?

If so, can you please guide me in the right direction? Can this be integrated with axios as the other user did in the previous post?

Hello. excuse me for beeing a bit of a beginner. But how do i use adalApiFetch to send my requests?
I for example use Axios to send http requests. An example would be lovely. Thanks.

// how to use the constant below..

export const adalApiFetch = (fetch, url, options) =>
adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);
use adalApiFetch with your favorite "fetch" in your api call.

Hi there! The file with current size of 1906 lines looks a little bit weird for me, it is hard to read and understand its structure.

Hi

I've successfully used react-adal for my whole application before. However, this time around I only want the security context around 1 certain object (an action bar, the actions which are allowed are based on the user's security context). This is my code shortened:

import ActionBar from './ActionBar.jsx';
class Page extends React.Component  {
constructor(props) {
        super(props);
}

render() {      
        const actionBarWithAdal = withAdalLoginApi(ActionBar, () => <div>Loading</div>,(error) => <div>Error</div>);
return <div>{actionBarWithAdal}</div>
    }
}

class ActionBar extends React.Component {
    constructor(props) {
        super(props);

    componentDidMount() {
        console.log("Mounted");

        this.api.getActions(this.actionsCallback,this.apiErrorCallback);
    }
...
render(){
          console.log("Rendering");
          return <div>{this.state.apiActions}</div>;
      }
}

However, the code is never hitting the mount-method of this ActionBar. What am I doing wrong in my 'page'-component?

In my application, i would have to pass few values in request and get the same value in response, which is usually done using state in Azure AD but when i use react-adal library, state value is not accepted as it is getting updated with GUID through code and it is not consider as configurable option.
So please let me the approach how would i be able to achieve this

Hi there,

I used react-adal in my project. It works well, but I have an issue with the refreshing browser. If user press F5 to refresh or reload the page, it will do re-authentication, and back to home page. How do we avoid this issue?

Thanks,

It worked perfect for my reactjs authentication, however I also have external custom apis that I need to call from within react, I guess the endpoints array is to list the app registration is from azure portal. Thats easy, done.

However, can you post an example of how to call a custom api?

Hi,

I greatly appreciate for react-adal package. I added package in my react project and started using package to authenticate users with in the organization. [url]/signin-oidc (url was localhost in dev environment and different for server) worked totally fine in localhost. but when the code was pushed to server that has IIS 8.0. It started giving me error message 'page does not exist'. Then i removed the signin-oidc as redirect URI. It started diverting to null page. and gave errors saying page does not exist. i removed the null at the end and it goes to my home page. I really want this to work in prod environment and don't want to ask users to remove null at the end of url. what should i do to get rid of null page routing. also why signin-oidc not working on IIS 8.0. It totally works fine on my local host.

If I leave my site open but idle for about an hour, I'm not longer able to make service requests and I'm given a 401 error. I have to refresh the page in order to get a "new" (looking at the local storage of dev tools the tokens are actually the same) token and resubmit my request.
To my understanding adal.js refreshes tokens silently in the background so if the cached token has expired it gets another.
I've set up my adalConfig.js using the guide outlined in the readme, with the addtion of a getToken function that a wrapper around the authContext.getCachedToken(). This is the call I'm using to authenticate during my service requests
I've read some stack overflow responses to similar questions which state suggest that it might be a wrapper issue, but since all my wrapper does is directly return whatever is returned from your getCachedToken function, I figured it must be your wrapper around adal.js that's the issue.

For now I'm just alerting the user to the error and telling them to refresh the page, but I'd like to avoid this in future. Is there something I'm doing wrong or is this truly an internal issue.

(Sorry if I didn't present the question correctly or this not the correct space to ask the question. This is my first time submitting an issue).

Can you please transpile it before putting it to npm.
its not working with IE11

Hi,
When I load he page in IE 11, the crashed and in console I got this message:

HTML1300: Navigation occurred.
TypeError: Object doesn't support property or method 'includes'
{
[functions]: ,
proto: { },
description: "Object doesn't support property or method 'includes'",
message: "Object doesn't support property or method 'includes'",
name: "TypeError",
number: -2146827850,
stack: "TypeError: Object doesn't support property or method 'includes'

Thanks for the wrapper! One issue I've found is the extremely limiting requirement in which you've required under runWithAdal() that window === window.parent. For my use case I am trying to develop a VSTS Extension that lives within a website, so of course my code never passes this clause. Perhaps it might be helpful to expand the package so that users could either specify a regex for the root/context they expect to be working out of, or an alert if they don't pass the window === window.parent clause? Let me know what you think!

I have tried setting up my Azure app as a Web/API as well as Native, but I am getting: response_type 'token' is not enabled for the application
any suggestions?

Hi, is there a way to get access to some of the user information claims after authentication?
Eg: I would like to know who is logged in and do a callback to my dB so I display the UI according to their role.

Than you

Ray

I have added this to a react TS project and it works for the most part but sometimes it get's into a redirect loop which switches between localhost:3000/null and localhost:3000#id_token={token} and then eventually lands on localhost:3000/null

Is there any reason this would be happening? Sometimes it causes 404 errors

Hi! Thanks for library!
Can you please provide an example of usage with adal only one component (not the whole application).
I have only one component (on one url) where it is required an authorization with azure.
Thanks!
And thanks one more time for your library!

Hi @salvoravida

So my app is authorised within Azure AD however I wish to access the Microsoft Graph API's as well as the PowerBI API's.

Would I need to create 2 separate functions to call them such as this:

export const adalConfig = {
  tenant: 'tenent.onmicrosoft.com',
  clientId: 'ffffffff-fffff-ffff-ffff-fffffffffffffffff',
  endpoints: {
    graphApiUri: "https://graph.microsoft.com",
    api: 'ffffffff-fffff-ffff-ffff-fffffffffffffffff',
    powerbi: 'https://analysis.windows.net/powerbi/api',
    'https://graph.microsoft.com': 'https://graph.microsoft.com'
  },
  cacheLocation: 'localStorage'
};


export const graphApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.graphApiUri, fetch, url, options);

export const powerbiApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.powerbi, fetch, url, options);

As with PowerBi, my main task is just to get the bearer token, is there a way to just get the adal token?

Thanks

When I converted my existing fetch calls to adalFetch most of them didn't work because I wasn't specifying any options:

Fixing this would be pretty easy:

const o = options || {};

Thanks for the library, it's much more convenient for ADFS integration than SAML libraries I've tried. I'm concerned about security, however.

Added a couple console.log statements around runWithAdal logic and noticed that it fires in the frontend. So is it the frontend that verifies user authentication? Wouldn't that be susceptible to user tampering?

How to combine adalFetch with axios?

Hey, I really like your work, but your script depends on adal, so it would be nice to add adal as dependencies, not to include it directly. Also, it would be cool to add 'logOut' function.

withAdalLoginApi flow fails when account is configured for MFA. Following error message is thrown -
AADSTS50079: The user is required to use multi-factor authentication.

Based on this, to perform MFA, either acquireTokenPopup() or acquireTokenRedirect() must be called as acquireToken() is not an interactive flow.

Hi have an SPA app built through CRA. My react app which is authenticated through react-adal library, which is amazing, thank you so much, has been receiving this message when I try to load my iframe inside this other app: Refused to display 'https://login.microsoftonline.com/ in a frame because it set 'X-Frame-Options' to 'deny'.

React:16.8.2
react-adal: 0.4.22

index.js:

const DO_NOT_LOGIN = false;

runWithAdal(
    authContext,
    () => {
        ReactDOM.render(<App />, document.getElementById('root'));
    },
    DO_NOT_LOGIN,
);

exports from App.js:
export default withAdalLoginApi(App);

adalConfig file:

import { AuthenticationContext, adalFetch, withAdalLogin, runWithAdal } from 'react-adal';

export const adalConfig = {
    tenant: process.env.REACT_APP_TENANT,
    clientId: process.env.REACT_APP_MSAL_CLIENT_ID,
    endpoints: { api: process.env.REACT_APP_GRAPH_ENDPOINT },
    cacheLocation: process.env.REACT_APP_CACHE_LOCATION,
    redirectUri: process.env.REACT_APP_REDIRECT_URI,
    popUp: true,
    //eslint-disable-next-line
    displayCall: function(urlNavigate) {
        const popupWindow = window.open(urlNavigate, 'login', 'width=483, height=600');
        if (popupWindow && popupWindow.focus) popupWindow.focus();
        const registeredRedirectUri = this.redirectUri;
        var pollTimer = window.setInterval(() => {
            if (!popupWindow || popupWindow.closed || popupWindow.closed === undefined) {
                window.clearInterval(pollTimer);
            }
            try {
                if (popupWindow.document.URL.indexOf(registeredRedirectUri) != -1) {
                    window.clearInterval(pollTimer);
                    window.location.hash = popupWindow.location.hash;
                    authContext.handleWindowCallback();
                    popupWindow.close();
                }
            } catch (e) {}
        }, 20);
    },
};

const DO_NOT_LOGIN = false;
export const authContext = new AuthenticationContext(adalConfig);

/**
 * Takes React.DOM App render and wraps it,
 * to avoid duplicate ReactApps started on iframes
 *
 * @param {*} path
 */
export const withAdal = dom => runWithAdal(authContext, () => dom, DO_NOT_LOGIN);

/**
 * Logs user out
 */
export const logOut = () => authContext.logOut();

/**
 * adalFetch
 *
 * @param {*} fetch
 * @param {*} url
 * @param {*} options
 */
export const adalApiFetch = (fetch, url, options) => adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

thank you in advance 🙏 hope you can lend some insight :)

Noted in the src comments but not actually supported.

Hi There,

I just updated latest react-adal. After update, when I run deploy, I got error message. Here are details

SyntaxError: Unexpected token: name (React) [./~/react-adal/lib/react-adal.js:10,0]

any suggestion please?

thanks,

I was wondering if you could elaborate on this part of the readme?

use adalApiFetch with your favorite "fetch" in your api call.

Like with a sample? Specifically with an api behind it would be amazingly helpful

Hello

1. Whats the difference between the 2 implementations, its not easy to understand.
2. Isnt the tenantid and clientid usually different? being client id the app registration id and tenant id the active directory id?

Thanks

Hello

My application needs two completely different tokens, for accessing different APIs, and each of them require a different client ID (I cannot change the permissions such that the client ID is the same).

How could I configure for this situation?

From what I have seen, the ApplicationContext is a singleton so we would only ever allow one global config, even when I create two instances of it with two different configs.

Thank you.

I got this to work in a standalone react app but what if the react page is hosted in an iframe on a different site?
Can this work using the same iframe approach?

Thanks!

react-adal cannot recover from Errors re-obtaining sign-in tokens after leaving browser window open a few days.

This will only apply to application that enable sid in their AAD manifest (which is pretty rare).

Example error: Error AADSTS16002: Application requested a user session which does not exist. Trace ID: 057b129f-0717-489f-99fb-05ec121a3800 Correlation ID: cabaed52-02df-4e61-939f-4ba9151cc75e Timestamp: 2018-10-22 16:24:19Z clientRequestId: KustoWebV2;eb742095-98ac-49d4-80b9-08a692d46b29

This should be fixed the same way MFA was fixed - call acquireTokenRedirect for these cases.

Trying to use adalFetch, I see that the underlying adalGetToken it calls will reject when it fails to retrieve a token for the pointed-to resource?

Is it simply to authContext.login() on the next line? Trying to do this, I seem to get a no-op (no redirection, prompt etc.) when calling that login method. It would indicate to me that the authContext thinks I'm logged in (cached user?), despite the authContext.acquireToken not getting a token. I consistently receive a login_required error from adal on Chrome (Firefox seems to work, other browsers break with other problems).

Hi,

I can't seem to figure out what import { store } from './store'; refers to.

Please help

I had a nodejs server serving the client side (React) only to deal with the authentication, but then I took the nodejs out and I started to use this library on the client side instead. The thing is... the "stay signed in" option isn't showing anymore. I set it up on the azure portal to allow it, but it's still not working.

Any recommendations?

That's what I want:

On adalConfig.js how can we specify an endpoint different from 'api'? (e.g. 'http://localhost:5000/api/')

If I do this:

export const adalConfig = {
    tenant: '<tenant>',
    clientId: '<clientid>',
    endpoints: {
        'http://localhost:5000/api/': '<webapi_appid>',
    },
   cacheLocation: 'localStorage',
};

I get this error on adalApiFetch:
Uncaught (in promise) {message: "resource is required", msg: "resource is required"}

Is adalFetch just supposed to return a refreshed token that I then use to send a request or does it actually send the request. While trying to implement it I'm only receiving a promise of the request that is supposed to be sent, not the response. Looking at my network traffic it seems a call to my api is made but I'm getting a 204 response.
I'm using RxJs/ajax as my fetch object.
I've looked at other issues regarding adalFetch and I'm certain that I'm implementing the call. It's after I make the call that I need more clarity on.

Hi, first of all thanks for the library, it's working great. I was wondering if anyone could provide an example on how to perform a sign out ?
Thanks