OAuth2 in electron application in current window

Viewed 1924

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.

1 Answers
Related