Issue with create() to open() does not allow me to open Link app.

[bebopinbebop]

This might be something really simple.

I took the Tiny Quick Start for React Native and took out the HomeScreen and Success Components and put it into a Expo Router React Native project using tabs.

I understand that the Plaid SDK does not work with Expo, but that's for Expo GO. I built this using EAS and then downloaded the project onto a simulator that gets served from a Metro server that has Expo. Expo GO does not work well with certain native conversions.

So I have this project that wraps the Tiny Quick Start into tabs and has it's own server. When you click onto the "Plaid Tab", the

  useEffect(() => {
    console.log('useEffect called');
    console.log(linkToken);
    if (linkToken == null) {
      console.log('creating link token');
      createLinkToken();
    } else {
      console.log('creating link config');
      console.log(linkToken);
      const LinkTokenConfiguration = createLinkTokenConfiguration(linkToken);
      console.log(LinkTokenConfiguration);
      create(LinkTokenConfiguration);
    }
  }, [linkToken]);

triggers and loads a Link Token. When I got and click onto the the "Open Link" button, it does not load anything. Link does not initiate and the simulator does nothing. (I littered the functions with console logs so I can see step by step what's happening)

Haven't tested it on Android yet, been building primarily on ios so I can port it over to a device for a demo.

So, I thought, maybe it's something about the project. So I just redid the entire TinyQuickStart for RN again but without the Expo Router or tab. Went to press the button, but the simulator just had an overcast, like it went a shade darker.

I tried instead using the example build in the example folder, and copied a Link Sandbox Token into the entry field. But when I went to click onto the button, the screen went darker and Link would not open.

Has anyone experienced this before?

[dtroupe-plaid]

I tried instead using the example build in the example folder, and copied a Link Sandbox Token into the entry field. But when I went to click onto the button, the screen went darker and Link would not open.

I can only provides insights into this case unless a minimum reproducible example is provided. That being said it would be great if you provided the information that was requested when you created this issue:

Environment

Plaid Link React Native	e.g. 10.3.0
ReactNative Version	e.g. 0.67.0
Occurs on Android	e.g. yes
Android OS Version	e.g. 11.0.0 (30)
Android Devices/Emulators	e.g. Pixel 7a physical
Occurs on iOS	e.g. yes
iOS Version	e.g. 16
iOS Devices/Emulators	e.g. iPhone 14 Pro
Link Session ID	e.g. 0de00328-44f8-4c2e-9eaf-726b2f70169c

That being said I just tested the example app on master and Link opened using a sandbox token link-sandbox-eb6930a6-4f41-46df-9325-8d6b11f64000

Simulator.Screen.Recording.-.iPhone.14.-.2024-10-21.at.08.40.18.mp4

Are you trying to test in production? Do you have production access? Does the SDK emit any events when attempting to open Link such as TransitionView?

{
   "eventName":"TRANSITION_VIEW",
   "metadata":{
      "accountNumberMask":"",
      "errorCode":"",
      "errorMessage":"",
      "errorType":"",
      "exitStatus":"",
      "institutionId":"",
      "institutionName":"",
      "institutionSearchQuery":"",
      "isUpdateMode":"",
      "linkSessionId":"312fe758-4104-4392-a6c1-87218ef76430",
      "matchReason":"",
      "metadata_json":"{\"account_number_mask\":\"\",\"error_code\":\"\",\"error_message\":\"\",\"error_type\":\"\",\"exit_status\":\"\",\"institution_id\":\"\",\"institution_name\":\"\",\"institution_search_query\":\"\",\"is_update_mode\":\"\",\"link_session_id\":\"312fe758-4104-4392-a6c1-87218ef76430\",\"match_reason\":\"\",\"mfa_type\":\"\",\"request_id\":\"HHGHmheNswqi23x\",\"routing_number\":\"\",\"timestamp\":\"\",\"view_name\":\"CONSENT\"}",
      "mfaType":"",
      "requestId":"HHGHmheNswqi23x",
      "routingNumber":"",
      "selection":"",
      "timestamp":"2024-10-21T15:40:10.000Z",
      "viewName":"CONSENT"
   }
}

[bebopinbebop]

Hey @dtroupe-plaid

Okay, my bad on the details, I'll flesh it out some more.

Below is the behavior I'm experiencing with the server and the Plaid Client.

Screen.Recording.2024-10-21.at.1.mp4

I added a bunch of console logs so that I could track where things were going.

Below is my project on my repo

It has an AWS Amplify Authentication that wraps the Expo Router tabs to the Plaid client. I removed that since it might be an issue to replicate.

https://github.com/bebopinbebop/zapp-app

Below is what happens when I run the example app:
https://github.com/user-attachments/assets/6a66aae2-2118-42b3-9c08-71d054319020

Plaid Link React Native	11.13.0
ReactNative Version	0.75.5
Occurs on Android	haven't tested
Android OS Version	NA
Android Devices/Emulators	NA
Occurs on iOS	yes
iOS Version	18
iOS Devices/Emulators	iPhone 16 Pro
Link Session ID	didn't get one

[dtroupe-plaid]

Can you provide a token as well as the request you're making to link/token/create with the clientID and secret removed? I suspect the issue is there. Since Link doesn't open in the example app with that token it's not going to work else where.

[dtroupe-plaid]

I cannot provide feedback on the expo issues.

I just tested the token from the video link-sandbox-32be7b19-f337-426f-ab93-0ef027309e58 in the example app on iOS 18 and it worked as expected.

https://github.com/user-attachments/assets/f5c28f33-3ebd-4a69-911b-92f0d38eb0ad
https://github.com/user-attachments/assets/7fc1a139-0325-4cf8-a3fb-8b22da6f3945

Can you please confirm that you are not making any changes to the example app? I'm unable to reproduce your issue so it would be great if you could provide concrete steps for the example app only.

[bebopinbebop]

I'm thinking maybe its some configuration or missing podfile or some initialization missing. But I was able to run everything required for the example file no problem.

For the example app, I followed the instructions on the example app page:

    cd example
    npm install
    cd ios
    bundle install
    bundle exec pod install
    cd ..

except for the last bit, I just ran

    npx react-native run-ios or npx react-native run-android

instead of

npx react-native start

since I was running on just the simulator.

I am not making any changes to the example app.

Below, I am trying to do the server request by getting the Link Token from the Plaid Quickstart Demo here:

https://plaid.com/docs/quickstart/

just to make sure I am getting a legit Link Token.

Screen.Recording.2024-10-21.at.6.mp4

and here is a request for using the QuickStart server from the video.

{
  expiration: '2024-10-22T02:42:25Z',
  link_token: 'link-sandbox-8a3f1017-9271-469f-9ea2-d9cd44d8d490',
  request_id: 'TmrZJTVTLLN4I9a'
}

Back on the main project where I had the TinyQuickStart wrapped in some tabs, I added some more logs to extrapolate both the request from my client to the back end sever:

//Creates a Link token and return it
app.post('/api/create_link_token', async (req, res, next) => {
  console.log('create_link_token');
  console.log('Request Body:', req.body);
  console.log('Request Headers:', req.headers);
  console.log('Request URL:', req.url);
  console.log('Request Method:', req.method);
  console.log('Session ID:', req.sessionID);
  let payload = {};
  //Payload if running iOS
  if (req.body.address === 'localhost') {
    //console.log(req);
    payload = {
      user: {client_user_id: req.sessionID},
      client_name: 'Plaid Tiny Quickstart - React Native',
      language: 'en',
      products: ['auth'],
      country_codes: ['US'],
      redirect_uri: process.env.PLAID_SANDBOX_REDIRECT_URI,
    };
  } else {
    //Payload if running Android
    payload = {
      user: {client_user_id: req.sessionID},
      client_name: 'Plaid Tiny Quickstart - React Native',
      language: 'en',
      products: ['auth'],
      country_codes: ['US'],
      android_package_name: process.env.PLAID_ANDROID_PACKAGE_NAME,
    };
  }
  const tokenResponse = await client.linkTokenCreate(payload);

  console.log('Response Status:', res.statusCode);
  console.log('Response Headers:', res.getHeaders());
  console.log('Token Response Data:', tokenResponse.data);
  res.json(tokenResponse.data);
});

here is the req:

Request Body: { address: 'localhost' }
Request Headers: {
  host: 'localhost:8080',
  accept: '*/*',
  'content-type': 'application/json',
  connection: 'keep-alive',
  'proxy-connection': 'keep-alive',
  cookie: 'connect.sid=s%3A2svX44-V_b7jc16YgozuSi-lqeWgLW0R.tzzxHMyR1YCyW231axWCygo5tdXeNlETsLCTXT85x4Y',
  'accept-language': 'en-US,en;q=0.9',
  'content-length': '23',
  'accept-encoding': 'gzip, deflate',
  'user-agent': 'zappapp/1 CFNetwork/1568.100.1 Darwin/23.6.0'
}
Request URL: /api/create_link_token
Request Method: POST
Session ID: 9-K-h51aCJkP6QK9wTVh-Ar_GTMjKJ0F

and here is the res:

Response Status: 200
Response Headers: [Object: null prototype] { 'x-powered-by': 'Express' }
Token Response Data: {
  expiration: '2024-10-22T03:05:48Z',
  link_token: 'link-sandbox-057e6150-0f9d-421a-8b40-55fb946f3f42',
  request_id: '8JCkn6pcdEWGvzM'
}

[dtroupe-plaid]

I am still unable to reproduce this result in the example application. Even if I use the tokens your provide Link opens. Without steps to reproduce this issue it's hard to provide guidance.

I recommend starting from scratch with the example application in this repo and just pasting a token. and using npm run ios in the example directory.

Please note the example app is using "react-native": "0.73.6",