An example using adal.js with React.

AdalAuthentication.jsx

// Set up the ADAL instance, we will use the throughout the app
export var adalInstance = new AuthenticationContext({
  instance: 'https://login.microsoftonline.com/',
  
  // The client ID of the app from the Azure Portal
  clientId: 'aabbccee-aabb-1122-3344-556677889900',
  
  // Where do we want to go after logging out
  postLogoutRedirectUri: window.location.origin, 
  
  endpoints: {
    // The domain of API (requsets are made TO)
    // And the same client id as above
    "https://YOURAPIDOMAIN.azurewebsites.net/": "aabbccee-aabb-1122-3344-556677889900" 
  }
})

export function authenticateToken() {
    if (adalInstance.getCachedUser()) {
        // If we have a cached login, use it
        return true
    }

    if (adalInstance.isCallback(window.location.hash)) {
        // This happens after the AD login screen,
        // handleWindowCallback will use the hash to
        // complete the login
        adalInstance.handleWindowCallback()
        return true
    }

    // Not logged in
    return false
}

export function azureApiRequest(method, resource, body) {
    var resourceUrl = apiUrl + resource;
    
    // Use the client ID of your app for this call,
    // same as in the configuration earlier
    var bearerToken = adal.getCachedToken('aabbccee-aabb-1122-3344-556677889900')
   
   var opts = {
        method: method,
        headers: {
            'Authorization': 'Bearer ' +  bearerToken
        }
    }

    // I'm using JSON for my API, you can change this to your
    // heart's desire
    if (body) {
        opts.body = JSON.stringify(body)
        opts.headers['Content-Type'] = 'application/json'
    }

    return fetch(resourceUrl, opts)
        .then(response => {
            return response.json()
        }).catch(function(error) {
            console.log("Network problem: " + error)
            // Inspect the error further to see what is actually wrong
        }
    )
}

AppWrapper.jsx

import React from 'react';
import {adalInstance, authenticateToken, azureApiRequest} from './AdalAuthentication';

class App extends React.Component
{
    constructor() {
        this.state = {
            loggedIn: false,
            appInfo: null
        }
    }

    componentWillMount() {
        if (authenticateToken()) {
            this.setState({
                loggedIn: true
            })

            azureApiRequest('GET', '/Info').then(
                appInfo => this.setState({
                    appInfo: appInfo
                })
            )
        }
        else {
            adalInstance.login()
        }
    }

    handleLogout() {
        adalInstance.logout()
    }

    render() {
        if (this.state.loggedIn) {
            if (this.state.appInfo) {
                return <MyApp appInfo={this.state.appInfo} />
            }
            else {
                return <h1>Loading ...</h1>
            }
        }
        else {
            return <h1>Not authenticated</h1>
        }
    }
}

hi, have a look https://github.com/salvoravida/react-adal

Hello Salvoravida,

Could you please share some working example for implementation of react-adal in dot net core.
Thanks,
Abhay

Hi,

I was getting an error when calling adalInstance.logout(), after some time of google searching I found out it should be called as adalInstance.logOut() instead. Thanks for code, cheers! :)

Yea, this "example" doesn't work and am wondering if anyone has managed to track down one that does?

Making an attempt to wrap a React app in AAD access via TypeScript and the best I can tell, this is either incomplete, incorrect or out of date? And yes, I have the @type/react-adal added to the app.