Extending AuthProviders

[antonigiske]

How would we go about extending authProviders.js with our own custom provider without editing the authProviders.js in the node_modules folder?

[auser]

Hm. Good question. I haven't thought of that before. Perhaps we either add a "custom" support auth provider... How would you see the API?

[mistenkt]

I wrote a simple implementation of this. #70

[alex-ochigov]

It doesn't work.
Here my example

import OAuthManager from 'react-native-oauth';
import { CLIENT_ID, CLIENT_SECRET } from 'constants/secrets';

export const manager = new OAuthManager('dribbble');

const provider = {
  'dribbble': {
    auth_version: '2.0',
    authorize_url: 'https://dribbble.com/oauth/authorize',
    access_token_url: 'https://dribbble.com/oauth/token',
    client_id: CLIENT_ID,
    client_secret: CLIENT_SECRET,
    callback_url: `dribbble://oauth`,
  }
};

manager.addProvider(provider);

    manager.authorize('dribbble')
      .then(resp => console.log(resp))
      .catch(err => console.log(err));

I receive an error message with 'Unknown Provider'

[mistenkt]

Have you done manager.configure() ?

[alex-ochigov]

Yes, but it gives another error that provider is not supported. Anyway I added provider manually

[mistenkt]

Well i havent tried it with dribbble, but i am using it with an oauth implementation on one of our own services.

const manager = new OAuthManager('appname');

manager.addProvider({
    'ourProviderName': {
        auth_version: '2.0',
        authorize_url: 'https://.....',
        access_token_url: 'https://.....',
        callback_url: ({app_name}) => `${app_name}://oauth`,
    }
});

manager.configure({
    ourProviderName: {
        client_id: 'xxx',
        client_secret: 'xxx'
    }
});

Class Login extends React.Component {
    ....

    doLogin() {
        manager.authorize('ourProviderName')
            .then(res => {
                ...
            })
    }
}

and its working fine

[alex-ochigov]

Thanks, I will check again

[auser]

Hm... not sure how this would work with the native backend. Perhaps we can abstract out a generic one that handles 1.0 and 2.0 providers in a generic way?

[alex-ochigov]

I tried again

services/oauth.js

import OAuthManager from 'react-native-oauth';
import { CLIENT_ID, CLIENT_SECRET } from 'constants/secrets';

const manager = new OAuthManager('Dribbble');

manager.addProvider({
  'dribbble': {
    auth_version: '2.0',
    authorize_url: 'https://dribbble.com/oauth/authorize',
    access_token_url: 'https://dribbble.com/oauth/token',
    callback_url: ({app_name}) => `${app_name}://oauth`,
  }
});

manager.configure({
  dribbble: {
    client_id: CLIENT_ID,
    client_secret: CLIENT_SECRET
  }
});

export const oauth = {
  authorize: () => {
    return new Promise(resolve => {
      manager.authorize('dribbble')
        .then(data => resolve({ response: data, error: null }))
        .catch(error => resolve({ response: null, error }))
    });
  }
}

auth component

import { oauth } from 'services/oauth';

class AuthScreen extends Component {

  handleOAuth() {
    oauth.authorize()
  }

....

Error: The provider dribbble is not support yet.

[ThatOneAwkwardGuy]

i keep getting manager.addProvider is not a function, any help on this?

[rajchourasia]

@ThatOneAwkwardGuy I think you must have used npm to install "react-native-oauth". The version of "react-native-oauth" installed using nmp is 2.1.16 and the version which shows up on github is 2.1.15. (see #80)

The fix for adding custom providers is not present in version 2.1.16

Even after getting the correct version with fix for custom provider i.e. 2.1.15 there was a problem as faced by @alex-nask, I have create a PR for that (#86)

Using version 2.1.15 with the fix in PR #86 solves the issue

[ThatOneAwkwardGuy]

Got past the addProvider not a function problem, but now im getting the "The provider is not supported yet" error, even with your fix in #86

[mistenkt]

I'll have a look at it tomorrow.

…

Sent from my iPhone

On 11 Mar 2017, at 21:41, Moyo George ***@***.***> wrote: Got past the addProvider not a function problem, but now im getting the "The provider is not supported yet" error, even with your fix in #86 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[rajchourasia]

@ThatOneAwkwardGuy the fix should work as its simple and I am using the same. Can you enable "Remote Js Debugging" and check the file "react-native-oauth.js" to make sure that correct code is loading for you.

It should look something like

[ThatOneAwkwardGuy]

This is what i have.