in Education by
I made an application in react and i'm using ADAL to authenticate in Azure Active Directory, so every time someone go to my site he has to log in. I have to log (send a POST request to my API) all the connections and deconnections (when the user click on the button log out). The authentication is managed by ADAL , so i don't know where to put my code to handle this... import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal'; export const adalConfig = { instance: 'https://login.microsoftonline.com/', tenant: '3v824f55-8461-4eab-9659-81cce12dfa04', clientId: '33h87014-dff8-4406-84ce-2608f7173fe2', endpoints: { api: '14653b62-d8444-4e7a-9362-d7267et30a0d', }, postLogoutRedirectUri: window.location.origin, cacheLocation: 'localStorage', callBack:callBackFunction }; export const authContext = new AuthenticationContext(adalConfig); export const adalApiFetch = (fetch, url, options) => adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options); export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api); function callBackFunction(errorDesc, token, error, tokenType) {`enter code here` alert("Problem wit`enter code here`h the connection ! "); } export const getToken = () => { return authContext.getCachedToken(authContext.config.clientId); }; Here is my adal.config file (that's not the true values) Does anyone has any ideas or have ever encountered this issue ? Thanks in advance :) JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by
I would suggest to create a wrapper class on adalconfig file which encapsulates the AuthenticationContext and provide an interface (methods like GetToken, Logout and getter for the AuthentciationContext). Below is the adalconfig file code with AdalContext wrapper class. import { AdalConfig, adalGetToken, AuthenticationContext } from 'react-adal'; // Endpoint URL export const endpoint = 'https://graph.microsoft.com/'; // App Registration ID const appId = ''; export const adalConfig: AdalConfig = { cacheLocation: 'localStorage', clientId: appId, endpoints: { api:endpoint }, postLogoutRedirectUri: window.location.origin, tenant: '.onmicrosoft.com' }; class AdalContext { private authContext: AuthenticationContext; constructor() { this.authContext = new AuthenticationContext(adalConfig); } get AuthContext() { return this.authContext; } public GetToken(): Promise { return adalGetToken(this.authContext, endpoint); } public LogOut() { this.authContext.logOut(); } } const adalContext: AdalContext = new AdalContext(); export default adalContext; Run code snippetExpand snippet In App.tsx or App.js file, create a public onLogOut() method which encapsulates adalContext.LogOut() and on click of logout button, call that public onLogOut() method and before logging out user you can log the details. Below is the App.tsx file code: import './App.css'; import * as React from 'react'; import logo from './logo.svg'; import { Web } from "@pnp/sp"; import adalContext, { endpoint } from './adalConfig'; interface IAppState { webTitle: string } class App extends React.Component<{}, IAppState> { constructor(props: any) { super(props); this.state = {webTitle: ''}; this.onLogOut = this.onLogOut.bind(this); } public componentWillMount() { const web = new Web(endpoint); web.select("Title").get().then(w => { this.setState({ webTitle : w.Title }); }); } public onLogOut() { // read details and log information before logging out adalContext.LogOut(); } public render() { return (
logo

Welcome to React

To get started, edit src/App.tsx and save to reload.

Title: {this.state.webTitle}

); } } export default App; Run code snippetExpand snippet For more information you can check the below github link: React-Adal I hope it will solve your issue.

Related questions

0 votes
    Is it possible to design applications that handle connection failure in Azure?...
asked Jul 31, 2021 in Technology by JackTerrance
0 votes
    What is meant by Ad-Hoc commands? Give one example....
asked Jan 28, 2023 in Technology by JackTerrance
0 votes
    I tried to set the adListener for Interstitial Ad but it doesn't work (AdMob + Kotlin - Mobile ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 2, 2022 in Education by JackTerrance
0 votes
    I am wrapping an AdManagerAdView in an AndroidView so I can use it in Jetpack Compose. The image fails ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 2, 2022 in Education by JackTerrance
0 votes
    The ws-discovery specifications explains how to protect your network from message alteration Denial of service replay ... for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Mar 11, 2022 in Education by JackTerrance
0 votes
    Your client noticed last month that his ad is often shown next to another advertiser's ad for the same search ... to other advertisers? Select the correct answer from above options...
asked Dec 1, 2021 in Education by JackTerrance
0 votes
    What is the function used to stop capturing the ad hoc timing ? (a) stopadhoc() (b) stopTimer() ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Oct 23, 2021 in Education by JackTerrance
0 votes
    Which of the following is used to run ad hoc R commands? (a) R Console (b) R Primer (c) ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Oct 22, 2021 in Education by JackTerrance
0 votes
    The relation AD - BC = 1, (where A, B, C and D are the elements of a transmission matrix of a network ... Questions for GATE EC Exam, Network Theory MCQ (Multiple Choice Questions)...
asked Oct 13, 2021 in Education by JackTerrance
0 votes
    Which of the following platforms can be used by advertisers to bid and purchase ad impressions across ad exchanges? Ad network Demand Side Platform Supply Side Platform...
asked Sep 5, 2021 in Technology by JackTerrance
0 votes
    What is the ad-hoc command in Ansible?...
asked Jul 29, 2021 in Technology by JackTerrance
0 votes
    If the AD B2B account is e-reference, can an admin block this? Could an admin prevent their users from being guest users in another tenant?...
asked Mar 10, 2021 in Technology by JackTerrance
0 votes
    What is the name of Artificial Intelligence which allows machines to handle vague information with a deftness that mimics ... ) Boolean logic c) Functional logic d) Fuzzy logic...
asked Jan 15, 2023 in Education by JackTerrance
0 votes
    I inserted in PostgreSQL table an UUID created with go.uuid : import ( "github.com/satori/go.uuid" ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    I inserted in PostgreSQL table an UUID created with go.uuid : import ( "github.com/satori/go.uuid" ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 1, 2022 in Education by JackTerrance
...