React-native-app-auth: LinkedIn integration issues

[ahaider48]

Hello,

I am trying to integrate Linkedin to work with this library and I am having a few issues.

The project I am working on, requires me to get the accessToken from LinkedIn and send it to my backend to be exchanged for another token.

Linkedin has their own native Android and iOS sdk which they recommend that mobile users integrate, but the issue with these are that:
1) The access token can only be used via the sdk and can't be passed to the backend to make requests
2) It requires the mobile user to download the LinkedIn app locally first (i.e. no login via a webpage!)

As such, I am forced to use their normal Web Oauth 2 flow, which uses the web form to login and the access token retrieved can be used anywhere.

The only issue is that LinkedIn doesn't allow url schemes (e.g. com.site.app:/oauth2redirect) to be used as call back urls.

To get around this, on my node/express backend I created a special call back route (e.g. https://site.com/app/oauth2redirect) that just redirects any requests it receives along with all the query params (token, state, etc) to my app scheme URL (e.g. com.site.app:/oauth2redirect). I provided this url to Linkedin as my allowed redirect url and used it to configure the auth request on the app.

This approach worked in that on my iOS/Android, the redirect was happening properly (I tried launching the maps app to test this and it worked!). However, the promise to authorize() was not being resolved after the redirect.

I am not sure why the call just hangs. I can successfully retrieve the "authorization code" but for whatever reason, I feel that the library doesn't see the app loading via the url scheme after the in-app browser closes and whatever function that is supposed to be called then is not triggered! I think that maybe my redirect doesn't behave the way a direct redirect from auth provider does. In android, I get the error message Failed exchange token (iOS no error) which probably means that my URL scheme/intent in the format of com.site.app:/oauth2redirect?code&state isn't picked up the same way as others!

I tried also using Universal Links on iOS instead and I observed a similar issue, albeit, in this approach, I feel that the way universal links are handled are different than url scheme and hence that's why it wasn't working!

I was wondering if anyone has tried any of these two approaches with LinkedIn and knows why the promise doesn't resolve after the redirect. Maybe I am doing something wrong or I need to modify my appDelegate.m for this use case? (especially for universal link approach!)

I am trying to make it work with url schemes and the redirect. I followed all the instructions in the setup. I can successfully authenticate with Google on iOS/Android. So my setup looks fine. Only LinkedIn authentication fails.

This is my callback function/config for the button:

onLinkedinLogin = async () => {
    const config = {
      serviceConfiguration: {
        authorizationEndpoint: 'https://www.linkedin.com/oauth/v2/authorization',
        tokenEndpoint: 'https://www.linkedin.com/oauth/v2/accessToken',
      },
      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,
      redirectUrl: 'http://localhost:8080/app/oauth2redirect', // on the server this redirects to `com.site.app:/oauth2redirect`
      scopes: ['r_basicprofile', 'r_emailaddress'],
    };

    try {
      const { accessToken } = await authorize(config);
      console.log('accessToken', accessToken);
    } catch (err) {
      console.error(err);
    }
  }

A few things to note:

• For now, I am okay with using the secret here (like I said the sdk generated tokens can't be used in the backend)
• I already have Google authentication set up and its working on both iOS and Android
• The authorize() promise never resloves after the in-app browser closes after a successful login in iOS and in Android I get the error Failed exchange token.

Can this be done with this library? Any alternatives/issues with my approach?

Any help/comment with issue issue would be appriciated.

P.S. I wish we could just have a way to get the authorization code only with this library and let the backend exchange it for the token as suggested here.

[ahaider48]

As an update, I think the cause of my issue is related to https://github.com/openid/AppAuth-iOS/issues/232

[Petemir]

@ahaider48 I'm sorry to interfere but I have one question. You mention that you have Google authentication set up and its working, does it follow the same flow? Redirecting the user to your backend, and from there using deeplinks/universal links to your app? Because I am trying that and I cannot do it because I don't have the PKCE code_verifier in the backend to make the exchange with the authorization code for the access token...

Thanks!

[ahaider48]

@Petemir Sorry, no. I am using this approach only for LinkedIn (with deep links/url schemes). I couldn't use this library for LinkedIn.

For Google, I am just using whatever was suggested by this library to get the accessToken and I send it to the backend for any other auth work!

[kadikraman]

Hi @ahaider48 thanks for your very detailed bug report!

As we're just wrapping the native iOS and Android libraries, we try to limit ourselves to the functionality they provide. As you pointed out above, it looks like the underlying issue is with AppAuth-iOS. So you could try forking their library, apply the patch (as detailed in the issue you linked to) and use your own fork of the library in your app. The native Pod is installed separately anyway so you can easily use your own version of the native libraries, e.g.

pod 'AppAuth', :git => 'https://github.com/<user>/AppAuth-iOS.git'

[Rajesh7890]

Can anyone have the idea of how to resolve authorize() when redirect to a server url

[andresubri]

You can redirect to your app from the server @Rajesh7890

[sabaakmal023]

Hello,

I am trying to integrate Linkedin to work with this library and I am having a few issues.

The project I am working on, requires me to get the accessToken from LinkedIn and send it to my backend to be exchanged for another token.

Linkedin has their own native Android and iOS sdk which they recommend that mobile users integrate, but the issue with these are that:

1. The access token can only be used via the sdk and can't be passed to the backend to make requests
2. It requires the mobile user to download the LinkedIn app locally first (i.e. no login via a webpage!)

As such, I am forced to use their normal Web Oauth 2 flow, which uses the web form to login and the access token retrieved can be used anywhere.

The only issue is that LinkedIn doesn't allow url schemes (e.g. com.site.app:/oauth2redirect) to be used as call back urls.

To get around this, on my node/express backend I created a special call back route (e.g. https://site.com/app/oauth2redirect) that just redirects any requests it receives along with all the query params (token, state, etc) to my app scheme URL (e.g. com.site.app:/oauth2redirect). I provided this url to Linkedin as my allowed redirect url and used it to configure the auth request on the app.

This approach worked in that on my iOS/Android, the redirect was happening properly (I tried launching the maps app to test this and it worked!). However, the promise to authorize() was not being resolved after the redirect.

I am not sure why the call just hangs. I can successfully retrieve the "authorization code" but for whatever reason, ~I feel that the library doesn't see the app loading via the url scheme after the in-app browser closes and whatever function that is supposed to be called then is not triggered!~ I think that maybe my redirect doesn't behave the way a direct redirect from auth provider does. In android, I get the error message Failed exchange token (iOS no error) which probably means that my URL scheme/intent in the format of com.site.app:/oauth2redirect?code&state isn't picked up the same way as others!

I tried also using Universal Links on iOS instead and I observed a similar issue, albeit, in this approach, I feel that the way universal links are handled are different than url scheme and hence that's why it wasn't working!

I was wondering if anyone has tried any of these two approaches with LinkedIn and knows why the promise doesn't resolve after the redirect. Maybe I am doing something wrong or I need to modify my appDelegate.m for this use case? (especially for universal link approach!)

I am trying to make it work with url schemes and the redirect. I followed all the instructions in the setup. I can successfully authenticate with Google on iOS/Android. So my setup looks fine. Only LinkedIn authentication fails.

This is my callback function/config for the button:

onLinkedinLogin = async () => {
    const config = {
      serviceConfiguration: {
        authorizationEndpoint: 'https://www.linkedin.com/oauth/v2/authorization',
        tokenEndpoint: 'https://www.linkedin.com/oauth/v2/accessToken',
      },
      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,
      redirectUrl: 'http://localhost:8080/app/oauth2redirect', // on the server this redirects to `com.site.app:/oauth2redirect`
      scopes: ['r_basicprofile', 'r_emailaddress'],
    };

    try {
      const { accessToken } = await authorize(config);
      console.log('accessToken', accessToken);
    } catch (err) {
      console.error(err);
    }
  }

A few things to note:

• For now, I am okay with using the secret here (like I said the sdk generated tokens can't be used in the backend)
• I already have Google authentication set up and its working on both iOS and Android
• The authorize() promise never resloves after the in-app browser closes after a successful login in iOS and in Android I get the error Failed exchange token.

Can this be done with this library? Any alternatives/issues with my approach?

Any help/comment with issue issue would be appriciated.

P.S. I wish we could just have a way to get the authorization code only with this library and let the backend exchange it for the token as suggested here.

any suggestion to resolve this issues?