Access Denied

[nikolal]

Hi,

I am getting "accessDenied" with some long Id after it, on on a blank screen when I try to use Plaid example:

<PlaidAuthenticator onMessage={this.onMessage} publicKey={plaidConfig.publicKey} env={plaidConfig.env} product={plaidConfig.products} clientName="Emma app" />

For a second I can see some other screen with two checkboxes, and message saying something like: "Emma app wants to... ", but I am instantly redirected to "AccessDenied'.

I am testing in sandbox mode.

[tonyxiao]

Seeing the same issue over here as well :(

[tonyxiao]

@nikolal I was able to fix it by passing additional param selectAccount={false}

[tonyxiao]

Actually nvm that did not fix it. Adding useWebKit to the webview created by react-native-plaid-link did however.

[nikolal]

@tonyxiao

This doesn't fix the issue for me.

I just copy pasted code from this lib and set useWebKit to webView.

Do you maybe have some example I could use?

[nikolal]

@tonyxiao

It works. I forgot to change import from the installed lib to the copied code.

Thanks a lot.

[nikolal]

@catalinmiron I created pull request to fix this.

https://github.com/catalinmiron/react-native-plaid-link/pull/20

Thanks again @tonyxiao

[bfine9618]

Has this fix been published to NPM yet?

[corbt]

I wasn't able to get things working on the latest version of React Native, even with this fix. After many hours of troubleshooting, I ended up mostly rewriting the component and finally getting it working. I'm going to leave my work here just in case it's useful for anyone else in the same situation!

import React from "react";
import { WebView, WebViewIOSLoadRequestEvent, WebViewProperties } from "react-native";
import parse from "url-parse";

const encodeParams = (params: Object) =>
  Object.entries(params)
    .filter(([k, v]) => v != null)
    .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
    .join("&");

interface Props extends WebViewProperties {
  publicKey: string;
  env: "development" | "sandbox" | "production";
  product: string;
  clientName?: string;
  webhook?: string;
  selectAccount?: boolean;
  onSuccess?: (e: any) => void;
  onExit?: (e: any) => void;
}

export default class PlaidAuthenticator extends React.Component<Props> {
  static defaultProps = {
    selectAccount: false
  };

  handleLoadRequest = (e: WebViewIOSLoadRequestEvent) => {
    if (e.url.includes("postMessage")) {
      return false;
    }
    if (e.url.startsWith("plaidlink")) {
      const parsed = parse(e.url, true);

      if (parsed.host === "connected") {
        this.props.onSuccess && this.props.onSuccess(parsed.query);
      } else if (parsed.query && parsed.query.event_name === "EXIT") {
        this.props.onExit && this.props.onExit(parsed.query);
      }
      return false;
    }
    return true;
  };

  render() {
    const {
      publicKey,
      selectAccount,
      env,
      product,
      clientName,
      style,
      webhook,
      onSuccess,
      onExit,
      ...rest
    } = this.props;

    const params = {
      key: publicKey,
      apiVersion: "v2",
      env,
      product,
      clientName,
      isWebview: true,
      isMobile: true,
      selectAccount,
      webhook
    };

    const uri = `https://cdn.plaid.com/link/v2/stable/link.html?${encodeParams(params)}`;

    return (
      <WebView
        {...rest}
        source={{ uri }}
        onShouldStartLoadWithRequest={this.handleLoadRequest}
        originWhitelist={["plaidlink://", "https://"]}
      />
    );
  }
}

[nikolal]

@bfine9618

Not merged yet.

You can just download this lib to your project ( only 2 files ), add useWebKit until it's merged.

[catalinmiron]

@nikolal @bfine9618 the PR was merged and I've published a new version 1.3.8 🎉. Thanks everyone!