Support for react native apps

[sattaman]

I am currently implementing oauth in RN . Opening the browser window and saving to storage would both need to be done through React Native's apis. Is this something within the scope of this library?

[maxmantz]

Excuse my act of shameless self-promotion. This library binds oidc-client to ReactJS / redux. I designed it to be browser independent, so in theory this will work. With the release of oidc-client 1.3.0 this library stopped depending on browsers for the core functionality. Haven't yet had the time to implement it in react-native, but would love to in the near future. Feel free to use my library or look at the code to get an idea of how to implement it in React.

[brockallen]

Yes, please use @maxmantz's library for react. Helping his library helps and promotes this library.

[sattaman]

Thanks for your recommendations. I'm not actually using redux at the moment, but it looks like this library should work perfectly, I didnt realise it was already independent of a browser.

However, I'm getting an error when trying to use this library with React Native.

I've not got it working yet but perhaps something along the following lines is needed?goatslacker/alt#558

[brockallen]

Unfortunately I know nothing about react, so you'd have to take that up on their issue tracker.

[sattaman]

Reproduction steps

npm install -g create-react-native-app
create-react-native-app my-app
cd my-app/
npm i --save oidc-client

add an import in App.js - import 'oidc-client'
npm start

It is something to do with the way this library is packaged on NPM. I haven't managed to get it working yet.

[brockallen]

Is this relevant: https://github.com/IdentityModel/oidc-client-js#install

[sattaman]

I don't think so , I've made progress since my last question and the integration is largely working.

There will be a change needed to this repo to add .babelrc to the .npmignore file.

//PopUpNavigator 
import { Linking } from 'react-native';

export default class PopupNavigator {
  prepare(params) {
    return Promise.resolve({
      navigate: ({ url }) => Linking.openURL(url),
    });
  }
  callback(url, keepOpen, delimiter) {
    return Promise.resolve({ url });
  }
}

///Store
import { AsyncStorage } from 'react-native';

export default class {
  static test() {
    console.log('my test');
    return 'test return';
  }
  set(key, value) {
    key = this._prefix + key;
    return AsyncStorage.setItem(key, value);
  }

  get(key) {
    key = this._prefix + key;
    return AsyncStorage.getItem(key);
  }

  remove(key) {
    key = this._prefix + key;
    return AsyncStorage.removeItem(key);
  }

  getAllKeys() {
    return AsyncStorage.getAllKeys();
  }
}

//index
const settings = {
  authority: 'https://dev-ids.xxx.co.uk:4443/idsrv',
  client_id: 'xxx',
  redirect_uri: 'com.xxx://authredirect',
  post_logout_redirect_uri: 'com.xxx://logout',
  response_type: 'id_token token',
  scope: 'openid xxx',
  loadUserInfo: false,
  popupNavigator: new PopupNavigator(),
  userStore: new Store(),
  stateStore: new Store(),
};

const mgr = new UserManager(settings);

export const login = () => {
  mgr.signinPopup();

  const onLinkChange = ({ url }) => {
    Linking.removeEventListener('url', onLinkChange);

    console.log('oidc login onLinkChange', url);
    mgr.signinPopupCallback(url);
  };

  Linking.addEventListener('url', onLinkChange);
};

[sattaman]

The error I'm getting now is undefined is not an object evaulating navResponse.url.. In fact I'm just wondering whether I should have called mgr.signinPopupCallback({ url }); .. getting close!

[brockallen]

The light sample might help: https://github.com/IdentityModel/oidc-client-js/tree/dev/sample

[sattaman]

I'm at the stage with the oidcClient library that im getting the callback with the auth token within the RN app, and just need to validate the url. The popup window by this point has closed though so I'm not sure signinPopupCallback will work

[brockallen]

Signinpopupcallback does all the validation.

On Wed, Apr 5, 2017 at 8:10 AM Thomas Sanderson ***@***.***> wrote: I'm at the stage with the oidcClient library that im getting the callback with the auth token within the app, and just need to validate the url. The popup window by this point has closed though so I'm not sure signinPopupCallback will work — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#306 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAnpFG0tZGjQBZvhFVtEa4ypuG4nazjjks5rs67tgaJpZM4Mx-fG> .

--

…

-Brock

[sattaman]

I'm guessing my implementation of PopupNavigator is stopping this working?

//PopUpNavigator 
import { Linking } from 'react-native';

export default class PopupNavigator {
  prepare(params) {
    return Promise.resolve({
      navigate: ({ url }) => Linking.openURL(url),
    });
  }
  callback(url, keepOpen, delimiter) {
    return Promise.resolve();
  }
}

[sattaman]

I've got it working, so far with no session monitoring or background refresh. I'm not sure these will be possible, but I'm going to attempt with a WebView.

I did need to update this package to remove the .babelrc file in order to get it running with React Native. I've submitted a PR of this change.

PR: #308

[maxmantz]

Thank you for your efforts. Did you come across this issue by any chance? If so, how did you solve it, because I'm stuck there right now...

[sattaman]

I'm note sure what I did there. I found it was useful to edit

/node_modules/oidc_client/package.json

and change main to point to the non minified version. It makes the stack much more useful

[sattaman]

Have you overridden both the stateStore and userStore? This has me for a while. One is hidden away in OidcClientSettings

[maxmantz]

No - I haven't done that yet. I'm just at the stage of hooking everything up. I will tinker a little more over the weekend.

[brockallen]

You might want to look at this for native apps instead: https://github.com/openid/AppAuth-JS

[mdymel]

@sattaman did you manage to get it running?

[sattaman]

Yes. I'm still running off a forked branch though. I've got an additional PR outstanding , and last time i checked the version hadn't been bumped.

[brockallen]

All set on this issue -- can we close?

[amorokh]

I just created a PR (#410) that includes some small changes to support RN.

[brockallen]

merged, thanks.

[creambyemute]

@sattaman Have you actually finished implementing it on react-native or did you switch to something else?

[sattaman]

I abandoned in favour of react-native-app-auth

…

On Wed, 11 Jul 2018, 14:35 Thomas Steinbrüchel, ***@***.***> wrote: @sattaman <https://github.com/sattaman> Have you actually finished implementing it on react-native or did you switch to something else? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#306 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABJBX-jqqudvtheBss9CWcORYo5j6yftks5uFf83gaJpZM4Mx-fG> .

[creambyemute]

@sattaman Alright, thinking about rolling my "own" (wrapper) for oAuth as I need to support uwp as well.

thx for the feedback!