MarkLeMerise/1 README.md

## 1 README.md

      
    Raw
  

              1 README.md
            
          
    Your Azure AD instance must be configured to redirect any authentication request back to redirect.html upon successful authentication. redirect.html will handle sending the authenticated user to their intended destination.
For example, if an unauthenticated user navigates to "myapp.example/deep/link/to/somewhere/in/your/app", they will be taken through the normal Azure AD login process, sent to redirect.html, then properly routed to the deep link in your app.
This is what my deployable dist directory looks like:


## authContextPromise.js
import { AuthenticationContext } from "react-adal";

// Our Azure AD keys come from an API so they're easier to adjust without a code change.
// However, they can just as easily be hardcoded to test without the use of a Promise.
export default fetch("/api/settings/auth")
  .then(response => response.json())
  .then(
    config =>
      new AuthenticationContext({
        cacheLocation: "sessionStorage",
        clientId: config.ClientId,
        redirectUri: `${window.location.origin}/redirect.html`,
        tenant: config.TenantId
      })
  );

## index.js
// This is the entry point into the application.
// Using react-adal@0.4.22, react@16.8.6

import * as React from "react";
import { runWithAdal } from "react-adal";
import * as ReactDOM from "react-dom";
import authContextPromise from "./auth/authContextPromise";
import App from "./components/App";

authContextPromise.then(authContext => {
  runWithAdal(
    authContext,
    () =>
      // Pass the auth context into the app for logging out, user info, etc.
      ReactDOM.render(
        <App authContext={authContext} />,
        document.getElementById("app-mount")
      ),
    false
  );
});

## redirect.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Frame Redirect</title>
    <script src="https://unpkg.com/adal-angular@1.0.17/dist/adal.min.js"></script>
  </head>
  <body>
    <script>
      fetch("/api/settings/auth")
        .then(response => response.json())
        .then(({ ClientId: clientId }) => {
          var authContext = new AuthenticationContext({ clientId });
          authContext.handleWindowCallback();

          if (window === window.parent) {
            window.location.replace(location.origin + location.hash);
          }
        });
    </script>
  </body>
</html>
	import { AuthenticationContext } from "react-adal";

	// Our Azure AD keys come from an API so they're easier to adjust without a code change.
	// However, they can just as easily be hardcoded to test without the use of a Promise.
	export default fetch("/api/settings/auth")
	.then(response => response.json())
	.then(
	config =>
	new AuthenticationContext({
	cacheLocation: "sessionStorage",
	clientId: config.ClientId,
	redirectUri: `${window.location.origin}/redirect.html`,
	tenant: config.TenantId
	})
	);
	// This is the entry point into the application.
	// Using react-adal@0.4.22, react@16.8.6

	import * as React from "react";
	import { runWithAdal } from "react-adal";
	import * as ReactDOM from "react-dom";
	import authContextPromise from "./auth/authContextPromise";
	import App from "./components/App";

	authContextPromise.then(authContext => {
	runWithAdal(
	authContext,
	() =>
	// Pass the auth context into the app for logging out, user info, etc.
	ReactDOM.render(
	<App authContext={authContext} />,
	document.getElementById("app-mount")
	),
	false
	);
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Frame Redirect</title>
	<script src="https://unpkg.com/adal-angular@1.0.17/dist/adal.min.js"></script>
	</head>
	<body>
	<script>
	fetch("/api/settings/auth")
	.then(response => response.json())
	.then(({ ClientId: clientId }) => {
	var authContext = new AuthenticationContext({ clientId });
	authContext.handleWindowCallback();

	if (window === window.parent) {
	window.location.replace(location.origin + location.hash);
	}
	});
	</script>
	</body>
	</html>