CODEWITHSUNDEEP
webviewreact-native
Rein rPavi
Rein rPavi

Reputation: 3396

Authentication challenge in Webview component of React Native

I am trying to load a URL in react native webview which needs credentials. Normally when we open this URL in a browser like Safari and Chrome, it give us a popup to enter the credentials. Not sure how to handle it in React-Native?

Upvotes: 4

Views: 1787

Answers (1)

Dan
Dan

Reputation: 8834

We require LinkedIn authentication for our React Native application, we couldn't find a way to work with the WebView component.

This may very well be possible, however, I will highlight what solution we came up with. These steps are for an iOS React Native app, steps will differ for Android but the concept is the same. This also does require some server configuration.

We created a URL Type. In XCode, select your project and click on the Info tab. Scroll to the bottom to see URL Types. Fill in the identifier and URL Schemes. Remember what you've set for the URL Schemes. For this example, we will use myscheme.

When the app opens, we use Linking to open up the URL in Safari.

Linking.openURL('https://foo.bar');

The User could then log in via the website, once logged in, you can redirect your User back to.

myscheme://name=Dan

The myscheme matching the URL Scheme you entered within Xcode. As long as you have your application installed and the scheme matches then your app will open.

You can add any payload of information after ://.

In your React application, you can register 

componentWillMount() {
  Linking.addEventListener('url', this.handleOpenURL);
}

componentWillUnmount() {
  Linking.removeEventListener('url', this.handleOpenURL);
}

handleOpenURL = (event) => {
  const { url } = event;
  if (url.startsWith('myscheme://')) {
    // do something with your data.
  }
};

Upvotes: 1

Related Questions