OAuth2 in electron application in current window

Question

I'm trying to implement OAuth2 authentication in Angular 2 ( Electron ) application.

I achieve that on the way with a popup that is called after user click on 'Sign In' button.

In popup user types their credentials and allows the access and on confirm code is returned and I'm able to catch redirect request which I can't do without popup.

Here is implementation that works:

return Observable.create((observer: Observer<any>) => {


      let authWindow = new electron.remote.BrowserWindow({ show: false, webPreferences: {
      nodeIntegration: false
      } });

      authWindow.maximize();
        const authUrl = AUTHORIZATION_WITH_PROOF_KEY_URL
            + `?client_id=${CLIENT_ID}&response_type=code&scope=api_search&`
            + `redirect_uri=${REDIRECT_URL}&code_challenge=${challenge}&code_challenge_method=S256`;

      if (this.clearStorage) {
        authWindow.webContents.session.clearStorageData({}, () => {
          this.clearStorage = false;
          authWindow.loadURL(authUrl);
          authWindow.show();
        });
      } else {
        authWindow.loadURL(authUrl);
        authWindow.show();
      }

      authWindow.webContents.on('did-get-redirect-request', (event, oldUrl, newUrl) => {
        const code = this.getCode(newUrl, authWindow);

        if (!code) {
          this.clearStorage = true;
          return;
        }

        this.requestToken({
          grant_type: 'authorization_code',
          code: code,
          code_verifier: verifier,
          redirect_uri: REDIRECT_URL
        })
          .subscribe((response: { access_token: string, refresh_token: string }) => {
            observer.next(response);
          });
      });

      // Reset the authWindow on close
      authWindow.on('close', () => {
        authWindow = null;
      });
    });

and as you can see in above code I'm creating new BrowserWindow with:

new electron.remote.BrowserWindow({ show: false, webPreferences: {
      nodeIntegration: false
      } });

and with that approach I'm able to catch up redirect request with a block of code that starts with:

authWindow.webContents.on('did-get-redirect-request', (event, oldUrl, newUrl) => {
       ....
    }

but I'm not able to solve this without popup ( modal ).

Here is my attempt:

return Observable.create((observer: Observer<any>) => {


      let authWindow = electron.remote.getCurrentWindow();

        const authUrl = AUTHORIZATION_WITH_PROOF_KEY_URL
            + `?client_id=${CLIENT_ID}&response_type=code&scope=api_search&`
            + `redirect_uri=${REDIRECT_URL}&code_challenge=${challenge}&code_challenge_method=S256`;

      if (this.clearStorage) {
        authWindow.webContents.session.clearStorageData({}, () => {
          this.clearStorage = false;
          authWindow.loadURL(authUrl);
        });
      } else {
        authWindow.loadURL(authUrl);
      }

      authWindow.webContents.on('did-get-redirect-request', (event, oldUrl, newUrl) => {
        debugger;
        // this is not called, I'm not able to catch up redirect request
      });

      // Reset the authWindow on close
      authWindow.on('close', () => {
        authWindow = null;
      });
    });

With my approach I get login screen from remote URL in a current window, but the problem is that I'm not able to catch redirect request with ('did-get-redirect-request') event.

I also tried with 'will-navigate' and many others.

Answer 1

Although I don't have a direct answer I thought I'd point you to Google's AppAuth-JS libraries, which cover OAuth based usage for Electron Apps.

My company have used AppAuth libraries for the mobile case and they worked very well for us, so that we wrote less security code ourselves and avoided vulnerabilities.

There is also an Electron Code Sample which I hope will give you some hints for solving your problem.