Sign out web view not closing automattically on React Native Authentication with Azure AD

Question

I have a react native app that uses the react-native-azure-auth library for B2B and B2C authentication on Azure AD. The MFA sign in works as expected but after the successful logout , the web view saying you have successfully signed out remains open and does not go back to the mobile app. It needs to be manually closed by the user to go back to the mobile app. This happens for only for the B2B sign-in. using B2C on the same library automatically closes the sign out web view/window.

I also checked out the other libraries similar to it but either they need to revoke access or id tokens for logging out which is not applicable in AAD or they are explicitly for B2C only. I have also tried if its possible to forcibly close the webview/window or put the mobile app in foreground but so far I am not successful.

This has been raised with the library contributors and I got a response that this is more of a Microsoft behavior.

Is there a work around for this ? or is this an actual issue?

Answer 1

Hi @Evasco, Jerome Marvin , what does your code look like? If you're using redirects properly it should work: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react#sign-out-using-redirects

You said this was raised with contributors, was this on a forum that you could link? I assume this is a bug but need a little more information first! Please let me know and I can help you further.

Best,
James

Answer 2

@James Hamil , first of all thank you for replying to my post.

I am not using redirects on the logout since what I have is implemented on React Native which is for mobile apps.

Here's the link where I raised what I encountered to the authors of the library.

https://github.com/vmurin/react-native-azure-auth/issues/122#issuecomment-887259715.

I also assumed that this might be a bug in the library that was used but I was told different. This is also not confirmed as a bug or issue on Azure or Microsoft so I want to reach out here first.

The logout code is very much the same as what is shown in the read me or example of the library that I used. The _onLogout routine is called when the user taps the logout button in the mobile app, below is the simplified code.

import React, { Component } from 'react';  
import { AppRegistry } from 'react-native';  
import AzureAuth from 'react-native-azure-auth';  
import  AsyncStorage  from '@react-native-async-storage/async-storage';  
  
  
const _clientId="some client id"  
const _tenant = 'some tenant id'  
const _redirectURI = 'com.somename://com.somename/ios/callback'  
  
  
const azureAuth = new AzureAuth({  
  clientId: _clientId,  
  tenant: _tenant,  
  redirectUri: _redirectURI  
});  
  
  
  export default class AzureAuthentication extends Component {  
    constructor(props) {  
      super(props);  
      this.state = { accessToken: null, user: '' , mails: [], userId: ''};  
    }  
    
    _onLogin = async () => {  
      try   
      {  
        let tokens = await azureAuth.webAuth.authorize({scope: 'openid profile User.Read', prompt: 'login'})  
        this.setState({ accessToken: tokens.accessToken });  
        let info = await azureAuth.auth.msGraphRequest({token: tokens.accessToken, path: 'me'})         
          
        var displayName = info.surname + ", " + info.givenName;  
  
  
      }   
      catch (error)  
      {  
        console.log('Error during Azure operation', error);  
      }  
    }  
    _onLogout = () => {  
      azureAuth.webAuth  
        .clearSession({closeOnLoad: true})  
        .then(success => {  
          this.setState({ accessToken: null, user: null });  
        })  
        .catch(error => console.log(error));  
      AsyncStorage.clear();    
    };  
  }  
    
AppRegistry.registerComponent('AzureAuthentication', () => AzureAuthentication);  

Below is the code when the logout button is tapped by the user.

  const logout = async () =>   
  {  
    try   
    {  
      navigation.navigate("LoginPage");  
      var _azureAuth = new azureAuth();  
      _azureAuth._onLogout();  
  
    }   
    catch (e)   
    {  
      console.log (e.message);  
    }  
  };