Skip to content

Instantly share code, notes, and snippets.

@hampusborgos
Last active July 12, 2019 08:01
Show Gist options
  • Save hampusborgos/f8115db70a2cc61b7910c7cab1cba4d6 to your computer and use it in GitHub Desktop.
Save hampusborgos/f8115db70a2cc61b7910c7cab1cba4d6 to your computer and use it in GitHub Desktop.
An example using adal.js with React.
// 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
}
)
}
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>
}
}
}
@salvoravida
Copy link

@Abhay5104
Copy link

Hello Salvoravida,

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

@aleksa81
Copy link

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! :)

@DigitalKrony
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment