handleAuthorizationResult, response is 'nil' on iOS #103

yassinejebli · 2020-06-12T11:20:22Z

Capacitor version:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 2.2.0

  @capacitor/core: 2.2.0

  @capacitor/android: 2.2.0

  @capacitor/electron: 2.2.0

  @capacitor/ios: 2.2.0

Installed Dependencies:

  @capacitor/electron not installed


  @capacitor/cli 2.2.0

  @capacitor/core 2.2.0

  @capacitor/ios 2.2.0

  @capacitor/android 2.2.0

[success] Android looking great! 👌
  Found 4 Capacitor plugins for ios:
    @byteowls/capacitor-oauth2 (2.0.0)
    cordova-plugin-buildinfo (4.0.0)
    cordova-plugin-file (6.0.2)
    cordova-plugin-advanced-http (2.4.1)
[success] iOS looking great! 👌

Library version:

2.0.0

OAuth Provider:

Other: https://stoic-leavitt-eb1e9f.netlify.app
it's just a simple html page with some script to redirect back to the app with data like access_token, userId, firstName...

(function() {
        const url = new URL(window.location.href);
        const state = url.searchParams.get("state");
        const redirectUri = url.searchParams.get("redirect_uri");

        window.location.href = redirectUri+"#access_token=123&state="+state+"&userId=123&firstName=Yassine"
      })()

Normally there should be a webview in the backend side that will redirect the mobile user to an auth provider which can be accessible only by that backend (whitelisted backend IP) then after successful login backend should send back the received data from that Auth provider.

Your Plugin Configuration

const redirectUrlMobile = window.BuildInfo?.packageName+":/"
    OAuth2Client.authenticate(
      {
        appId: window.BuildInfo?.packageName||"xx.xxx.xxxx",
        state: makeId(20),
        authorizationBaseUrl: "https://stoic-leavitt-eb1e9f.netlify.app",
        responseType: "token",
        web:{
          redirectUrl: "http://localhost:8080", // for dev
          windowOptions: "width=500,height=600,left=0,top=0",
        },
        android: {
          redirectUrl: redirectUrlMobile,
        },
        ios:{
          redirectUrl: redirectUrlMobile,
        },
      }
    ).then(response => {
      console.log({response})
    }).catch(error => {
      console.error("OAuth rejected", error);
    });

The text was updated successfully, but these errors were encountered:

moberwasserlechner · 2020-06-15T08:59:06Z

Hi @yassinejebli,

the plugin needs a oauth2 server that follow the specs. The plugin is very generic and tries to support as much providers as possible but it needs a well implemented oauth2 server.

I clicked on the link provided and it might be a good idea to have a look at the /null? part and discover why this is null. Moreover you set a state but do not return it.

https://stoic-leavitt-eb1e9f.netlify.app/null?access_token=123&state=null&userId=1234&firstName=Yassine&lastName=Jebli&code=1

I am certain that you understand that it is out of scope to debug your server side.

yassinejebli · 2020-06-15T11:32:47Z

@moberwasserlechner thanks for responding.

I think you should add in the url redirect_uri param as well as state.

something like
https://stoic-leavitt-eb1e9f.netlify.app/?redirect_uri=<auth_provider_uri>&state=<generated_state_in_frontend>&<...other params generated by capacitor-oauth2 plugin from configs (response type...)>

I think you got that link because you tested it out of context (directly on browser), to reproduce the issue it should be tested with in the plugin, redirection works fine on Android & on browser for me.

Alternative solution could be using Plugins.App.addListener('appUrlOpen', callback), but as I'm willing in the future to use your plugin for Google & FB auth it would be great if it's possible to use it with whatever auth provider.

That page I hosted on netlify is just an HTML file which mocks the behaviour of an auth provider, code below

<html>
<head>
    <title>Test Auth</title>
</head>
<body>
    <script>
      (function() {
        const url = new URL(window.location.href);
        const state = url.searchParams.get("state");
        const redirectUri = url.searchParams.get("redirect_uri");

        window.location.replace(redirectUri+"?access_token=123&state="+state+"&userId=1234&firstName=Yassine&lastName=Jebli")
      })()
    </script>
</body>
</html>

moberwasserlechner · 2020-06-15T12:05:16Z

I think you got that link because you tested it out of context (directly on browser), to reproduce the issue it should be tested with in the plugin, redirection works fine on Android & on browser for me.

You're right of course.

moberwasserlechner · 2020-06-15T12:09:53Z

I mark this as a bug for now, because it works on web and Android. Although I'm unsure because you mock the backend.

vmdominguez-usaa · 2020-11-17T17:26:29Z

I saw this same behavior when trying to authorize using the implicit flow. I tweaked part of the handleAuthorizationResult function locally to get it working:

} else if let responseData = response?.data {
  do {
    let jsonObj = try JSONSerialization.jsonObject(with: responseData, options: []) as! JSObject
    call.resolve(jsonObj)
  } catch {
    self.log("Invalid json in response \(error.localizedDescription)")
    call.reject(self.ERR_GENERAL)
  }
} else {
  call.resolve(parameters) // not sure if parameters is what should be passed, but it contains the access_token
}

korywkoch · 2021-01-26T18:01:28Z

I saw this same behavior when trying to authorize using the implicit flow. I tweaked part of the handleAuthorizationResult function locally to get it working:

} else if let responseData = response?.data {
  do {
    let jsonObj = try JSONSerialization.jsonObject(with: responseData, options: []) as! JSObject
    call.resolve(jsonObj)
  } catch {
    self.log("Invalid json in response \(error.localizedDescription)")
    call.reject(self.ERR_GENERAL)
  }
} else {
  call.resolve(parameters) // not sure if parameters is what should be passed, but it contains the access_token
}

I implemented a similar workaround locally as well. You should create a PR vmdominguez-usaa and bask in open source accolades!

moberwasserlechner added the support label Jun 15, 2020

moberwasserlechner added invalid This doesn't seem right and removed invalid This doesn't seem right labels Jun 15, 2020

moberwasserlechner added ios and removed support labels Jun 15, 2020

moberwasserlechner added the bug Something isn't working label Jun 15, 2020

moberwasserlechner added this to the 2.1.0 milestone Jun 15, 2020

moberwasserlechner removed this from the 2.1.0 milestone Aug 27, 2020

vmdominguez mentioned this issue Jul 9, 2021

Fix authorization flow failing on iOS when server response has no data #161

Merged

moberwasserlechner closed this as completed in #161 Jul 9, 2021

moberwasserlechner added this to the 3.0.0 milestone Jul 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

handleAuthorizationResult, response is 'nil' on iOS #103

handleAuthorizationResult, response is 'nil' on iOS #103

yassinejebli commented Jun 12, 2020

moberwasserlechner commented Jun 15, 2020

yassinejebli commented Jun 15, 2020 •

edited

Loading

moberwasserlechner commented Jun 15, 2020 •

edited

Loading

moberwasserlechner commented Jun 15, 2020

vmdominguez-usaa commented Nov 17, 2020 •

edited

Loading

korywkoch commented Jan 26, 2021

handleAuthorizationResult, response is 'nil' on iOS #103

handleAuthorizationResult, response is 'nil' on iOS #103

Comments

yassinejebli commented Jun 12, 2020

Capacitor version:

Library version:

OAuth Provider:

Your Plugin Configuration

moberwasserlechner commented Jun 15, 2020

yassinejebli commented Jun 15, 2020 • edited Loading

moberwasserlechner commented Jun 15, 2020 • edited Loading

moberwasserlechner commented Jun 15, 2020

vmdominguez-usaa commented Nov 17, 2020 • edited Loading

korywkoch commented Jan 26, 2021

yassinejebli commented Jun 15, 2020 •

edited

Loading

moberwasserlechner commented Jun 15, 2020 •

edited

Loading

vmdominguez-usaa commented Nov 17, 2020 •

edited

Loading