How to use Okta react native sdk and external idps?

jjcbt · June 10, 2021, 8:14pm

We are using the okta react native sdk. We have a few external idps we redirect to for certain users. The okta sign in widget on our web pages handles these fine with IDP discovery turned on. The okta react native sdk doesn’t appear to have this option for custom sign in. I’m assuming to get the idp redirection to work we would have to use the broswer sign in? Is there a way to get that idp discovery to work with a custom sign options?

Lijia · June 10, 2021, 9:38pm

@jjcbt Are you referring the below Okta react native sdk? The sdk does include custom sign in and browser sign in.

Please refer the below logic:

github.com

okta/okta-signin-widget/blob/master/src/models/IDPDiscovery.js#L53

    
      
          this.trigger('save');
          
          
this.appState.trigger('loading', true);
          
          
const webfingerArgs = {
            resource: resource,
            requestContext: requestContext,
          };
          const authClient = this.appState.settings.authClient;
          
          
authClient
            .webfinger(webfingerArgs)
            .then(res => {
              if (res && res.links && res.links[0]) {
                if (res.links[0].properties['okta:idp:type'] === 'OKTA') {
                  this.trigger('goToPrimaryAuth');
                } else if (res.links[0].href) {
                  const redirectFn = res.links[0].href.includes('OKTA_INVALID_SESSION_REPOST%3Dtrue')
                    ? Util.redirectWithFormGet.bind(Util)
                    : this.settings.get('redirectUtilFn');
                  //override redirectFn to only use Util.redirectWithFormGet if OKTA_INVALID_SESSION_REPOST is included

The basic flow would be:

You don’t need to use auth-js to do this, as it’s a public API. WebFinger | Okta Developer

Please have a try if this idea works.

jjcbt · June 10, 2021, 10:35pm

So if I understand correctly, our custom login screen would take the email, and use the web finger api to see if the user needs to use an external idp. If the user does then we would have to use the signInWithBrowser({ idp: ‘your_idp_here’ }); option with the react native sdk?

Arron · September 1, 2021, 12:28pm

@jjcbt did the described approach work for you in the end?