Getting an error while using react-adal in login

Viewed 406

I am using the react-adal library for authentication of the user in the frontend. I want the user to enter the homepage click on the login button and move to the route /user. Now as soon as the user clicks login and goes to /user i am asked to provide login credentials which is ok , after entering the details when i am reaching the route /user it doesn't show anything and in console gives an object which is message: "AADSTS500011: The resource principal named values was not found in the tenant named 72f988bf-86f1-41af-91ab-2d7cd011db47. This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You might have sent your authentication request to the wrong tenant. ↵Trace ID: c6f40d40-3bc5-4d56-8257-d5f9492a2d00 ↵Correlation ID: 8109d7cc-a5c7-44f2-94ef-1a20741c4a4b ↵Timestamp: 2019-06-17 09:01:40Z" msg: "invalid_resource"

I am using windows 1- and have a subscription of azure.

App.js

import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    Switch
} from 'react-router-dom';


import User from './User';
import Home from './Home';
import { withAdalLoginApi } from './config/adalConfig';

function App() {
    const ProtectedAppArea = withAdalLoginApi(User, null, null);

    return (
        <Router>
            <div className="App">
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/user" component={withAdalLoginApi(User)} />
                    />
        </Switch>
            </div>
        </Router>
    );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { runWithAdal } from 'react-adal';
import { authContext } from './config/adalConfig';

import App from './App';

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

adalConfig.js

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

export const adalConfig = {
  tenant: 'MytenantId',
  clientId: 'Mycliend id',
  endpoints: {
    api: 'values',
  },
  cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

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

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

user.js

import React, { Component } from 'react';


class User extends Component {
  render() {
    return (
      <div>
        Hello User
      </div>
    );
  }
}

export default User;

Expected is user should log in and output should be Hello user on the home screen

0 Answers
Related