@equinor/fusion-framework-module-msal 0.1.0-beta.4 → 0.1.1

package/dist/types/provider.d.ts

@@ -1,5 +1,4 @@
-import { AuthClient } from '@equinor/fusion-web-msal';
-import { AuthRequest } from '@equinor/fusion-web-msal/dist/request';
+import { AuthClient, AuthRequest } from './client';
 import { IAuthConfigurator, AuthClientOptions } from './configurator';
 export declare type AccountInfo = {
     homeAccountId: string;
@@ -10,26 +9,27 @@ export declare type AccountInfo = {
     name?: string;
 };
 export interface IAuthProvider {
-    readonly client: AuthClient;
+    readonly defaultClient: AuthClient;
     readonly defaultConfig: AuthClientOptions | undefined;
-    readonly account: AccountInfo | undefined;
+    readonly defaultAccount: AccountInfo | undefined;
+    getClient(name: string): AuthClient;
     createClient(name?: string): AuthClient;
-    acquireToken(req: AuthRequest): Promise<{
-        accessToken: string;
-    } | void>;
+    acquireToken(req: AuthRequest): ReturnType<AuthClient['acquireToken']>;
     acquireAccessToken(req: AuthRequest): Promise<string | undefined>;
     login(): Promise<void>;
+    handleRedirect(): ReturnType<AuthClient['handleRedirectPromise']>;
 }
 export declare class AuthProvider {
     protected _config: IAuthConfigurator;
-    get client(): AuthClient;
-    get account(): AccountInfo | undefined;
+    protected _clients: Record<string, AuthClient>;
+    get defaultClient(): AuthClient;
+    get defaultAccount(): AccountInfo | undefined;
     get defaultConfig(): AuthClientOptions | undefined;
     constructor(_config: IAuthConfigurator);
+    getClient(name: string): AuthClient;
     createClient(name?: string): AuthClient;
-    acquireToken(req: AuthRequest): Promise<{
-        accessToken: string;
-    } | void>;
+    handleRedirect(): ReturnType<AuthClient['handleRedirectPromise']>;
+    acquireToken(req: AuthRequest): ReturnType<AuthClient['acquireToken']>;
     acquireAccessToken(req: AuthRequest): Promise<string | undefined>;
     login(): Promise<void>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-module-msal",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.1",
   "description": "",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -21,9 +21,9 @@
     "directory": "packages/module-msal"
   },
   "dependencies": {
-    "@equinor/fusion-framework-module": "^0.1.0-beta.4",
-    "@equinor/fusion-framework-module-http": "^0.1.0-beta.4",
-    "@equinor/fusion-web-msal": "^0.1.1"
+    "@azure/msal-browser": "^2.21.0",
+    "@equinor/fusion-framework-module": "^0.1.1",
+    "@equinor/fusion-framework-module-http": "^0.1.1"
   },
   "types": "index.d.ts",
   "typesVersions": {
@@ -33,5 +33,5 @@
       ]
     }
   },
-  "gitHead": "e3857f92b410b4134fa08ffbc791d211a02a3a85"
+  "gitHead": "ca79b01fcc32c2c4e4aeea2f7c251fe9d91a2d04"
 }

package/src/client/behavior.ts

@@ -0,0 +1,14 @@
+/**
+ * - **Popup:**
+ *   Use when initiating the process via opening a popup window in the user's browser
+ *
+ * - **Redirect:**
+ *   Use when initiating the login process by redirecting the user's browser to the authorization endpoint.
+ *   This function redirects the page, so any code that follows this function will not execute.
+ */
+export type AuthBehavior = 'popup' | 'redirect';
+
+/**
+ * Default behavior for login and acquisition of token
+ */
+export const defaultBehavior: AuthBehavior = 'redirect';

package/src/client/client.ts

@@ -0,0 +1,158 @@
+import {
+    PublicClientApplication,
+    Configuration,
+    AuthenticationResult,
+    SsoSilentRequest,
+    PopupRequest,
+    RedirectRequest,
+    AccountInfo,
+} from '@azure/msal-browser';
+
+import { AuthBehavior, defaultBehavior } from './behavior';
+import { AuthRequest } from './request';
+
+/**
+ * ### Simple extension of Microsoft`s authentication client.
+ *
+ * When using this client tenant is **required** since common login is deprecated after all.
+ * By providing tenant the user account can simple be extracted from current session *if any*.
+ *
+ * @example
+ * ```typescript
+ * const tenantId = '224123a0d-7990-4ba1-aff3-1dss9569af32';
+ * const authPath = '/my-app/auth';
+ * const client = new AuthClient(tenantId, {
+ *    auth: {
+ *        clientId: '6dab35d4-59ff-4dcc-3356-24479e6fc888',
+ *        authority: `https://login.microsoftonline.com/${tenantId}`,
+ *        redirectUri:  window.location.origin + '/my-app/auth'
+ *    }
+ * });
+ * document.getElementById('login-btn').addEventListener('click', () =>
+ *    client.login({ scopes: ['data.read'] })
+ *      .then(console.log)
+ *      .catch(console.error)
+ * );
+ * (async() => {
+ *    if(window.location.path === authPath) {
+ *        await client.handleRedirectPromise()
+ *    }
+ * )();
+ * ```
+ * @see [Microsoft Authentication Library](https://github.com/AzureAD/microsoft-authentication-library-for-js)
+ * @see [Microsoft identity platform](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow)
+ */
+export class AuthClient extends PublicClientApplication {
+    /**
+     * @returns
+     * Returns account for client tenant that MSAL currently has data for.
+     * (the account object is created at the time of successful login)
+     */
+    get account(): AccountInfo | undefined {
+        const accounts = this.getAllAccounts();
+        return accounts.find((a) => (a.tenantId = this.tenantId));
+    }
+
+    /**
+     * @returns - Configured client id
+     */
+    get clientId(): string | undefined {
+        return this.config.auth?.clientId;
+    }
+
+    get requestOrigin(): string | null {
+        return this.browserStorage.getTemporaryCache('request.origin', true);
+    }
+
+    /**
+     * @param tenantId - tenant id for client domain
+     * @param config - required [Configuration](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/src/config/Configuration.ts)
+     */
+    constructor(readonly tenantId: string, config: Configuration) {
+        super(config);
+    }
+
+    /**
+     * @param silent
+     * Attempt to use a hidden iframe to fetch an authorization code from the eSTS if {@link AuthClient.account} or login hint.
+     * Provided {@link AuthBehavior} is used as fallback.
+     * There are cases where this may not work:
+     * - Any browser using a form of Intelligent Tracking Prevention
+     * - If there is not an established session with the service
+     *
+     * @returns
+     * Promise that is fulfilled when this function has completed, or rejected if an error was raised.
+     */
+    async login(
+        options?: AuthRequest,
+        behavior: AuthBehavior = defaultBehavior,
+        silent = true
+    ): Promise<AuthenticationResult | void> {
+        const loginHint = options?.loginHint || this.account?.username;
+        const scopes = options?.scopes || [];
+        const request = { ...options, loginHint, scopes };
+
+        if (loginHint && silent) {
+            this.logger.verbose('Attempting to login in silently');
+            try {
+                return this.ssoSilent(request as SsoSilentRequest);
+            } catch {
+                this.logger.verbose('Silent login attempt failed');
+            }
+        }
+
+        this.logger.verbose(`Attempting to login in by [${behavior}]`);
+
+        switch (behavior) {
+            case 'popup':
+                return this.loginPopup(request as PopupRequest);
+            case 'redirect': {
+                return this.loginRedirect(request as RedirectRequest);
+            }
+        }
+    }
+
+    /**
+     * Will try to silently acquire an access token for a given set of scopes.
+     * Will use cached token if available, otherwise will attempt to acquire a new token from the network via refresh token.
+     *
+     * @param silent
+     * Attempt to use a hidden iframe to fetch an authorization code from the eSTS if {@link AuthClient.account} or login hint.
+     * Provided {@link AuthBehavior} is used as fallback.
+     * There are cases where this may not work:
+     * - Any browser using a form of Intelligent Tracking Prevention
+     * - If there is not an established session with the service
+     *
+     * @returns
+     * Promise that is fulfilled when this function has completed, or rejected if an error was raised.
+     */
+    public async acquireToken(
+        options: AuthRequest = { scopes: [] },
+        behavior: AuthBehavior = defaultBehavior,
+        silent = true
+    ): Promise<AuthenticationResult | void> {
+        const account = await this.account;
+        if (silent && account) {
+            this.logger.verbose('Attempting to acquire token in silently');
+            try {
+                return this.acquireTokenSilent({ account, ...options });
+            } catch (err) {
+                this.logger.info(
+                    'Expected to navigate away from the current page but timeout occurred.'
+                );
+            }
+        }
+
+        this.logger.verbose(`Attempting to acquire token by [${behavior}]`);
+
+        switch (behavior) {
+            case 'popup':
+                return this.acquireTokenPopup(options);
+            case 'redirect': {
+                return this.acquireTokenRedirect(options);
+            }
+        }
+    }
+}
+
+export default AuthClient;

package/src/client/create-auth-client.ts

@@ -0,0 +1,48 @@
+import { Configuration, IPublicClientApplication } from '@azure/msal-browser';
+import { AuthClient } from './client';
+import { normalizeUri } from './util/url';
+
+export type AuthClientConfig = Configuration & {
+    auth: Partial<Configuration['auth']>;
+};
+
+/**
+ * Creates an authentication client with basic config.
+ *
+ * @example
+ * ```typescript
+ * const myClient = createClient(
+ *  '224123a0d-7990-4ba1-aff3-1dss9569af32',
+ *  '6dab35d4-59ff-4dcc-3356-24479e6fc888',
+ *  '/my-app/auth'
+ * );
+ * ```
+ *
+ * @template T - client type, default to {@link AuthClient}
+ *
+ * @param tenantId - tenant to for authentication
+ * @param clientId - client id for authentication
+ * @param redirectUri - callback url for authentication (must match exact configured url in app)
+ * @param config - optional [Configuration](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/src/config/Configuration.ts)
+ * @param ctor - optional client class
+ */
+export const createAuthClient = <T extends IPublicClientApplication = AuthClient>(
+    tenantId: string,
+    clientId: string,
+    redirectUri?: string,
+    config?: AuthClientConfig,
+    ctor?: new (tenantId: string, config: Configuration) => T
+): T => {
+    const auth: Configuration['auth'] = {
+        clientId,
+        redirectUri: normalizeUri(redirectUri || ''),
+        navigateToLoginRequestUrl: false,
+        authority: `https://login.microsoftonline.com/${tenantId}`,
+        ...config?.auth,
+    };
+    const cache = { cacheLocation: 'localStorage', ...config?.cache };
+    const system = config?.system;
+    return new (ctor || AuthClient)(tenantId, { auth, cache, system }) as T;
+};
+
+export default createAuthClient;

package/src/client/index.ts

@@ -0,0 +1,6 @@
+export { default, createAuthClient, AuthClientConfig } from './create-auth-client';
+
+export { ConsoleLogger } from './log/console';
+
+export * from './client';
+export * from './request';

package/src/client/log/console.ts

@@ -0,0 +1,55 @@
+import { Logger, LogLevel } from '@azure/msal-browser';
+
+/**
+ * Logger functions of {@link Console}
+ */
+type ConsoleLevel = 'error' | 'warn' | 'info' | 'debug';
+
+/**
+ * MSAL client logger for development, production should use telemetry
+ *
+ * @example
+ * ```typescript
+ * client.setLogger(new ConsoleLogger());
+ * ```
+ */
+export class ConsoleLogger extends Logger {
+    /**
+     * @param logLevel - 0-1-2-3 (error-warning-info-debug) if not provided all records logged
+     */
+    constructor(logLevel?: LogLevel) {
+        super({
+            logLevel,
+            loggerCallback: (...args: [LogLevel, string, boolean]) => this.loggerCallback(...args),
+        });
+    }
+
+    /** @inheritdoc */
+    protected loggerCallback(lvl: LogLevel, msg: string, _containsPii?: boolean): void {
+        console[this.getLogType(lvl)](
+            `%c FUSION::MSAL %c %s`,
+            'border: 1px solid;',
+            'border: none;',
+            msg
+        );
+    }
+
+    /**
+     * Map log level to console log function type
+     */
+    protected getLogType = (lvl: LogLevel): ConsoleLevel => {
+        switch (lvl) {
+            case LogLevel.Error:
+                return 'error';
+            case LogLevel.Warning:
+                return 'warn';
+            case LogLevel.Info:
+                return 'info';
+            case LogLevel.Verbose:
+            default:
+                return 'debug';
+        }
+    };
+}
+
+export default ConsoleLogger;

package/src/client/request.ts

@@ -0,0 +1,66 @@
+import { PopupRequest, RedirectRequest } from '@azure/msal-browser';
+
+/**
+ * Request object passed by user to retrieve a Code from the
+ * server (first leg of authorization code grant flow).
+ *
+ * **scopes**\
+ * Array of scopes the application is requesting access to.
+ *
+ * **authority**\
+ * Url of the authority which the application acquires tokens from.
+ *
+ * **correlationId**\
+ * Unique GUID set per request to trace a request end-to-end for telemetry purposes.
+ *
+ * **redirectUri**\
+ * The redirect URI where authentication responses can be received by your application. It must exactly match one of the redirect URIs registered in the Azure portal.
+ *
+ * **extraScopesToConsent**\
+ * Scopes for a different resource when the user needs consent upfront.
+ *
+ * **responseMode**\
+ * Specifies the method that should be used to send the authentication result to your app. Fragment is the only valid option for msal-browser.
+ *
+ * **codeChallenge**\
+ * Used to secure authorization code grant via Proof of Key for Code Exchange (PKCE). For more information, see the PKCE RCF:https://tools.ietf.org/html/rfc7636
+ *
+ * **codeChallengeMethod**\
+ * The method used to encode the code verifier for the code challenge parameter. Can be "plain" or "S256". If excluded, code challenge is assumed to be plaintext. For more information, see the PKCE RCF: https://tools.ietf.org/html/rfc7636
+ *
+ * **state**\
+ * A value included in the request that is also returned in the token response. A randomly generated unique value is typically used for preventing cross site request forgery attacks. The state is also used to encode information about the user's state in the app before the authentication request occurred.
+ *
+ * **prompt**\
+ * Indicates the type of user interaction that is required.
+ * - login: will force the user to enter their credentials on that request, negating single-sign on
+ * - none:  will ensure that the user isn't presented with any interactive prompt. if request can't be completed via single-sign on, the endpoint will return an interaction_required error
+ * - consent: will the trigger the OAuth consent dialog after the user signs in, asking the user to grant permissions to the app
+ * - select_account: will interrupt single sign-=on providing account selection experience listing all the accounts in session or any remembered accounts or an option to choose to use a different account
+ *
+ * **loginHint**\
+ * Can be used to pre-fill the username/email address field of the sign-in page for the user, if you know the username/email address ahead of time. Often apps use this parameter during re-authentication, having already extracted the username from a previous sign-in using the preferred_username claim.
+ *
+ * **sid**\
+ * Session ID, unique identifier for the session. Available as an optional claim on ID tokens.
+ *
+ * **domainHint**\
+ * Provides a hint about the tenant or domain that the user should use to sign in. The value of the domain hint is a registered domain for the tenant.
+ *
+ * **extraQueryParameters**\
+ * String to string map of custom query parameters.
+ *
+ * **claims**\
+ * In cases where Azure AD tenant admin has enabled conditional access policies, and the policy has not been met, exceptions will contain claims that need to be consented to.
+ *
+ * **nonce**\
+ * A value included in the request that is returned in the id token. A randomly generated unique value is typically used to mitigate replay attacks.
+ *
+ * **redirectStartPage**\
+ * The page that should be returned to after loginRedirect or acquireTokenRedirect.
+ * This should only be used if this is different from the redirectUri and will default to the page that initiates the request.
+ * When the navigateToLoginRequestUrl config option is set to false this parameter will be ignored.
+ *
+ * @see [microsoft-authentication-library-for-js](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser/src/request)
+ */
+export type AuthRequest = PopupRequest | RedirectRequest;

package/src/client/util/browser.ts

@@ -0,0 +1,14 @@
+/**
+ * Redirects browser to provided location
+ * If not redirected by provided timeout, promise is rejected
+ *
+ * @internal
+ *
+ * @param url - endpoint to navigate to
+ * @param timeout - max wait before redirect
+ * @param history - append navigation to history
+ */
+export const redirect = (url: string, timeout = 3000, history?: boolean): Promise<void> => {
+    history ? window.location.assign(url) : window.location.replace(url);
+    return new Promise((_, reject) => setTimeout(reject, timeout));
+};

package/src/client/util/url.ts

@@ -0,0 +1,24 @@
+/**
+ * Creates and normalizes redirect uri.
+ * Strips double and trailing slashes
+ *
+ * @internal
+ *
+ * @param uri - relative path or full url
+ * @param home - base url for relative urls
+ */
+export const normalizeUri = (uri: string, home: string = window.location.origin): string => {
+    uri = uri.match(/^http[s]?/) ? uri : home + uri;
+    const { origin, pathname } = new URL(uri);
+    return origin + pathname.replace(/((?<=[/])[/]+)|\/$/, '');
+};
+
+/**
+ * Compares normalized version of urls
+ *
+ * @internal
+ */
+export const compareOrigin = (a: string, b: string): boolean => {
+    const url = { a: normalizeUri(a), b: normalizeUri(b) };
+    return url.a === url.b;
+};

package/src/configurator.ts

@@ -1,4 +1,4 @@
-import { AuthClientConfig } from '@equinor/fusion-web-msal';
+import { AuthClientConfig } from './client';
 
 export type AuthClientOptions = {
     tenantId: string;

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './configurator';
 export * from './provider';
 export * from './module';
+
 export { default } from './module';

package/src/module.ts

@@ -27,7 +27,9 @@ export const module: MsalModule = {
                 const { scopes = [] } = request;
                 if (scopes.length) {
                     /** TODO should be try catch, check caller for handling */
-                    const token = await modules.auth.acquireToken({ scopes });
+                    const token = await modules.auth.acquireToken({
+                        scopes,
+                    });
                     if (token) {
                         const headers = new Headers(request.headers);
                         headers.set('Authorization', `Bearer ${token.accessToken}`);

package/src/provider.ts

@@ -1,7 +1,4 @@
-import { AuthClient, createAuthClient } from '@equinor/fusion-web-msal';
-
-// TODO
-import { AuthRequest } from '@equinor/fusion-web-msal/dist/request';
+import { AuthClient, createAuthClient, AuthRequest, ConsoleLogger } from './client';
 
 import { IAuthConfigurator, AuthClientOptions } from './configurator';
 
@@ -16,22 +13,45 @@ export declare type AccountInfo = {
 };
 
 export interface IAuthProvider {
-    readonly client: AuthClient;
+    readonly defaultClient: AuthClient;
     readonly defaultConfig: AuthClientOptions | undefined;
-    readonly account: AccountInfo | undefined;
+    readonly defaultAccount: AccountInfo | undefined;
+    /**
+     * Get auth client by registered config name
+     */
+    getClient(name: string): AuthClient;
+    /**
+     * Create auth client by registered config name
+     */
     createClient(name?: string): AuthClient;
-    acquireToken(req: AuthRequest): Promise<{ accessToken: string } | void>;
+    /**
+     * Acquire token from default auth client
+     */
+    acquireToken(req: AuthRequest): ReturnType<AuthClient['acquireToken']>;
+    /**
+     * Acquire access token from default auth client
+     */
     acquireAccessToken(req: AuthRequest): Promise<string | undefined>;
+    /**
+     * Login to default auth client
+     */
     login(): Promise<void>;
+    /**
+     * Handle default client redirect callback
+     */
+    handleRedirect(): ReturnType<AuthClient['handleRedirectPromise']>;
 }
 
+const DEFAULT_CLIENT_NAME = 'default';
+
 export class AuthProvider {
-    get client(): AuthClient {
-        return this.createClient();
+    protected _clients: Record<string, AuthClient> = {};
+    get defaultClient(): AuthClient {
+        return this.getClient(DEFAULT_CLIENT_NAME);
     }
 
-    get account(): AccountInfo | undefined {
-        return this.client.account;
+    get defaultAccount(): AccountInfo | undefined {
+        return this.defaultClient.account;
     }
 
     get defaultConfig(): AuthClientOptions | undefined {
@@ -40,21 +60,42 @@ export class AuthProvider {
 
     constructor(protected _config: IAuthConfigurator) {}
 
+    getClient(name: string): AuthClient {
+        if (!this._clients[name]) {
+            this._clients[name] = this.createClient(name);
+        }
+        return this._clients[name];
+    }
+
     createClient(name?: string): AuthClient {
         const config = name ? this._config.getClientConfig(name) : this._config.defaultConfig;
         if (!config) {
             throw Error('Could not find any config');
         }
-        return createAuthClient(
+        const client = createAuthClient(
             config.tenantId,
             config.clientId,
             config.redirectUri,
             config.config
         );
+        // TODO - fix with log streamer
+        client.setLogger(new ConsoleLogger(3));
+
+        return client;
+    }
+
+    async handleRedirect(): ReturnType<AuthClient['handleRedirectPromise']> {
+        const { redirectUri } = this.defaultConfig || {};
+        if (window.location.pathname === redirectUri) {
+            const url = this.defaultClient.requestOrigin || '';
+            await this.defaultClient.handleRedirectPromise();
+            window.location.replace(url);
+        }
+        return null;
     }
 
-    acquireToken(req: AuthRequest): Promise<{ accessToken: string } | void> {
-        return this.createClient().acquireToken(req);
+    acquireToken(req: AuthRequest): ReturnType<AuthClient['acquireToken']> {
+        return this.defaultClient.acquireToken(req);
     }
 
     async acquireAccessToken(req: AuthRequest): Promise<string | undefined> {
@@ -63,6 +104,6 @@ export class AuthProvider {
     }
 
     async login(): Promise<void> {
-        await this.client.login();
+        await this.defaultClient.login();
     }
 }