Inline authentication

config.js

@@ -1600,6 +1600,8 @@ var config = {
     // An option to get for user info (name, picture, email) in the token outside the user context.
     // Can be used with Firebase tokens.
     // tokenGetUserInfoOutOfContext: false,
+    // An option to pass the token in the iframe API directly instead of using the redirect flow.
+    // tokenAuthInline: false,
 
     // You can put an array of values to target different entity types in the invite dialog.
     // Valid values are "phone", "room", "sip", "user", "videosipgw" and "email"

lang/main.json

@@ -383,6 +383,8 @@
         "lockRoom": "Add meeting $t(lockRoomPassword)",
         "lockTitle": "Lock failed",
         "login": "Login",
+        "loginFailed": "Login failed.",
+        "loginOnResume": "Your authentication session has expired. You need to login again to continue the meeting.",
         "loginQuestion": "Are you sure you want to login and leave the conference?",
         "logoutQuestion": "Are you sure you want to logout and leave the conference?",
         "logoutTitle": "Logout",

react/features/app/actions.any.ts

@@ -119,6 +119,7 @@ export function maybeRedirectToTokenAuthUrl(
 
     // if tokenAuthUrl check jwt if is about to expire go through the url to get new token
     const jwt = state['features/base/jwt'].jwt;
+    const refreshToken = state['features/base/jwt'].refreshToken;
     const expirationDate = getJwtExpirationDate(jwt);
 
     // if there is jwt and its expiration time is less than 3 minutes away
@@ -137,7 +138,8 @@ export function maybeRedirectToTokenAuthUrl(
                 videoMuted
             },
             room,
-            tenant
+            tenant,
+            refreshToken
         )
             .then((tokenAuthServiceUrl: string | undefined) => {
                 if (!tokenAuthServiceUrl) {

react/features/app/getRouteToRender.native.ts

@@ -11,8 +11,9 @@ const route = {
  * store.
  *
  * @param {any} _stateful - Used on web.
+ * @param {any} _dispatch - Used on web.
  * @returns {Promise<Object>}
  */
-export function _getRouteToRender(_stateful?: any) {
+export function _getRouteToRender(_stateful?: any): Promise<object> {
     return Promise.resolve(route);
 }

react/features/app/getRouteToRender.web.ts

@@ -1,13 +1,10 @@
 // @ts-expect-error
 import { generateRoomWithoutSeparator } from '@jitsi/js-utils/random';
 
-import { getTokenAuthUrl } from '../authentication/functions.web';
 import { IStateful } from '../base/app/types';
 import { isRoomValid } from '../base/conference/functions';
 import { isSupportedBrowser } from '../base/environment/environment';
-import { browser } from '../base/lib-jitsi-meet';
 import { toState } from '../base/redux/functions';
-import { parseURIString } from '../base/util/uri';
 import Conference from '../conference/components/web/Conference';
 import { getDeepLinkingPage } from '../deep-linking/functions';
 import UnsupportedDesktopBrowser from '../unsupported-browser/components/UnsupportedDesktopBrowser';
@@ -23,9 +20,10 @@ import { IReduxState } from './types';
  *
  * @param {(Function|Object)} stateful - THe redux store, state, or
  * {@code getState} function.
+ * @param {Dispatch} dispatch - The Redux dispatch function.
  * @returns {Promise<Object>}
  */
-export function _getRouteToRender(stateful: IStateful) {
+export function _getRouteToRender(stateful: IStateful): Promise<object> {
     const state = toState(stateful);
 
     return _getWebConferenceRoute(state) || _getWebWelcomePageRoute(state);
@@ -36,46 +34,17 @@ export function _getRouteToRender(stateful: IStateful) {
  * a valid conference is being joined.
  *
  * @param {Object} state - The redux state.
+ * @param {Dispatch} dispatch - The Redux dispatch function.
  * @returns {Promise|undefined}
  */
-function _getWebConferenceRoute(state: IReduxState) {
+function _getWebConferenceRoute(state: IReduxState): Promise<any> | undefined {
     const room = state['features/base/conference'].room;
 
     if (!isRoomValid(room)) {
         return;
     }
 
     const route = _getEmptyRoute();
-    const config = state['features/base/config'];
-
-    // if we have auto redirect enabled, and we have previously logged in successfully
-    // let's redirect to the auth url to get the token and login again
-    if (!browser.isElectron() && config.tokenAuthUrl && config.tokenAuthUrlAutoRedirect
-            && state['features/authentication'].tokenAuthUrlSuccessful
-            && !state['features/base/jwt'].jwt && room) {
-        const { locationURL = { href: '' } as URL } = state['features/base/connection'];
-        const { tenant } = parseURIString(locationURL.href) || {};
-        const { startAudioOnly } = config;
-
-        return getTokenAuthUrl(
-            config,
-            locationURL,
-            {
-                audioMuted: false,
-                audioOnlyEnabled: startAudioOnly,
-                skipPrejoin: false,
-                videoMuted: false
-            },
-            room,
-            tenant
-        )
-            .then((url: string | undefined) => {
-                route.href = url;
-
-                return route;
-            })
-            .catch(() => Promise.resolve(route));
-    }
 
     // Update the location if it doesn't match. This happens when a room is
     // joined from the welcome page. The reason for doing this instead of using

react/features/authentication/actions.native.ts

@@ -88,3 +88,13 @@ export function openTokenAuthUrl(tokenAuthServiceUrl: string) {
         Linking.openURL(tokenAuthServiceUrl);
     };
 }
+
+/**
+ * Not used.
+ *
+ * @param {string} tokenAuthServiceUrl - Authentication service URL.
+ * @returns {Promise<any>} Resolves.
+ */
+export function loginWithPopup(tokenAuthServiceUrl: string): Promise<any> {
+    return Promise.resolve(tokenAuthServiceUrl);
+}

react/features/authentication/actions.web.ts

@@ -1,10 +1,14 @@
 import { maybeRedirectToWelcomePage } from '../app/actions.web';
 import { IStore } from '../app/types';
 import { openDialog } from '../base/dialog/actions';
+import { setJWT } from '../base/jwt/actions';
 import { browser } from '../base/lib-jitsi-meet';
+import { showErrorNotification } from '../notifications/actions';
 
 import { CANCEL_LOGIN } from './actionTypes';
 import LoginQuestionDialog from './components/web/LoginQuestionDialog';
+import { isTokenAuthInline } from './functions.any';
+import logger from './logger';
 
 export * from './actions.any';
 
@@ -46,6 +50,115 @@ export function redirectToDefaultLocation() {
     return (dispatch: IStore['dispatch']) => dispatch(maybeRedirectToWelcomePage());
 }
 
+/**
+ * Generates a cryptographic nonce.
+ *
+ * @returns {string} The generated nonce.
+ */
+function generateNonce(): string {
+    const array = new Uint8Array(32);
+
+    crypto.getRandomValues(array);
+
+    return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
+}
+
+/**
+ * Performs login with a popup window.
+ *
+ * @param {string} tokenAuthServiceUrl - Authentication service URL.
+ * @returns {Promise<any>} A promise that resolves with the authentication
+ * result or rejects with an error.
+ */
+export function loginWithPopup(tokenAuthServiceUrl: string): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+        // Open popup
+        const width = 500;
+        const height = 600;
+        const left = window.screen.width / 2 - width / 2;
+        const top = window.screen.height / 2 - height / 2;
+
+        const nonce = generateNonce();
+
+        sessionStorage.setItem('oauth_nonce', nonce);
+
+        const popup = window.open(
+            `${tokenAuthServiceUrl}&nonce=${nonce}`,
+            `Auth-${Date.now()}`,
+            `width=${width},height=${height},left=${left},top=${top}`
+        );
+
+        if (!popup) {
+            reject(new Error('Popup blocked'));
+
+            return;
+        }
+
+        const cleanup = (handler: any) => {
+            window.removeEventListener('message', handler);
+            popup.close();
+
+            sessionStorage.removeItem('oauth_nonce');
+        };
+
+        // @ts-ignore
+        const handler = event => {
+            // Verify origin
+            if (event.origin !== window.location.origin) {
+                return;
+            }
+
+            if (event.data.type === 'oauth-success') {
+                cleanup(handler);
+
+                resolve({
+                    accessToken: event.data.accessToken,
+                    idToken: event.data.idToken,
+                    refreshToken: event.data.refreshToken
+                });
+            } else if (event.data.type === 'oauth-error') {
+                cleanup(handler);
+
+                reject(new Error(event.data.error));
+            }
+        };
+
+        // Listen for messages from the popup
+        window.addEventListener('message', handler);
+    });
+}
+
+/**
+ * Performs silent logout by loading the token authentication logout service URL in an
+ * invisible iframe.
+ *
+ * @param {string} tokenAuthLogoutServiceUrl - Logout service URL.
+ * @returns {Promise<any>} A promise that resolves when logout is complete.
+ */
+export function silentLogout(tokenAuthLogoutServiceUrl: string): any {
+    return new Promise<void>(resolve => {
+        const iframe = document.createElement('iframe');
+
+        iframe.style.display = 'none';
+        iframe.src = tokenAuthLogoutServiceUrl;
+        document.body.appendChild(iframe);
+
+        // Listen for logout completion
+        const handler = (event: any) => {
+            if (event.origin !== window.location.origin) return;
+
+            if (event.data.type === 'logout-success') {
+                window.removeEventListener('message', handler);
+                document.body.removeChild(iframe);
+
+                resolve();
+            }
+        };
+
+        window.addEventListener('message', handler);
+    });
+}
+
 /**
  * Opens token auth URL page.
  *
@@ -63,6 +176,42 @@ export function openTokenAuthUrl(tokenAuthServiceUrl: string): any {
             }
         };
 
+        if (!browser.isElectron() && isTokenAuthInline(getState()['features/base/config'])) {
+            loginWithPopup(tokenAuthServiceUrl)
+                .then((result: { accessToken: string; idToken: string; refreshToken?: string; }) => {
+                    // @ts-ignore
+                    const token: string = result.accessToken;
+                    const idToken: string = result.idToken;
+                    const refreshToken: string | undefined = result.refreshToken;
+
+                    // @ts-ignore
+                    dispatch(setJWT(token, idToken, refreshToken));
+
+                    logger.info('Reconnecting to conference with new token.');
+
+                    const { connection } = getState()['features/base/connection'];
+
+                    connection?.refreshToken(token).then(
+                        () => {
+                            const { membersOnly } = getState()['features/base/conference'];
+
+                            membersOnly?.join();
+                        })
+                        .catch((err: any) => {
+                            dispatch(setJWT());
+                            logger.error(err);
+                        });
+                })
+                .catch(err => {
+                    dispatch(showErrorNotification({
+                        titleKey: 'dialog.loginFailed'
+                    }));
+                    logger.error(err);
+                });
+
+            return;
+        }
+
         // Show warning for leaving conference only when in a conference.
         if (!browser.isElectron() && getState()['features/base/conference'].conference) {
             dispatch(openDialog('LoginQuestionDialog', LoginQuestionDialog, {

react/features/authentication/functions.any.ts

@@ -11,6 +11,15 @@ import { getBackendSafeRoomName } from '../base/util/uri';
 export const isTokenAuthEnabled = (config: IConfig): boolean =>
     typeof config.tokenAuthUrl === 'string' && config.tokenAuthUrl.length > 0;
 
+/**
+ * Checks if the token authentication should be done inline.
+ *
+ * @param {Object} config - Configuration state object from store.
+ * @returns {boolean}
+ */
+export const isTokenAuthInline = (config: IConfig): boolean =>
+    config.tokenAuthInline === true;
+
 /**
  * Returns the state that we can add as a parameter to the tokenAuthUrl.
  *
@@ -23,6 +32,7 @@ export const isTokenAuthEnabled = (config: IConfig): boolean =>
  * }.
  * @param {string?} roomName - The room name.
  * @param {string?} tenant - The tenant name if any.
+ * @param {string?} refreshToken - The refresh token if available.
  *
  * @returns {Object} The state object.
  */
@@ -35,13 +45,18 @@ export const _getTokenAuthState = (
             videoMuted: boolean | undefined;
         },
         roomName: string | undefined,
-        tenant: string | undefined): object => {
-    const state = {
+        tenant: string | undefined,
+        refreshToken?: string | undefined): object => {
+    const state: any = {
         room: roomName,
         roomSafe: getBackendSafeRoomName(roomName),
         tenant
     };
 
+    if (refreshToken) {
+        state.refreshToken = refreshToken;
+    }
+
     const {
         audioMuted = false,
         audioOnlyEnabled = false,

react/features/authentication/functions.native.ts

@@ -23,6 +23,7 @@ export * from './functions.any';
  * }.
  * @param {string?} roomName - The room name.
  * @param {string?} tenant - The tenant name if any.
+ * @param {string?} refreshToken - The refreshToken if any.
  *
  * @returns {Promise<string|undefined>} - The URL pointing to JWT login service or
  * <tt>undefined</tt> if the pattern stored in config is not a string and the URL can not be
@@ -39,7 +40,9 @@ export const getTokenAuthUrl = (
         },
         roomName: string | undefined,
         // eslint-disable-next-line max-params
-        tenant: string | undefined): Promise<string | undefined> => {
+        tenant: string | undefined,
+        // eslint-disable-next-line max-params
+        refreshToken?: string | undefined): Promise<string | undefined> => {
 
     const {
         audioMuted = false,
@@ -64,7 +67,8 @@ export const getTokenAuthUrl = (
                 videoMuted
             },
             roomName,
-            tenant
+            tenant,
+            refreshToken
         );
 
         // Append ios=true or android=true to the token URL.